Question

我必须制作一个微型网站，我想知道在HTML模板中使用徽标的最佳方法。 （忽略这是无效代码的事实，如果我使用alt =“”，它只是任意的胡扯。）

选项1：

<a href="#">
   <img src="logo.gif" /> 
</a>

选项2：

<h1>
   <a href="#">
      <img src="logo.gif" /> 
   </a>
</h1>

选项3：

<h1>
   <a href="#">
   </a>
</h1>

h1{background: url(logo.gif);}
h1 a{height: #px; width: #px;}

选项4：

使用h1，h2或h3更适合SEO，据我所知，重复的h1是是一个坏主意和公司品牌不是每个页面的主题在它的网站上？

我通常使用选项3 ，如下所示：

<h2>
   <span>Company name</span>
   <a href="#">
   </a>
</h2>

h2{height: #px; width: #px; background: url(logo.gif);}
h2 a{display: block; height: #px; width: #px;}
h2 a span{display: none;}

Answer 1

我通常使用选项3，但这有一个缺点：如果未加载CSS，公司徽标也不可见。我认为该徽标是随时都应该出现在网站上的图像之一，即使没有CSS，因为它是该品牌非常重要的一部分。因此，我认为在徽标上使用<img>在语义上是最正确的。这是一个在页面内容中很重要的图像，而不仅仅是样式的一部分。

我最喜欢的选项（我应该更多地使用它）是将徽标图像与标题分开的alt文本。在<h1>我再次放置了该品牌的名称，或者如果它不是主页，我会将其放在常规div中，并使用<h1>作为实际页面标题。通常，在设计方面不能同时使用徽标和名称作为标题。

关于选项4：它取决于您使用的HTML版本，因为HTML5允许多个h1。我已经向谷歌主持人提出了一个问题，关于这个搜索引擎优化的含义，我希望Matt Cutts会在他的下一轮视频中回答。

Answer 2

在HTML5中（如果您的标题仅包含您的徽标和标语/座右铭），请执行以下操作：

<header role="banner">
<a href="#"> 
   <img src="logo.gif" alt="Waffle Inc." />  
</a> 
</header>

Answer 3

通常鼓励使用<h1>作为徽标，因为您的品牌标识本质上是一种陈述，而不仅仅是一种装饰性功能。但是，请勿在网站上的任意图片上使用<h*>标记。

我建议您将徽标放在<img>标记内，只需为其指定alt属性，不将其作为背景图片。

Answer 4

在主页上使用h1。主页的主要标题是公司标识是有意义的。 alt文本应该是公司名称。

在其他页面上使用普通div，它不是任何类型的标题。该页面将有自己的主标题。

Answer 5

我喜欢选项3，因为它允许您将公司名称添加为实时文本。

但是没有公司徽标作为h1标签，h1标签是页面内容的主要内容，应该是内容标题。我根本不会在标题标签中有公司徽标，因为它不是标题。

网站上品牌标识的最佳实践

5 个答案: