Semantic markup of multiple articles inside article with preambles/postscript - html

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>

Related

The right way to use <section> and <article> for SEO

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>

Semantic markup - H1 in page header or article header?

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.

Should I use <ol>, <ul>, <article> or <blockquote> for comments listing using semantic HTML?

I made some research and didn’t find an appropriate answer. I’m wondering if it’s better to keep using li elements for a comments listing or maybe switch to the article element?
Example 1:
<ol class="comment-list">
<li class="comment">
<figure class="avatar">
<img ... >
</figure>
<span class="author">Linus Torvalds</span>
<p class="comment-text">
Linux is awesome!
</p>
</li>
...
</ol>
Example 2:
<div class="comment-list">
<article class="comment">
<header>
<figure class="avatar">
<img ... >
</figure>
</header>
<span class="author">Linus Torvalds</span>
<p class="comment-text">
Linux is awesome!
</p>
</article>
...
</div>
What is the best solution?
UPDATE 1
Example 3 (a better example):
<main>
<article>
<header>
<h1>Text title</h1>
</header>
<p>The text...</p>
<section class="comment-list">
<article class="comment">
<header>
<figure class="avatar">
<img ... >
</figure>
</header>
<span class="author">Linus Torvalds</span>
<p class="comment-text">
Linux is awesome!
</p>
</article>
<article class="comment">
<header>
<figure class="avatar">
<img ... >
</figure>
</header>
<span class="author">Richard Stallman</span>
<p class="comment-text">
GNU is awesome!
</p>
</article>
...
</section>
</article>
</main>
If you want to provide more semantic value than you would using ol/ul, then article would be the best option in my opinion.
About blockquote from w3schools:
The <blockquote> tag specifies a section that is quoted from another source.
I would say that "quoted from another source" does not really apply to comments.
About article from w3schools:
The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
All of these points probably apply to your comments, so I would recommend going with <article>.
Each comment should be an article (no matter if you’ll use a list or not). These article elements could be part of a section (representing the comment area), and this section should be part of the article the comments are for (e.g., the blog post).
<article>
<h2>My blog post</h2>
<section>
<h3>Comments</h3>
<article id="comment-1"></article>
<article id="comment-2"></article>
<article id="comment-3"></article>
</section>
</article>
If you allow replying to comments and display them nested, the replies should be part of the parent comment:
<article>
<h2>My blog post</h2>
<section>
<h3>Comments</h3>
<article id="comment-1"></article>
<article id="comment-2">
<article id="comment-2-1"></article>
<article id="comment-2-2"></article>
<article id="comment-2-3"></article>
</article>
<article id="comment-3"></article>
</section>
</article>
Semantically, there is no need for a list here. Thanks to using sectioning content elements (section, article), the comment section and each comment are part of the document outline, which can allow quick on-page navigation.
Adding a list wouldn’t be wrong, though, but I would recommend against it in this context (following my two rule of thumbs)
Using blockquote for comments wouldn’t be appropriate. This is their canonical/original location, you are not quoting from somewhere else. Thanks to using article, you already semantically convey that the content inside could be from another author than the content outside of it (because article allows you to "scope" the address element and the author link type).
Edit
OK, here's the gory details
EMPHASIS is mine
<figure> and <figcaption>
Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.
...
A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child)
<figure> - MDN
What I see is an image of an author. if it was taken out of context (flow), is it still an image of the author? Yes, it is. How? Because it has the has the <figcaption> tag as its last child and the name of the author as it's text.
<header>
The HTML element represents introductory content, typically a group of introductory or navigational aids.
...
The element is not sectioning content and therefore does not introduce a new section in the outline.
<header> - MDN
Either wrap <h1-h6> or <nav> in <header>, if it's a <nav> then it's outside of <main> and inside of <main> if it's for headings (<h1-h6>).
Do not wrap <header> around <figure>. <figure> is a specialized content wrapper, not content. <header> is a specialized content wrapper.
<article> and <section>
<article> and <section> can be nested within each other in either direction but stick to one pattern. Basically <article> can be a sub-topic of <article> or <section> or vice versa.
Refer to: Using HTML Sections and Outlines , <article> tag, and <section> tag.
Even though there are 2 versions of HTML5 tag definitions (W3C & WHATWG), semantics as it applies to HTML5 layout is subjective. Your page will function just as well with <div> and <span> (case in point: Bootstrap.)
<article> over <blockquote>
Article can stand on its own and carries the flow of a topic which can be divided into sub-topics by <section> and therein would be text and media content grouped in <p>, <figure>, etc.
To wrap up all the content in a neat package is <main> and the peripherals would be the <header> and <footer> which usually hold content that is common to most of the pages like <nav> or <address>, support links, etc.
A <blockquote> is an extended reiteration of a work (ex. book, poem, speech, etc). So it isn't suitable for a comment.
As for listing each comment, I'd skip that because an <article> stands on its own.
Without all the gory details I submit to you my take on a semantic layout:
Demo
<header>
<nav></nav>
</header>
<main id='page11'>
<article class="comment">
<figure class="avatar">
<img ...>
<figcaption class="author">Linus Torvalds</figcaption>
</figure>
<section class='content'>
<p class="comment-text">
Linux is awesome!
</p>
</section>
</article>
</main>
<footer>
<address></address>
</footer>

How to use <section> and <article> tags in HTML5?

I just confused how to use <article> and <section> tags in HTML5.
I referenced lot in Google and also in Stack Overflow website.
On that, I found HTML5 pages with <section> elements containing <article> elements, and <article> elements containing <sections> elements.
I also found pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.
What is the exact use of these tags?
It depends on your content.
For example, a list of recent blog posts could be a section containing several article (example 1), a complex blog post could be an article with several section (example 2), a blog post with comments could be an article with a section and several article (example 3).
How to decide when to use which? Easy:
If you need a sectioning content element, start with section.
Check if the content matches the definition of nav. If yes, go with nav, else:
Check if the content matches the definition of aside. If yes, go with aside, else:
Check if the content matches the definition of article. If yes, go with article, else:
Stay with section.
Example 1: A list of blog posts
<section>
<h2>Recent blog posts</h2>
<article>
<h3>Blog post 1</h3>
</article>
<article>
<h3>Blog post 2</h3>
</article>
</section>
Example 2: A complex blog post
<article>
<h2>Blog post 1</h2>
<section>
<h3>So, this is what happened</h3>
</section>
<section>
<h3>What the others said</h3>
</section>
</article>
Example 3: A blog post with comments
<article>
<h2>Blog post 2</h2>
<section>
<h3>Comments</h3>
<article>
<p>First!</p>
</article>
<article>
<p>First! <ins>Edit: Second :(</ins></p>
</article>
</section>
</article>

Is it semantically correct to nest <article>s?

I've been reading up on the new HTML5 elements and their appropriate usage, and currently have some markup like this:
<article>
<h1>Crazy Awesome Programming Projects</h1>
<article>
<h2>Mathematics</h2>
<section>
<h3>Binary to Decimal converter</h3>
<p> info here </p>
</section>
<section>
<h3>Scientific Calculator</h3>
<p> info here </p>
</section>
</article>
<article>
<h2>String Manipulation</h2>
<section>
<h3>RSS Feed Generator</h3>
<p> info here </p>
</section>
<section>
<h3>Palindrome Detector</h3>
<p> info here </p>
</section>
</article>
</article>
Is it semantically correct to nest <article> tags in such a manner?
There are cases where nesting article elements is correct; the most prominent case being comments to a blog post.
But I don't think it's the case for your example (it's hard to decide this without seeing the full content, though).
I'd do it exactly the other way around:
<section> <!-- probably not article -->
<h1>Crazy Awesome Programming Projects</h1>
<section> <!-- not article -->
<h2>Mathematics</h2>
<article> <!-- not section -->
<h3>Binary to Decimal converter</h3>
<p> info here </p>
</article>
<article> <!-- not section -->
<h3>Scientific Calculator</h3>
<p> info here </p>
</article>
</section>
<section> <!-- not article -->
<h2>String Manipulation</h2>
<article> <!-- not section -->
<h3>RSS Feed Generator</h3>
<p> info here </p>
</article>
<article> <!-- not section -->
<h3>Palindrome Detector</h3>
<p> info here </p>
</article>
</section>
</section>
"Binary to Decimal converter", "Scientific Calculator", "RSS Feed Generator" and "Palindrome Detector" are the articles here. They are "a self-contained composition" and "in principle, independently distributable or reusable, e.g. in syndication".
"Mathematics" and "String Manipulation" are categories.
In structure it's similar to a web shop. "Palindrome Detector" would be a buyable product, while "String Manipulation" would be the product category. I guess you wouldn't consider a product category as "self-contained".
For the container ("Crazy Awesome Programming Projects") I'd use an article only if there would be more content giving context. Otherwise it's just a top-category, containing sub-categories, which contain the "real" content.
Good questions to ask whether article is appropriate:
could the content have an own publication date?
could the content have a different author than the page?
could the content be a separate entry in a feed?
would the content still make sense if it was printed out without any other content/context?
If (some of) these questions are answered with 'yes', article could be correct.
Yes, according to the HTML5 spec. This is what it says about nesting article elements:
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.