What tag should be used for a logo element if the logo is text?

时间:2016-02-12 20:15:26

标签: html semantic-markup

I have read that an SELECT t1.col1 AS "t1.col1", t2.col1 AS "t2.col1", ... tag is inappropriate for a logo. But if your logo is plain text, what should you use? I feel like <h1> and <p> are also unsuitable. Here's a sample:

<span>

Thanks!

5 个答案:

答案 0 :(得分:12)

There is no "semantic" way (i.e. syntax) to markup a logo in HTML, so on a fundamental level there is no right or wrong way. That said, I would not use a client_ip for a logo, since the heading-tags should structure your HTML.

I usually use a simple <h1> or <div> with the logo as a background image because I think that's the nicest way to hide it from screen readers. Frankly I don't see much value of putting the logo as an <a> in a <img> since a section should encompass a thematic grouping of content.

In your case, I'd format your <section> as <a> and set the logo as a background image.

答案 1 :(得分:2)

鉴于您的标记示例,您似乎询问了nav元素中的链接。如果是这种情况,你不应该为它使用heading元素,因为heading元素会标记nav部分(这可能不是你要传达的部分;如果你在nav中有一个标题,它可能应该是&#34;导航&#34;)。

在这种情况下,您根本不需要特殊元素,只需列出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>

答案 2 :(得分:1)

I believe the tag would be mostly up to you.

I do not see why it shouldn't be h1, given that is plain text.

But analysing your case, this is what I would do.

Option 1. Use h1 and determine it as the tag to be used to display the logo. Never again it should be used in the dom.

Option 2. Create a new tag for the logo, such as . These are called "Custom elements". It should go something like this:

int connectivity = 4;
int newMaskVal   = 255;
cv::floodFill (..., cv::FLOODFILL_MASK_ONLY | connectivity  | (newMaskVal << 8));

Then you would have to format the logo with CSS.

Read this to learn a little bit more about the custom elements! :)

答案 3 :(得分:0)

与当前接受的答案相反,我们最好不要使用 H1 来包装您的品牌名称,如:

  • 我了解 H1 的最佳和正确用法是为网页/文档提供顶级标题,而不是网站本身(即,将所有文档都命名为站点名称在这种情况下没有意义),并且
  • 使用多个 H1s 通常被认为是不好的做法(如果您想使用 H1 为文档/页面添加标题,这将是必要的)。

经过深思熟虑后,我认为最好的答案是通过包含 schema.org 微数据来表达品牌名称,然后使用您认为对您来说合理的任何标签。

例如,您可以在靠近 https://schema.org/LocalBusiness 底部的下方看到示例:

<div itemscope itemtype="https://schema.org/Restaurant">
  <span itemprop="name">GreatFood</span>

希望有助于更明确地回答这个问题! ?

答案 4 :(得分:-2)

只需使用<site-logo>...</site-logo>W3C validator不会抱怨as long as the element contains a dash