What tag should be used for a logo element if the logo is text?
Clash Royale CLAN TAG#URR8PPP
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:
<h1>
<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>
Thanks!
3 Answers
3
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").
nav
nav
nav
In that case, you wouldn’t need a special element at all, just list the links in nav (ideally within a ul):
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>
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.
h1
nav
body
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.
alt
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>
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.
<h1>
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.
<div>
<a>
<img>
<section>
In your case, I'd format your <a> as inline-block and set the logo as a background image.
<a>
inline-block
Then why not just use an <a>-tag?
– Johannes Jander
Feb 14 '16 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.
– Mike
Feb 15 '16 at 1:42
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! :)
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
– Mike
Feb 12 '16 at 20:25
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
The logo is plain text, not an image.
– Mike
Feb 14 '16 at 5:08