I have got just a quick question regarding the header hierarchy when using HTML5 and especially sections. I am asking from a SEO point of view.
At this moment my markup looks like this:
<article>
<header><h1>Article Header</h1></header>
<!-- Bla bla -->
<section>
<header><h1>Article section 1</h1></header>
<!-- Bla bla -->
</section>
<section>
<header><h1>Article section 2</h1></header>
<!-- Bla bla -->
<h2>Article section 2 Sub 1</h2>
<!-- Bla bla -->
</section>
<section>
<header><h1>Article section 3</h1></header>
<!-- Bla bla -->
</section>
</article>
The questions I am asking is about <h1>Article section 2</h1> and <h1>Article section 3</h1> and the code in-between.
Its outline is as expected:
hmtl5 outline http://i51.tinypic.com/34pi1hk.jpg
But when looking at the site without css, I am seeing this:
As you can see in the second picture it seems that <h2>Article section 2 Sub 1</h2> is given more "importance", although it is just a h2 of another subsection (just like displayed in the outline).
Now I am wondering if I can safely ignore this, or does Google probably also think that <h2>Article section 2 Sub 1</h2> is more important than the previous and next h1 titles? Obviously, I want to make sure that <h2>Article section 2 Sub 1</h2> is given less importance than the previous and next h1 titles.
I hope I was able to explain what I am trying to figure out!
The order of rendering the page never means anything as far as SEO is concerned. h1 will always be given more importance compared to h2 in the context it is placed in.
Firstly, HTML5 is backward-compatible with HTML4.
You can use old style h2+ tags
Or just sectioning contents and the h1 tag only
Or both, in the same page!
but default style is firstly made to maintain backward compatibility with older pages,
then to implement html5-sectioning's default style
Your code is not wrong, you just need to reset the style.
I'm pretty sure about this because I've read some discussions on mozilla's bugzilla
Hope this helps!
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>
There are cases when text and image content is too large to be put onto one single page, but context is important for the content in question, so displaying it explicitly makes sense from the UX perspective. For example, this content could be chapters of a novel, parts of a long article, entries in a specialized list of items:
A Tale in Three Parts
The Beginning
The Middle
The End
Local Flora and Fauna
Badger
Mushroom
Snake
The answer would've been more simple if everything was on the same page, but what if these are separate standalone pages? What should be the proper way to semantically mark headings in that case?
Option 1
Use same h1 but different h2 on all pages:
<article>
<h1>Main Title</h1>
<h2>Title of Specific Part</h2>
<p>...</p>
</article>
Option 2
Use h1 for both article and section even though there is only a single section, and have same top-level h1 on all pages:
<article>
<h1>Main Title</h1>
<section>
<h1 class="styled_like_h2">Title of Specific Part</h1>
<p>...</p>
</section>
</article>
Option 3
Optimize for machines, fake styling for humans:
<article>
<p class="styled_like_h1">Main Title</p>
<h1 class="styled_like_h2">Title of Specific Part</h1>
<p>...</p>
</article>
Option 4
Optimize for machines and hope humans figure it out from surrounding navigation:
(<nav><ul>...breadcrumbs...</ul></nav>)
<article>
<h1>Title of Specific Part</h1>
<p>...</p>
</article>
Using your example of a novel displayed as a chapter per page, it would make sense to use a structure like this:
Title Page
<head>
<title>A Tale in Three Parts</title>
</head>
<body>
<main>
<h1 class="title">A Tale in Three Parts</h1>
<p>Lorem ipsum...</p>
<nav>
<h2>Table of Contents</h2>
<ol>
<li>The Beginning</li>
<li>The Middle</li>
<li>The End</li>
</ol>
</nav>
</main>
</body>
Chapter Page
<head>
<title>A Tale in Three Parts: The Beginning</title>
</head>
<body>
<nav aria-label="Breadcrumbs">
<ol>
<li>A Tale in Three Parts</li>
<li>The Beginning</li>
</ol>
</nav>
<main>
<h1 class="chapter">The Beginning</h1>
<p>Lorem Ipsum...</p>
</main>
</body>
When thinking about HTML semantics, you should think about it in the context of the HTML document (the page) rather than the broader context of the full content (in this case, the novel). The elements should make sense for the content on the page.
Also remember, semantics aren't just for machines. Users with screen readers, or users for whom stylesheets don't load also benefit from semantic elements. Relatedly, the appearance of text shouldn't dictate which element is chosen. If a large, unique style is desired for a title page, and smaller heading styles are desired for chapter pages, that should be managed through CSS. Both should be <h1> elements on their respective pages.
Additionally, using <article> to wrap the content of each page isn't appropriate in this example, because articles are meant to be:
"...a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable..."
— MDN Web Docs: The Article Element
In the case of a novel, the individual chapters aren't independently distributable.
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.
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>
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