如果徽标是文本，应为徽标元素使用什么标签？

问题描述：

我已阅读<h1>标签is inappropriate for a logo。但是，如果您的标志是纯文本，您应该使用什么？我觉得<p>和<span>也是不合适的。下面是一个示例：如果徽标是文本，应为徽标元素使用什么标签？

<header> 
    <nav> 
    <a id="logo" href="."> 
     <span>Company Name</span> 
    </a> 
    <a id="linkOne" href="#thingOne"> 
     <img src="…"> 
    </a> 
    <a id="linkTwo" href="#thingTwo"> 
     <img src="…"> 
    </a> 
    <a id="linkThree" href="#thingThree"> 
     <img src="…"> 
    </a> 
    </nav> 
</header>

谢谢！

答

考虑到您的标记示例，您似乎会询问nav元素中的链接。如果是这样的话，你不应该为它使用标题元素，因为标题元素会标记nav部分（这可能不是你想表达的内容;如果你的标题在nav，它应该是类似于“导航”）。

在这种情况下，你不需要特殊的元素可言，只是列表中的链接在nav（内ul理想情况下）：

<header> 
    <nav> 
    <ul> 
     <li><a id="logo" href="." rel="home">Company Name</a></li> 
     <li><a id="linkOne" href="#thingOne"><img src="…" alt="…"></a></li> 
     <li><a id="linkTwo" href="#thingTwo"><img src="…" alt="…"></a></li> 
     <li><a id="linkThree" href="#thingThree"><img src="…" alt="…"></a></li> 
    </ul> 
    </nav> 
</header>

但是，如果你谈论的站点名称时，得到（通常）显示在每个页面的站点范围横幅/标题中，使用h1是有意义的，因为它代表站点，在该范围内页面的所有部分应该是（例如站点范围的导航），并且它给文档大纲一个顶层标签（否则将不详细说明）。在这种情况下，它不能是nav的一部分;其最近的部分应该是body切片根。

从语义上讲，如果站点名称/徽标显示为图像或文本，则不会有任何区别。在图片的情况下，alt属性提供与文本等效的内容。

所以对于一个网站的标志，你可能有：

<body> 
    <header> 
    <h1><a href="/" rel="home"><img src="…" alt="ACME Inc."></a></h1> 
    </header> 
</body>

而对于一个网站的名字你可能有：

<body> 
    <header> 
    <h1><a href="/" rel="home">ACME Inc.</a></h1> 
    </header> 
</body>

答

我相信标签主要取决于您。

我不明白为什么它不应该是h1，因为这是纯文本。

但分析你的情况，这是我会做的。

选项1.使用h1并将其确定为用于显示徽标的标签。永远不要再使用它。

选项2.为徽标创建新标签，例如。这些被称为“自定义元素”。它应该是这样的：

var logo = document.registerElement('com-logo', { 
    prototype: Object.create(HTMLElement.prototype) 
});

然后，你将不得不格式化的标志与CSS。

阅读this了解更多关于自定义元素的信息！ :)

我不知道让我自己的元素。我很想将它直接放在标签中。但至于我在哪里读到有关h1标签的信息：http://www.fastcompany.com/3016894/should-your-tag-be-your-logo – Mike

答

在HTML中没有用于标记徽标的“语义”方式（即语法），因此在基本级别上没有正确或错误的方式。也就是说，我不会使用<h1>作为徽标，因为标题标签应该构成您的HTML。

我通常使用一个简单的<div>或<a>与徽标作为背景图片，因为我认为这是最好的方式来隐藏屏幕阅读器。坦率地说，我没有看到将徽标作为<img>置于<section>中的价值，因为该部分应包含内容的专题分组。

就你而言，我会将你的<a>格式化为inline-block，并将徽标设置为背景图片。

徽标是纯文本，而不是图像。 – Mike

那为什么不直接用 -tag？ –

这就是我最终做的。很简单，对吧？我只是在探究它是否是最好的语义选择。也许这是一个愚蠢的问题。 – Mike

如果徽标是文本，应为徽标元素使用什么标签？

相关推荐