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

M

6

27

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

<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>

Thanks!

Monoacid answered 12/2, 2016 at 20:15 Comment(0)

S

9

Given your markup example, you seem to ask about a link in the nav element. If that’s the case, you should not use a heading element for it, because the heading element would label the nav section (that’s probably not what you want to convey; if you would have a heading in nav, it should probably be something like "Navigation").

In that case, you wouldn’t need a special element at all, just list the links in nav (ideally within a 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>

However, if you talk about the site name that gets (typically) shown in the site-wide banner/header on each page, using a h1 makes sense, because it represents the site, in which scope all of the page’s sections should be (e.g., the site-wide navigation), and it gives the document outline a top-level label (which would be unspecified otherwise). In that case it must not be part of the nav; its nearest section should be the body sectioning root.

Semantically, it makes no difference if the site name/logo is shown as image or as text. In case of an image, the alt attribute provides equivalent content as text.

So for a site logo you might have:

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

And for a site name you might have:

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

Saddlebag answered 13/2, 2016 at 1:38 Comment(0)

C

18

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 <h1> for a logo, since the heading-tags should structure your HTML.

I usually use a simple <div> or <a> 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 <img> in a <section> since a section should encompass a thematic grouping of content.

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

Codycoe answered 12/2, 2016 at 20:37 Comment(4)

The logo is plain text, not an image. – Monoacid 14/2, 2016 at 5:8

Then why not just use an <a>-tag? – Codycoe 14/2, 2016 at 8:36

That's what I ended up doing. Simple, right? I was just probing at whether it was the best semantic choice. Perhaps it was a silly question. – Monoacid 15/2, 2016 at 1:42

I am done waiting for w3c for 15+ years. I am using <brand> as default branding tag. <img>, <a> and <span> inside brand to support feasability. – Inquisition 8/7, 2019 at 6:15

S

9

Given your markup example, you seem to ask about a link in the nav element. If that’s the case, you should not use a heading element for it, because the heading element would label the nav section (that’s probably not what you want to convey; if you would have a heading in nav, it should probably be something like "Navigation").

In that case, you wouldn’t need a special element at all, just list the links in nav (ideally within a 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>

However, if you talk about the site name that gets (typically) shown in the site-wide banner/header on each page, using a h1 makes sense, because it represents the site, in which scope all of the page’s sections should be (e.g., the site-wide navigation), and it gives the document outline a top-level label (which would be unspecified otherwise). In that case it must not be part of the nav; its nearest section should be the body sectioning root.

Semantically, it makes no difference if the site name/logo is shown as image or as text. In case of an image, the alt attribute provides equivalent content as text.

So for a site logo you might have:

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

And for a site name you might have:

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

Saddlebag answered 13/2, 2016 at 1:38 Comment(0)

G

2

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:

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

Then you would have to format the logo with CSS.

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

Grapple answered 12/2, 2016 at 20:23 Comment(1)

I'm not sure about making my own element. I'm tempted to just leave it in the a tag directly. But as for where I read that about the h1 tag: fastcompany.com/3016894/should-your-tag-be-your-logo – Monoacid 12/2, 2016 at 20:25

W

1

Contrary to the currently accepted answer, we should ideally not use the H1 to wrap your brand name, as:

I understand that the best and proper use of H1 is to give a top level heading to a webpage/document, not the site itself (ie, having all documents titled as the site name just doesn't make sense in this context), and
Using multiple H1s is generally considered bad practice (which would be necessary if you want to title your documents/pages using H1 as you should).

After pondering this I believe the best answer is to therefore express the brand name by including schema.org microdata, and then use whatever tag you feel is reasonable for you.

Eg you can see the example taken from down near the bottom of https://schema.org/LocalBusiness:

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

Hope that helps answer this question more definitively! 😄

Willett answered 12/3, 2021 at 4:56 Comment(0)

M

0

There's no really a correct answer for this as there had been no official semantic element for sites' logos while for example, we have <figure> for images, <blockquote> && <q> for quote blocks and quotation marks, and <main> is self-explanatory

so from a personal point of view:

figure > img if logo is an image
div > span for textual ones

now why `div > span`?

h1 should be used only once on the page (unfortunately I have no official ref) && Search engines will see the logo as the first heading
bad UI if you make the link for HOME page in the logo as some users are not used to clicking on the site logo if they don't find a HOME link
divs are not helpful for screen readers so they ain bad for SEO in this case unlike say a <section> which wouldn't make sense
not just span as a container would help in styling like centering
last but not least should you put the logo inside the nav or outside: inside for the same reason as wrapping <span> inside of <div>

To sum up

put the elements holding the logo inside the nav
use either

figure > img
div > span

make a separate HOME link for better UI

hope I helped:)

Mac answered 24/11, 2021 at 18:22 Comment(0)

C

-4

Just use <site-logo>...</site-logo>. The W3C validator wont complain as long as the element contains a dash.

Chong answered 16/6, 2020 at 14:25 Comment(0)

so from a personal point of view:

now why `div > span`?

To sum up

Recommended topics

Hot tags

so from a personal point of view:

now why div > span?

To sum up

Recommended topics

Hot tags

now why `div > span`?