I am doing a HTML semantics exercise as part of my University course and I ended up being curious as to which way headers should be laid out. Let me give 2 examples:
Example 1:
<main>
<header>
<h1>Main Header</h1>
</header>
<section>
<header>
<h1>Section Header</h1>
</header>
<p>Some content</p>
</section>
</main>
Example 2:
<main>
<header>
<h1>Main Header</h1>
</header>
<section>
<header>
<h2>Section Header</h2>
</header>
<p>Content here</p>
</section>
</main>
My main wonder here is wither you use a h1 or h2 inside the sections. If I understand right example 1 is more semantically correct as (at least in chrome) the raw html will style in such a way where the section headers are smaller. However, previously I have used the way in example 2, and in my class in year 1 I was never told this was incorrect.
Because I'm being graded on semantics in this exercise, and because I need to feed my curiosity, I'd love to know which is more correct.
Source: http://w3c.github.io/html/sections.html#headings-and-sections
"Sections may contain headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section’s nesting level."
Example 2 seems to be what W3C is suggesting to use in following examples after that quote.
This is probably all opinion based so I'm closing this question with this information.
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 know that here and around internet is a lot of information and I read them, but I got disappointed by html5 validation.
My webpage is like this:
<body>
<nav>
<ul>
<li>...</li>
<li>...</li>
</ul>
</nav>
<main>
<section>
<header>
<h1>...</h1>
</header>
<section>
<header>
<h1>Section 1</h1>
</header>
<p>...</p>
<p>...</p>
</section>
<section>
<header>
<h1>Section 2</h1>
</header>
<p>...</p>
<p>...</p>
</section>
<section>
<header>
<h1>Section 3</h1>
</header>
<p>...</p>
<p>...</p>
</section>
</section>
</main>
<footer>
<h2>...</h2>
<p>...</p>
</footer>
</body>
By my knowledges, html5doctor and w3c specification is right.
My page is onepage website and each sections have own meaning.
...but if I try to validate, I will get warnings to consider using h2 - h6 within section, instead of h1. My webpage past validation, but I am nervous by warnings there.
Please can you confirm me, that is OK or what is exactly wrong on that?
Thank you for each professional answer Peter
The original idea of HTML5 contained the concept of an outline algorithm. In it, the first h1 in your example would be interpreted in same way as an h1 in HTML 4.01. The h1 elements in the section elements would each be treated equivalent to an h2 element in HTML 4.01. That is, they would indicate the start of a subsection subordinate to the top level section started by the first h1 element.
However, what happened in practice is that neither browsers, nor screen readers, nor any other HTML processors of note implemented the HTML5 outline algorithm anywhere near correctly if at all.
The result is that your page will be misinterpreted. Mostly this affects Accessibility Technology which make heavy use of header levels to allow its users to navigate your pages effectively.
I don't know whether there any specific negative SEO effects, but the effective semantic misinterpretation is unlikely to be beneficial.
So the advice the validator is giving you, is that for the foreseeable future, it is best to use the same header level arrangement as you would use in HTML 4.01, that is h1 for top level section headers, h2 for the next level sub-sections, h3 for sub-sub-sections, etc.
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>
If a header section contains only heading (eg. h1, h2..), and no other information. Should it still be wrapped it in the header tags? Or the header tags should be used if it has more content than just the headings?
For example, should this be used?
<section>
<h2> .... </h2>
<div>
...
</div>
</section>
or this?
<section>
<header>
<h2>...</h2>
</header>
<div>
...
</div>
</section>
Here's that HTML5 doctor article:
Avoiding common HTML5 mistakes
...as linked to by #simoncereska.
To save folks some time, here's the relevant quote:
If your <header> element only contains a single heading element, leave
out the <header>. The <article> (for example) ensures that the heading will be shown
in the document outline, and because the <header> doesn’t contain
multiple elements (as the definition describes), why write code when
you don't need to? Simply use this:
<article>
<h1>My best blog post</h1>
<!-- Article content -->
</article>
The article is definitely worth reading, but if your looking for a quick answer, then see the bold text in the above quote. :)