: What's the proper structure of an HTML5 page that briefly lists other articles? The target is to provide the proper semantic for a page that briefly lists existent articles. At the moment my
The target is to provide the proper semantic for a page that briefly lists existent articles.
At the moment my idea is the following:
<body>
<article>
<header>
<h1>Latest Articles</h1>
</header>
<article>
<header>
<h1><a href="/article-1">First Article's Heading</a></h1>
<p>First article's brief description.</p>
</header>
</article>
<article>
<header>
<h1><a href="/article-2">Second Article's Heading</a></h1>
<p>Second article's brief description.</p>
</header>
</article>
<article>
<header>
<h1><a href="/article-3">Third Article's Heading</a></h1>
<p>Third article's brief description.</p>
</header>
</article>
</article>
</body>
The page (let's call it an archive page) has the main article element containing children articles.
Each child has only header because the article does not represent the full version but just a brief.
Please, tell me if my version is semantically right (and why it is). Otherwise, propose your version.
UPDATED (AFTER THE ANSWER WAS ACCEPTED)
Example above is not full what may confuse and cause misunderstanding.
I'll try to clear this providing a fuller example with comments.
<body>
<!-- Header is the same for all pages. -->
<header>
<h1>Website Title</h1>
<p>Website description.</p>
</header>
<!-- Article presents the main content of specific page. -->
<article>
<header>
<h1>Latest Articles</h1>
<p>Last three articles in chronological order.</p>
</header>
<!-- This page lists existent articles. -->
<!-- They are not inside a section element because it isn't a section of something larger but independent articles. -->
<article>
<header>
<h1>First Article's Heading</h1>
<p>Supplement to the first article's heading.</p>
<p><a href="/article-1" rel="bookmark">Read more</a></p>
</header>
</article>
<article>
<header>
<h1>Second Article's Heading</h1>
<p>Supplement to the second article's heading.</p>
<p><a href="/article-2" rel="bookmark">Read more</a></p>
</header>
</article>
<article>
<header>
<h1>Third Article's Heading</h1>
<p>Supplement to the third article's heading.</p>
<p><a href="/article-3" rel="bookmark">Read more</a></p>
</header>
</article>
<footer>
<nav>
<h1>Navigate Through Pages</h1>
<p><a href="/page/1" rel="next">Newer</a></p>
<p><a href="/page/3" rel="prev">Older</a></p>
</nav>
</footer>
</article>
<!-- Footer is the same for all pages. -->
<footer>
<p><small>Copyright (c) ...</small></p>
</footer>
</body>
I just wanted to ensure if the semantic is corrent. It is. The question is clear.
More posts by @Shelley277
2 Comments
Sorted by latest first Latest Oldest Best
I would change your outermost <article> to a <section>, or remove it entirely. I would move your inner <p> elements outside of <header>, thus making them the body of the <articles>.
Alright, I stole this from html5doctors.
From what this image says, I'd add a <nav> tag to surround your <article> tags.
The <header> tags don't make much sense since there is nothing below them. They're not needed. See here how to use them: html5doctor.com/the-header-element/
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.