Use case is a blog post:
<article> element is used inside <main>, to encase an article on a post page.
<header> is in use within <article>, containing <h1> title and meta including author, datestamp etc.
<article class="card bg-white">
<header>
<div class="card-img-top p-0">
<img width="1414" height="1011" src="image.jpg 1200w" sizes="(max-width: 1414px) 100vw, 1414px">
</div>
<h1 class="entry-title" itemprop="headline">
Article title
</h1>
<div class="entry-meta">
<span class="author vcard" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><span itemprop="name">Joe Bloggs</span></span>
<span class="meta-sep"> | </span>
<time class="entry-date" datetime="2022-03-14T14:28:33+00:00" title="March 14, 2022, 2:28 pm" itemprop="datePublished">14 March 2022</time>
<meta itemprop="dateModified" content="14 March 2022">
</div>
</header>
<div class="entry-content" itemprop="mainEntityOfPage">
<meta itemprop="description" content="Excerpt for article">
<p>Article text.</p>
<p>Article text.</p>
<p>Article text.</p>
</div>
</article>
Each post has a feature image. Does this image belong semantically to <header>, or does it not matter (ie. anywhere in <article>)?
I wish to present the image above the meta info, ie. the existing <header>. Visually, I guess it would sort of comprise the header area (ie. the stuff before the post body), but it would not necessarily communicate meta information about the post. If the lead image should not be part of <header>, this would mean it is also above <header>.
(Despite presence of a <header> at top of page, multiple in-page <header>s are permitted where semantically justified).
However, found documentation tends to pertain to the top-of-page header use of <header> alone:
The <header> element represents a container for introductory content
or a set of navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship
As you've quoted, a header element "represents introductory content" of a sectioning element. If you consider an article's main image to be part of its introductory content, it would make sense to place it within the header element.
I've omitted schema structured data for readability.
<article>
<header>
<img alt="A kitten." src="/images/kitten.jpg" width="100" height="100">
<h1>The cutest kitten</h1>
<ul aria-label="Article metadata.">
<li>Author: Katrina Wisquer</li>
<li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
</ul>
</header>
<p>There once was a cute kitten who...</p>
</article>
However, if you want to visually place an image before the header content, but still keep it after the header content in the document flow, you can use CSS to change the position it's rendered in. An easy way to do this would be with the order property and CSS Flexbox or CSS Grid. This will change the visual presentation order, but keep the document flow the same. Assistive tech will present content in the order of the document flow.
This may be the best solution, because generally one expects to encounter the title of an article first, before anything else.
article {
display: flex;
flex-direction: column;
margin: 1rem;
padding: 1rem;
border: 1px solid black;
}
.article-image {
order: 1;
}
.article-header {
order: 2;
}
.article-body {
order: 3;
}
<article>
<header class="article-header">
<h1>The cutest kitten</h1>
<ul aria-label="Article metadata.">
<li>Author: Katrina Wisquer</li>
<li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
</ul>
</header>
<img class="article-image" alt="Kittens." src="https://placekitten.com/200/100" width="200" height="100">
<div class="article-body">
<p>There once was a cute kitten who...</p>
</div>
</article>
Additional notes:
Don't forget an alt attribute on the image
Marking up article metadata in an unordered list is more semantic than a <div> with spans.
It seems you are both overusing and misusing the title attribute
Related
I've been wondering whats the best practice for using a heading tag arround my logo on my website, especially with HTML5 sectioning tags.
I've read on many website and forums that I should do the following, if I want to add a heading arround my logo:
<!DOCTYPE html>
<html>
[...]
<body>
<div id="outer-wrapper">
<header id="header" class="main-header clearfix">
<h1>
<img src="logo" src="[...]" alt="text goes here" />
</h1>
</header>
<div id="inner-wrapper">
[...]
</div>
</div>
</body>
</html>
But now, every page on my website has as its main title the text specified on the logo's alt attribute, which I could imagine, is not ideal. I mean, the H1 tag is intended to provide the «main topic of the document», but that's most of the time not the text I specified on the logo's alt tag.
However, if the logo's alt tag contains the name of a company (because it's the comapanys logo), I would like to have it somewere in a heading (to give it some relevance and importance), just not in the h1 heading.
Do you think, the following is a valid solution for this problem:
<!DOCTYPE html>
<html>
[...]
<body>
<div id="outer-wrapper">
<header id="header" class="main-header clearfix">
<h2>
<img src="logo" src="[...]" alt="text goes here" />
</h2>
</header>
<div id="inner-wrapper">
<article>
<h1>Main topic</h1>
</article>
</div>
</div>
</body>
</html>
Both snippets are semantically the same. If using sectioning elements, the heading ranks often (but not always) don’t matter anymore.
You can test it yourself, check these two snippets in an HTML5 outliner (e.g., in this online demo):
<body>
<h1>document heading</h1>
<article>
<h2>main content heading</h2>
</article>
</body>
<body>
<h2>document heading</h2>
<article>
<h1>main content heading</h1>
</article>
</body>
They produce the same outline:
1. document heading
1. main content heading
However, the HTML5 specification encourages authors to use heading elements of the correct rank, so you should stick with the first snippet.
The HTML5 spec does not define that the (first) h1 element would be especially important or that it should be used for the "main topic" of the document. The spec defines the rank, not importance.
I think you should use a heading for the logo if this logo represents the site (which is typically the case), and it makes sense to have this as the first heading (i.e., the heading of the sectioning root body), and the following sections should be in scope of it.
Consider the following piece of markup:
<a href="/description/item1">
<img src="item1.jpg">
<footer>
<section>
<h2 class="title">Bar Foo</h2>
<h3 class="subtitle">The end of the world</h3>
</section>
<section class="details">
<h4 class="name">Painted by Someone</h4>
<h5 class="id">123243552345</h5>
</section>
</footer>
</a>
DEMO
Anyway, I have always difficulties with semantics. I think that the above snippet doesn't use the elements like section/footer correct (please correct me if I'm wrong!) So I can rewrite it as:
<a href="/description/item1">
<img src="item1.jpg">
<header>
<h2 class="title">Bar Foo</h2>
<h3 class="subtitle">The end of the world</h3>
</header>
<footer>
<h4 class="name">Painted by Someone</h4>
<h5 class="id">123243552345</h5>
</footer>
</a>
But then again, shouldn't the anchor be (or be wrapped with) an article and is footer correct here, it is just content about the image ? Can someone help me with this piece of code and guide me through the process to make it semantically correct/better ? Any advice or documentation would be appreciated!
As suggested by Rich Bradshaw, I would use the figure and figcaption tags for your problem:
<a href="/description/item1">
<figure>
<img src="http://p1.pichost.me/i/34/1573266.jpg" />
<figcaption>
<h2 class="title">Bar Foo</h2>
<h3 class="subtitle">The end of the world</h3>
<h4 class="name">Painted by Someone</h4>
<h5 class="id">123243552345</h5>
</figcaption>
</figure>
</a>
figure
The tag specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
While the content of the element is related to the main flow,
its position is independent of the main flow, and if removed it should
not affect the flow of the document.
figcaption
The tag defines a caption for a element.
The element can be placed as the first or last child of
the element.
> But pay attention, those are HTML 5 tags and consequently just supported in HTML 5 browsers.
I've been poking around online but I can't seem to find a definitive answer on this. Given the following HTML5 structure below, should I be using h2's or h3's inside of my aside element for content titles?
I know it's okay to use multiple h1's as long as they are inside a section and/or article element. But i'm not sure what I should do within my aside? I think I should stay away from multiple h1's in an aside but im not sure about h2's and h3's.
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<section>
<header>
<h1>Main Section</h1>
</header>
<article>
<h1>Article Title 1</h1>
<div>Some Content Here</div>
</article>
<article>
<h1>Article Title 2</h1>
<div>Some Content Here</div>
</article>
<article>
<h1>Article Title 3</h1>
<div>Some Content Here</div>
</article>
</section>
<aside>
<header>
<h1>Side Bar Heading</h1>
</header>
<div>
<h2>Side Content Title 1</h2>
<div>Some Content Here</div>
</div>
<div>
<h2>Side Content Title 2</h2>
<div>Some Content Here</div>
</div>
<div>
<h2>Side Content Title 3</h2>
<div>Some Content Here</div>
</div>
</aside>
</body>
</html>
According to MDN:
Sections in HTML5 can be nested. Beside the main section, defined by the element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within <body>, <section>, <article>, <aside>, and <nav> tags.
Each section can have its own heading hierarchy. Therefore, even a nested section can have an <h1>.
So the way you've done it -- with one <h1> and multiple <h2> inside your <aside> -- is appropriate.
You really shouldn't be using multiple <h1>s on a page. The h tags are primarily used to dictate document structure. The Web Content Accessibility Guidelines (WCAG) 2.0 standard shows examples that the h1 tag should title the page. Most states (Illinois, for example) have their own outlines on Accessibility standards. Illinois' in specific outlines that there should only ever be one h1 tag on a page and that it's contents be similar to the <title> tag. While this can be, and probably will be, argued, it makes semantic sense to only use one h1 tag and let the other 5 layers sit nested correctly.
Really, common sense plays a big role in structuring your other h tags. Imagine looking at your site in an 'outline mode' when you're done. Does it make sense?
For example, say you want the outline of your site to look like this:
Page Title
Content
- Article
- Sub-article
- Article
Sidebar
- Weather
- Local News
Then this is how your heading tags should be working:
<header>
<h1>My News Website</h1>
<nav></nav>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>Blah Blah Blah.</p>
<h3>Sub-heading in Article</h3>
<p>More blah blah blah.</p>
</article>
<article>
<h2>Article Title</h2>
<p>Blah Blah Blah.</p>
</article>
</section>
<aside>
<h2>Weather</h2>
<p>Weather information.</p>
<h2>Local News</h2>
<ul>
<li>News Item</li>
<li>News Item</li>
</ul>
</aside>
As long as things you want at the same level share the same heading number, then you're on the right track. Things that relate to a heading that contextually make sense to be "under" said heading should increment the heading number by one.
Lastly, you can have an outline of your completed site shown to you by using the HTLM 5 Outline. Check it out here: http://gsnedders.html5.org/outliner/
State of MDN Apr 21, 2022:
Using more than one is allowed by the HTML specification, but is not considered a best practice. Using only one is beneficial for screenreader users.
The HTML specification includes the concept of an outline formed by the use of elements. If this were implemented it would enable the use of multiple elements, giving user agents—including screen readers—a way to understand that an nested inside a defined section is a subheading. This functionality has never been implemented; therefore it is important to use your headings to describe the outline of your document.
In order to make websites more accessible I have been encouraged to use HTML5 tags <header>, <footer>, etc... to only surround the actual content, but I have a feeling that I might be doing something wrong.
An example body:
<header>
<div class="center">
<h1>Title</h1>
<nav>
...
</nav>
</div>
</header>
<div>
<section>
...
</section>
</div>
<footer>
<div class="center">
...
</div>
</footer>
.center {
max-width: 70em;
margin: 0 auto;
}
header {
width: 100%
background-color: red;
}
footer {
width: 100%
background-color: green;
}
body > div {
width: 100%
background-color: blue;
}
Is it actually better like this?
<div id="head">
<header>
<h1>Title</h1>
<nav>
...
</nav>
</header>
</div>
<div>
<section>
...
</section>
</div>
<div id="foot">
<footer>
...
</footer>
</div>
As for what is better — DIV inside structural elements like HEADER/FOOTER or structural elements inside DIV, it does not matter since DIV is common container without any semantic sense at all.
What is really unsemantic/bad-practice in your first example is center class name. Class names should reflect purpose of block (content, products, etc.), not its presentation (center, red, etc.).
Basically, that div elements are not required semantically speaking (maybe you need them for styling?).
div is an element without semantic (as its counterpart for inline elements span) and you have to use them where there isn't anything better. Even if you give them some semantic with its id attribute, that semantic is only known by you and not for, for example, any web search motor (google) or any screen reader (for blind people, for example), because there aren't any definitive conventions about id or class values.
If you use header, footer etc, you are giving them semantics. Maybe you want to increase their semantic using some value for the role attribute.
By the way, that section surely it isn't needed. Look at what people from HTML5 Doctor say:
In HTML 5 you can specifically mark up all the “secondary” content on
a page such as navigation, branding, copyright notices, so it feels
odd that you can’t specifically mark up the most important part of
your page—the content.
But what would be the purpose of marking it up specifically, anyway?
If you need to style it, use a div. An assistive technlogy like a
screenreader can find the main content because it is the first thing
inside a page that isn’t a header, nav or footer.
With a <div role="main"> you have everything you need.
It'd be better like this:
<header>
<h1>Title</h1>
<nav>
...
</nav>
</header>
<section>
...
</section>
<footer>
...
</footer>
Or alternatively:
<div class="header">
<h1>Title</h1>
<div class="nav">
...
</div>
</div>
<div class="section">
...
</div>
<div class="footer">
...
</div>
Why are you being told to add those extra wrapper div elements?
Try
<section>
<header> head content </header>
main content
<footer> footer content </footer>
</section>
This get's rid of all those silly divs and now you have your header and footer linked to your section like they should be.
Is it fine to use multiple <header> and in HTML 5, if yes then isn't semantically incorrect and won't it confuse mobile readers?
I saw many site uses like
<body class="home">
<header class="hd1">
<hgroup>
<h1>HTML5 Documnet</h1>
<h2>tagline</h2>
</hgroup>
</header><!-- .hd1 -->
<div class="main">
<section class="hs1">
<header>
<h1>This is a Page Sub Title</h1>
</header>
<p>Some content...</p>
<h2>Demonstrating EM and STRONG</h2>
<p><strong>This text will have more importance (SEO-wise and contextually)</strong></p>
<footer>
<p>Author: <cite>Louis Lazaris</cite></p>
</footer>
</section>
</div><!-- .main -->
<footer class="f1">
<p>copyright © year</p>
</footer><!-- .f1 -->
</body>
Yes, multiple <header> and <footer> elements are fine. They aren't used the same as <div id="header"> as most people use them for. Technically speaking, header and footer represent a header and footer of a section. A section being a piece of the page such as an article that contains header tags like <h1> and then content, then footer stuff like copyrights, citations, references, etc.
From the horses mouth:
A header element is intended to usually contain the section's heading
(an h1–h6 element or an hgroup element), but this is not required. The
header element can also be used to wrap a section's table of contents,
a search form, or any relevant logos.
And
The footer element represents a footer for its nearest ancestor
sectioning content or sectioning root element. A footer typically
contains information about its section such as who wrote it, links to
related documents, copyright data, and the like.
Directly from the spec at: http://dev.w3.org/html5/spec/Overview.html
Note that as I said these are not used to create sections like people did with <div id="header/footer"> it mentions this confusion in the spec:
The footer element is not sectioning content; it doesn't introduce a
new section.
So, again, "technically" speaking, that last footer you have there introduces a new section and isn't semantic. From the spec's point of view anyways.