{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Anthone 的问题《What tag should be used for a logo element if the》','https://www.manongdao.com/q-1253203.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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!
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>asinline-blockand set the logo as a background image.Given your markup example, you seem to ask about a link in the
navelement. If that’s the case, you should not use a heading element for it, because the heading element would label thenavsection (that’s probably not what you want to convey; if you would have a heading innav, 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 aul):However, if you talk about the site name that gets (typically) shown in the site-wide banner/header on each page, using a
h1makes 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 thenav; its nearest section should be thebodysectioning root.Semantically, it makes no difference if the site name/logo is shown as image or as text. In case of an image, the
altattribute provides equivalent content as text.So for a site logo you might have:
And for a site name you might have:
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:
Then you would have to format the logo with CSS.
Read this to learn a little bit more about the custom elements! :)