On my web page, I have a long article.
Now an example of how html might look like this (just picture it being a lot longer):
<h1>Page title</h1>
<article>
<h2>Some title></h2>
<p>Content for that title</p>
<h2>Some other title </h2>
<p> some content for that other title </p>
</article>
This pattern continues.
According to WGAC, all headings should be in sequentially descending order, this is an issue here since my article might have more than 5 (h1 - h5) headers. So what can I do as best practice here?
Should each header be included in an <article> or <section> tag or can they be h2 as shown above?
Example
<main>
<h1>Different Front End Technologies</h1>
<p>Introduction...</p>
<section aria-labelledby="h2-html">
<h2 id="h2-html">HTML</h2>
<p>html...</p>
<h3>Sectioning Elements</h3>
<p>fjdfk</p>
<h4>The Header element</h4>
<h4>The Main element</h4>
<h3>Inline Elements</h3>
<p>fdsfa</p>
<h4>The time element</h4>
<h4>The address element</h4>
</section>
<section aria-labelledby="h2-css">
<h2 id="h2-css">CSS</h2>
<p>fdsafdas</p>
<h3>The Cascade</h3>
<h3>CSS Vars</h3>
<h4>The :root selector</h4>
<h4>Using a var in a property</h4>
<h5>Using calc() with a var</h5>
<h6>Example using calc()</h6>
<h6>Gotchyas using var in older browsers</h6>
<h5>var as inline style</h5>
</section>
<section aria-labelledby="h2-JS">
<h2 id="h2-JS">JavaScript</h2>
</section>
</main>
Note how everything under a <h2> is related to that <h2>. Everything under a <h3> is related to that <h3> which is related to the <h2>. This continues down.
When there are subjects not related to each other again you can move back up to the suitable heading level.
"Skipping heading levels" is when you jump from a <h2> to a <h4> - that is the bit that can be confusing for people using a screen reader as they are likely to navigate by headings using shortcuts in their screen reader.
Bonus for screen readers
If you have a really complex document and you are sure you are not over-nesting items, then there are actually 7 heading levels as far as screen readers are concerned.
You can read more about level 7 headings here
Related
Forgive me if I misspelled it and please correct it.
I do not know exactly how to use these two elements (Article | Section)
Now I want to launch a site that has completely standard HTML code,
Now, how do you think an article from my site should be structured? And where can I put the site header better?
I am stuck between these two options.
<!-- 1 -->
<section>
<header>
<h1>title of page</h1>
</header>
<article>
<p>some text</p>
</article>
</section>
<!-- 2 -->
<section>
<article>
<header>
<h1>title of page</h1>
</header>
</article>
<p>some text</p>
</section>
If both are incorrect, what do you suggest?
My English is very poor. So I could not use any more questions. But I understand the coding. Please explain to me by writing the code and simple sentences, and do not say that there is an answer to your question.
Read more about the HTML element article of Mozilla:
The HTML element represents a self-contained composition in
a document, page, application, or site, which is intended to be
independently distributable or reusable (e.g., in syndication)... each
post would be contained in an element, possibly with one or
more s within.
Unlike the article element, the section element:
The HTML element represents a generic standalone section of
a document, which doesn't have a more specific semantic element to
represent it.
Thus, the article element can contain section elements. But the section element cannot contain any other semantic elements.
Accordingly, your example can be presented like this:
<header>
<h1>The article News from Valinor of Gandalf</h1>
</header>
<article>
<h2>News from Valinor</h2>
<p>A short introduction to the content of the article.</p>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
...
</article>
<footer>
<h2>Publisher and copyright holder</h2>
<p>Publisher and © 2021 Gandalf</p>
</footer>
There are cases when text and image content is too large to be put onto one single page, but context is important for the content in question, so displaying it explicitly makes sense from the UX perspective. For example, this content could be chapters of a novel, parts of a long article, entries in a specialized list of items:
A Tale in Three Parts
The Beginning
The Middle
The End
Local Flora and Fauna
Badger
Mushroom
Snake
The answer would've been more simple if everything was on the same page, but what if these are separate standalone pages? What should be the proper way to semantically mark headings in that case?
Option 1
Use same h1 but different h2 on all pages:
<article>
<h1>Main Title</h1>
<h2>Title of Specific Part</h2>
<p>...</p>
</article>
Option 2
Use h1 for both article and section even though there is only a single section, and have same top-level h1 on all pages:
<article>
<h1>Main Title</h1>
<section>
<h1 class="styled_like_h2">Title of Specific Part</h1>
<p>...</p>
</section>
</article>
Option 3
Optimize for machines, fake styling for humans:
<article>
<p class="styled_like_h1">Main Title</p>
<h1 class="styled_like_h2">Title of Specific Part</h1>
<p>...</p>
</article>
Option 4
Optimize for machines and hope humans figure it out from surrounding navigation:
(<nav><ul>...breadcrumbs...</ul></nav>)
<article>
<h1>Title of Specific Part</h1>
<p>...</p>
</article>
Using your example of a novel displayed as a chapter per page, it would make sense to use a structure like this:
Title Page
<head>
<title>A Tale in Three Parts</title>
</head>
<body>
<main>
<h1 class="title">A Tale in Three Parts</h1>
<p>Lorem ipsum...</p>
<nav>
<h2>Table of Contents</h2>
<ol>
<li>The Beginning</li>
<li>The Middle</li>
<li>The End</li>
</ol>
</nav>
</main>
</body>
Chapter Page
<head>
<title>A Tale in Three Parts: The Beginning</title>
</head>
<body>
<nav aria-label="Breadcrumbs">
<ol>
<li>A Tale in Three Parts</li>
<li>The Beginning</li>
</ol>
</nav>
<main>
<h1 class="chapter">The Beginning</h1>
<p>Lorem Ipsum...</p>
</main>
</body>
When thinking about HTML semantics, you should think about it in the context of the HTML document (the page) rather than the broader context of the full content (in this case, the novel). The elements should make sense for the content on the page.
Also remember, semantics aren't just for machines. Users with screen readers, or users for whom stylesheets don't load also benefit from semantic elements. Relatedly, the appearance of text shouldn't dictate which element is chosen. If a large, unique style is desired for a title page, and smaller heading styles are desired for chapter pages, that should be managed through CSS. Both should be <h1> elements on their respective pages.
Additionally, using <article> to wrap the content of each page isn't appropriate in this example, because articles are meant to be:
"...a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable..."
— MDN Web Docs: The Article Element
In the case of a novel, the individual chapters aren't independently distributable.
I am creating a single-post template for my blog. With multiple posts per page, it's simple:
<header class="page-header">
<h1>Recipes</h1>
...
</header>
<main>
<article>
<header class="entry-header">
<h2>Article 1</h2>
... other metadata ...
</header>
<p>Body</p>
<article>
<header class="entry-header">
<h2>Article 2</h2>
... other metadata ...
</header>
<p>Body</p>
</article>
</main>
But with single posts, I can't decide what's more elegant:
<header class="page-header">
...
</header>
<main>
<article>
<header class="entry-header">
<h1>The article title</h1>
... other metadata ...
</header>
<p>The article body</p>
</article>
</main>
<header class="page-header">
<h1>The article title</h1>
... other metadata? ...
</header>
<main>
<article>
<p>The article body</p>
</article>
</main>
Option 1 keeps the structure of <article> elements consistent, whether they are part of a list or stand-alone. The title is always within the <article> tag, changing between <h1> and <h2> depending on the context.
Option 2 keeps the structure of the <header> tag consistent, the <h1> tag always in the same place on the page.
By extension, the same applies to the rest of the article header metadata.
Part of this decision might come down to personal preference, but perhaps there are recommendations (for example, the article title and meta needs to be inside the article tag, etc). The spec says that the <article> element should be a "self-contained" piece of content. It then proceeds to show an example similar to my 1st option. Is that, then, the preferred approach? This question on StackOverflow also asks something very similar, but there's no direct answer unfortunately.
The spec defines an <article> as:
...a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry.
In order for it to be "self-contained", the title of the article needs to be within the <article> element. Otherwise, various technologies (and users) may incorrectly interpret the first heading within the <article> as the title of the article.
Go with option 1. Always keep the title of the article within the <article> tag.
Is this the correct approach?
<section>
<h2>Chapter 1</h2>
<p>In this chapter we will....</p>
</section>
Or is this?
<h2>Chapter 1</h2>
<section>
<p>In this chapter we will....</p>
</section>
Check out this link: https://www.w3.org/wiki/HTML/Elements/section
In these examples, they use:
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>
Suggesting an organization such as: article > section > h1 + p. I consider this an appropriate approach.
Quoting W3:
The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content. The theme of each section should be identified, typically by
including a heading (h1-h6 element) as a child of the section element.
A section, like an article is like putting everything inside of it below the outer heading. As a demonstration, say you have this.
<h1>Heading</h1>
<h6>Small Heading</h6>
<section>
<h1>Section Heading</h1>
</section>
The outline for this document is actually:
Heading
Small Heading
Section Heading
Even though it's an h1 below an h6, the section begins a subdocument.
The article at http://html5doctor.com/the-section-element/ says:
note that the heading goes inside the section element, not immediately before it
So, your first example is probably correct.
As part of a project mentioned in connection with another question I need to markup nested articles in semantic HTML5. There's a magazine article containing a number of short texts by different authors plus some editor comments. In the present HTML4 version it looks something like this:
<div id="article">
<h1>Main heading - a collection of texts</h1>
<p id="intro">
A general introduction to the whole collection by the editor.
</p>
<p class="preamble">
A few words from the editor about the first text.
</p>
<h2>First text heading</h2>
<p>First text. Lorem ipsum ...</p>
<p class="author">
Name of author of first text.
</p>
<div>*</div>
<p class="preamble">
A few words from the editor about the second text.
</p>
<h2>Second text heading</h2>
<p>Second text. Dolorem ipsum ...</p>
<p class="author">
Name of author of second text.
</p>
<p id="postscript">
Some final words about the whole collection by the editor.
</p>
<div>
I have been considering something like this in HTML5, but there are some elements where I simply don't know what's best:
<article>
<header>
<h1>Main heading</h1>
<ELEMENT>
General introduction
</ELEMENT>
</header>
<article>
<header>
<ELEMENT>
Preamble
</ELEMENT>
<h2>
Article heading
</h2>
</header>
<p>
Article text
</p>
<ELEMENT>
Name of author
</ELEMENT>
</article>
<div>*</div>
<article>
Second article ...
</article>
<ELEMENT>
Postscript by editor
</ELEMENT>
</article>
Should I use a p element with class names for the various introductions and postscript, or maybe aside elements? Something else? And the same question regarding the names of authors. The address element doesn't seem quite right there. A footer perhaps with some other element (?) in it?
Edit: Occasionally there are some images as well and the photographer is mentioned in small print at the end of the article ("Photo: John Doe."). Element x inside a footer?
I think the first question should be where to put the editor comment for an article. I can think of three ways:
(a) editor comment in the header of an article
<article class="author-text">
<header class="editor-comment"></header>
</article>
(b) editor comment in an article that is nested in an article
<article class="author-text">
<article class="editor-comment"></article>
</article>
(c) editor comment in a section that has the article as child
<section class="editor-comment">
<article class="author-text"></article>
</section>
You are using (a) in your question. I don’t think it’s the best choice, mainly because this article would contain content from different authors (that did not work together), so the concept of "nearest article element ancestor" for denoting authorship wouldn’t work. It’s used, for example, by the author link type and the address element.
(b) and (c) don’t have this problem. In (b), each editor could have their own authorship info, in (c) the authorship info for the editor would be taken from the parent article (which includes the whole collection of articles), so the editor would have to be same everytime.
The definition of article suggests that (b) is appropriate:
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article.
It would make sense to include this editor comment article in a header.
The authorship information could be placed in a footer. Only if this information contains contact information for the author, use an address element in addition (and only for these contact information parts).
So a single short text could look like this:
<article class="author-text">
<h1>First text heading</h1>
<header>
<article>
<p>Editor comment</p>
</article>
</header>
<p>First paragraph of the text …</p>
<footer>
<!-- text author information -->
<!-- use 'address' here if appropriate -->
</footer>
</article>
The whole collection could be structured like this:
<article class="text-collection">
<h1>Main heading</h1>
<p>General introduction</p>
<article class="author-text"></article>
<article class="author-text"></article>
<article class="author-text"></article>
<article class="author-text"></article>
<p>Postscript by editor</p>
</article>