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
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>
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).
I have a rather complex website which is in need for redesign.
Using html5 features I started with a structure like this:
<body>
<header>...</header>
<main>
<section>...</section>
<section>...</section>
</main>
<footer>...</footer>
</body>
now starting to put some more content in the <header> like:
<header>
<section id="hCart">
<header>...</header>
</section>
</header>
The validator starts to complain: "The element header must not appear as a descendant of the header element." Same goes for the <footer>.
So is it generally a bad idea to structure the <body> with <header> & <footer> sections? Or am I doing something wrong?
EDIT:
To make more sense:
My website contains some <section>s in the page's <header> (one of them beeing a shopping cart)
The spec allows for <section> in <header> but not to give them a <header> by their own.
The second <header> is used for defining one of these <section>' heads.
I know that I can't use <header> as descendant of <header> according to the spec. What I want to know is how am I supposed to do this in another way semantically correct?
The problem is even bigger in the page's <footer> where I wannted to put multiple sections like <section><header><img/><h1>external links</h1></header> ... </section> and so on.
I would like to recommend you to take a look at html5 doctor site and w3 link.
as the doc says "An important point to note is that you are not restricted to using one element per site. You can use multiple headers, each of which will then become the for that section of the document. You could therefore have.".
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<article>
<header>
<h1>Title of this article</h1>
<p>By Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
For more information visit the site of html5doctor.
According to your edit
<footer>
<section class="external-links">
<img src="dummy.jpg">
<h1>External Links</h1>
</section>
</footer>
Is the structure below correct or is the section tag not needed?
For SEO, assuming the relevant keywords are the page title not the site title, is the structure bellow the best optomisation? Thanks
<header>
<h1>Site Title</h1>
</header>
<section>
<h1>Page Title</h1>
<p>Page Content Here</p>
</section>
Don't abuse the usage of section and article tags using them for structure, instead keep using divs.
In html5, when using headings and sections, you must check that each section has its own title. You can use the outliner to see how is the structure.
http://gsnedders.html5.org/outliner/
According to your case you'll notice that the Site Title has still more relevancy than the Page Title. That's okay. But better use a div for dividing the header from the content.
// Reply 12/03/01
You can try using some weird position absolute to achieve your goal:
First of all, the section must have a heading, if not it will be null.
<header>
<h1 id="position-me-in-section">Page Title h1</h1>
</header>
<div id="content">
<section>
<h6 id="position-me-in-header">Site Title h6</h6>
<p>Page Content Here</p>
</section>
</div>
This is how I would do it. The <article> tag links the related content together, you can also have multiple articles on one page etc
<header>Site Title</header>
<article>
<header>Page Title</header>
<p>Page Content Here</p>
<footer>Page Footer</footer>
</article>
<footer>Site Footer</footer>
Really depends on how or if you plan to componetize and/or syndicate your content and then it's however it suites you best. There are no "issues" with how you have it now other than you only want to use a single "H1" per document. On the flip side - the "H2", "H3" etc can be used multiple times with no negative SEO.
The html5doctor link about section shared is a good resource but also consider these:
http://html5doctor.com/the-article-element/
http://www.impressivewebs.com/html5-section/
http://webdesign.about.com/od/html5tags/a/when-to-use-section-element.htm
Lets talk about the section element. I'm still confused when to use it, and it seems like no one can pin point when to use it properly?
I have been told, and I have read that it should not be used as a generic wrapper for content. So I am still using divs for this purpose, and I am rarely using sections, only article. But then I came across http://dev.opera.com/, which are using it in that way? So then they are using it wrong? But that is exactly how I would like to use it... To divide the page into a "main" section where the content goes.
Here is an example how I would like to layout my pages:
<html>
<head>
</head>
<body>
<header>
</header>
<section id="main">
generic content
</section>
<footer>
</footer>
</body>
</html>
The "section" tag is used to group general content and can be used with a generic title (h1, h2 or other).
There are some rules to use "section" tag, those are the most important:
Don't use it for template structure - use other tags (header, footer, div) instead
Don't use it if you can use the "article" tag - so your articles can be used in other sites
You can use a "section" in an "article" and, of course, an "article" in a "section".
Generally you can use it in order to structure the page by grouping related content: for example in a blog you can define two sections, one for the last entry and another for the oldest.
You can also have a "section" in a "section": you can have as many section (generic contents) as you need.
<section>
<h1>Last post</h1>
<article>
[My post...]
<section>
[Comments...]
</section>
</article>
</section>
<section>
<h2>Oldest post</h2>
<article>
[First post...]
</article>
<article>
[Second post...]
</article>
<article>
[Third post...]
</article>
</section>
Reading your code I think you can improve your structure using this:
<html>
<head>
</head>
<body>
<header>
</header>
<div id="main">
<section>
Generic content
</section>
</div>
<footer>
</footer>
</body>
</html>