CODEWITHSUNDEEP
htmlsemantic-markup
Michael Swarts
Michael Swarts

Reputation: 3921

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

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!

Upvotes: 28

Views: 40967

Answers (5)

Aybak3k
Aybak3k

Reputation: 326

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

  1. put the elements holding the logo inside the nav
  2. use either
  • figure > img
  • div > span
  1. make a separate HOME link for better UI

hope I helped:)

Upvotes: 0

Drewdavid
Drewdavid

Reputation: 3192

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

Upvotes: 1

unor
unor

Reputation: 96597

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>

Upvotes: 10

Johannes Jander
Johannes Jander

Reputation: 5020

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.

Upvotes: 18

Bruno Moutinho
Bruno Moutinho

Reputation: 61

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! :)

Upvotes: 3

Related Questions