I'm thinking of this front page layout where "the main navigation" is spread out all over the page, with the latest article from each category displayed, like this:
<article>
<nav>Elephants</nav>
<h2>The Borneo Elephant</h2>
<p>...</p>
</article>
<article>
<nav>Hippos</nav>
<h2>The Malgasy Hippo</h2>
<p>...</p>
</article>
<article>
<nav>Rhinos</nav>
<h2>The White Rhino</h2>
<p>...</p>
</article>
Would that be semantically correct?
If an article element contains a nav element, this nav represents the navigation for this article. This could be used for an article’s table of contents, or for a pagination in case the article is split into multiple pages.
Your example doesn’t make much sense, and its outline is a mess and not really clear/usable:
1. implied heading from <article>
1.1 implied heading from <nav>
2 "The Borneo Elephant"
3. implied heading from <article>
3.1 implied heading from <nav>
4. "The Malgasy Hippo"
5. implied heading from <article>
5.1 implied heading from <nav>
6. "The White Rhino"
If this really is your site’s navigation menu, you should use one nav.
However, there is no obvious solution for adding an excerpt for each navigation item’s last article (it’s a rather uncommon way, I’d guess). These are usually two separate sections, i.e., a nav for the navigation, and a section for the recent articles:
<nav>
<!-- <h1>Navigation</h1> -->
<ul>
<li>Elephants</li>
<li>Hippos</li>
<li>Rhinos</li>
</ul>
</nav>
<section>
<h1>Recent articles</h1>
<article>
<header>Category: Elephants</header>
</article>
<article>
<header>Category: Hippos</header>
</article>
<article>
<header>Category: Rhinos</header>
</article>
</section>
Assuming that you can’t separate these sections: it would probably not be clear for users that this excerpt only represents one (i.e., the latest) article of that category/section; so you probably add some explanation to this anyway, so maybe using a section for each navigation menu item could work, e.g.:
<nav>
<h1>Navigation</h1>
<section>
<h2>Elephants</h2>
</section>
<section>
<h2>Hippos</h2>
</section>
<section>
<h2>Rhinos</h2>
</section>
</nav>
Inside each section, you could add the excerpt, e.g., by introducing it with another heading in a section:
<section>
<h2>Elephants</h2>
<section>
<h3>Newest "Elephants" article</h3>
<article>
<!-- excerpt -->
</article>
</section>
</section>
or just by adding some text:
<section>
<h2>Elephants</h2>
<p>Newest "Elephants" article:</p>
<article>
<!-- excerpt -->
</article>
</section>
But I would advice against all this (mixing the navigation with the list of newest articles) and go with separate sections (as in my first snippet).
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>
This question already has answers here:
Semantic mark-up and WAI-ARIA for Tabbed Section?
(2 answers)
Closed 6 years ago.
I've read up a lot on the usage of <article> and <section>. I think I get the <article> part. But with <section> there is still confusion. I've read this post on HTML5doctor, but I still have questions.
Consider an easy example: I have a webpage where you can play a game. You have a navigation menu at the top with "Dashboard", "Other games", "About". Each page begins with a headline and contains lower level headlines.
For instance, on Dashboard you could have "Singleplay", "Multiplayer", "Statistics", "Instructions" with a bit of text under each and a link to the respective HTML page.
On html5doctor:
The section element represents a generic document or application section
I'm guessing each "page" could be considered as such? But are the sub headlines ALSO sections in this case or not?. It feels like whenever there is a new headline with content, a <section> could be argued suitable. But that can get out of hand, no..?
The <section> element is used to represent a group of related content. This is similar to the purpose of an <article> element with the main difference being that the content within a <section> element doesn’t necessarily need to make sense out of the context of the page. A section is just how it sounds a section of a website. I think the most common use is that you can assign it an id. So it is it's own entity so to speak. You can assign it an <section id="examples"> and have it go to that section of a website from anywhere and the page you want.
It’s advisable to use a heading element (<h1> – <h6>) to define the topic for the section.
Using this blog post as an example, you could have <section> elements that represent each of the individual parts within the post.
<article>
<h1>How to use HTML5 Sectioning Elements</h1>
<p>...</p>
<section>
<h2>The <main> Element</h2>
<p>...</p>
</section>
<section>
<h2>The <article> Element</h2>
<p>...</p>
</section>
<section>
<h2>The <section> Element</h2>
<p>...</p>
</section>
...
</article>
Here's an example that might help:
<html>
<head>
</head>
<body>
<header>
</header>
<main>
<section id='first'>
</section>
<section id='second>
</section>
<main>
<footer>
</footer>
</body>
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>
I've found a lot of conflicting information on HTML5 best practices, and am wondering if my article structure is correct. In general, the pages on this site will consist of a header with nav, article, and footer.
Here's my basic structure:
<body>
<header>Header content
<nav>Navigation</nav>
</header>
<article>
<header>
<h1>Beans, beans</h1> <!--Main title for article-->
<h2>Good for your heart?</h2> <!--Subtitle for article-->
</header>
<section>
<header>
<h3>Legume-based Flatulence</h3> <!--Section title-->
</header>
<p>Lorem ipsum beans beans beans.</p>
</section>
<section>
<header>
<h3>Gas and Good Feelings</h3>
</header>
<p>Correlation does not imply causation.</p>
<footer> <!--Section footer for sources or...?-->
Source: Phenomenological Farts, a Study in Siena
</footer>
</section>
<section>
<header>
<h3>Beans for Every Meal?</h3>
</header>
<p>This is probably a terrible idea.</p>
</section>
<footer> <!--Article footer for additional downloads, etc-->
Download this article!
</footer>
</article>
<footer>
Footer content.
</footer>
</body>
Does this make sense? Is it acceptable to use headers and footers within sections within articles?
When you're unsure about what tags are allowed inside others, simply check the spec at w3.org. Or run your code through a validator.
The spec states that section, header and article tags can be used inside any container that allows flow elements. So what you have so far is valid.
I was going to recomend <hgroup> for grouping headers, but it is no more: http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/. Perhaps use header in its place. More info and suggestions from W3C: http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head
I would also then change your other h3s to h2s as they are the section header.
Finaly a header soley consisting of an hx is kind of redundant.
More on Headers and Footers
I'm reading Mark Pilgirm's "Dive into HTML5" and in the semantics section, it talks about how HTML5 introduces the <article> and <section> elements. It says that <section>s represent a generic document or section, while <article>s represent a self-contained composition. I don't see a logically semantic parent-child relationship either way.
I tried running the following code through the HTML5 Outliner and it seemed to indicate that the document outline comes out the same, no matter how they were nested.
So my question is: should <section>s be nested inside <article>s, should <article>s be nested inside <secion>s, or does it not matter from a semantic view point?
<section><h1>section article?</h1>
<article><h1>art 1</h1></article>
<article><h1>art 2</h1></article>
<article><h1>art 3</h1></article>
</section>
<article><h1>article section?</h1>
<section><h1>sec 1</h1></section>
<section><h1>sec 2</h1></section>
<section><h1>sec 3</h1></section>
</article>
It's entirely acceptable to nest them either way. Although the document outline does not distinguish between a <section> and an <article>, from a semantic point of view they are two different things. That's the whole point of introducing them as two distinct semantic elements.
Use the first snippet if your page consists of multiple articles.
Use the second snippet when you have an article that's comprehensive enough to contain multiple sections.
You can even combine them both if using both fits your content, such that your markup looks like this:
<section><h1>section article?</h1>
<article><h1>art 1</h1>
<section><h1>sec 1.1</h1></section>
<section><h1>sec 1.2</h1></section>
<section><h1>sec 1.3</h1></section>
</article>
<article><h1>art 2</h1>
<section><h1>sec 2.1</h1></section>
<section><h1>sec 2.2</h1></section>
<section><h1>sec 2.3</h1></section>
</article>
<article><h1>art 3</h1>
<section><h1>sec 3.1</h1></section>
<section><h1>sec 3.2</h1></section>
<section><h1>sec 3.3</h1></section>
</article>
</section>
The HTML documentation tends to use sections only inside articles. It seems to suggest that you should always use an <article> and use each <section> for, well, a section of that article. The example they give involves apples:
<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>
I don't see many examples where a <section> is not contained by an <article>, but an <article> can contain another <article> within it, such that a blog would be represented by an article, and then a comment to that blog would be represented by another article inside the parent article. So, that looks like the direction you should be headed.
So, continuing from the apples example: If you wanted to allow users to comment on each type of apple, then in that case you would have an article inside a section, which would still be inside an article.
After looking more into it and thinking harder about it, this is the generalization I've come up with:
Using articles should be reserved for "posts" such as a blog, a topic (and each of its subsequent posts), comments, etc. Anything which can have an author should be using an <article> element.
Using sections should be reserved for separating sections of your website, such as an introduction (to what your site might be about), some news articles, or an area within an article used for comments. Anything which is a "section" of something (doesn't really have an author).
Both are semantically valid
It all depends on how you want your page interpreted.
If you're writing a blog post, each post would be an <article>, and in a particularly long blog post, you could separate it into logical <section>s with their own <h1>s and whatever else it needs.
If you're writing a research page, you might use <sections> to separate out the table of contents, abstract, main body, and appendix. In the main body (and appendix) you might have a particular section that truly is an <article>.
If you're laying out a page, I highly recommend the following format:
<body>
<div id="page">
<div id="page-inner">
<header id="header">
<div id="header-inner">
<!-- logo, site name, search, etc -->
</div>
</header>
<nav id="nav">
<div id="nav-inner">
<ul>
<li>Primary Nav</li>
...
</ul>
</div>
</nav>
<div id="wrapper">
<div id="wrapper-inner">
<div id="content">
<div id="content-inner">
<article>
<header>
<h1>Title</h1>
<span class="author"></span>
<time class="timestamp"></time>
...
</header>
<div class="content">
</div>
<footer>
...
</footer>
</article>
...
</div>
</div><!-- end #content -->
<div id="sidebar">
<div id="sidebar-inner">
<div class="module"></div>
<!-- more sidebar widgets, modules, blocks, what-have-you -->
</div>
</div><!-- end #sidebar -->
<!-- more columns if necessary -->
</div>
</div>
<footer id="footer">
<div id="footer-inner">
<!-- copyright notice, footer menu, contact form, etc -->
</div>
</footer>
</div>
</div>
</body>
Although if you don't need so many <div>s, keep it simple with:
<body>
<header></header>
<nav></nav>
<div id="wrapper">
<div id="content">
<article></article>
...
</div>
<div id="sidebar">
<div class="module"></div>
...
</div>
</div>
<footer></footer>
</body>