Suppose there is a main heading and it has several sub headings which can be categorized by giving them separate headings but instead they are visually communicated differently than giving them separate headings.
i.e:
In such a case how should we use heading tags?
What I believe should be the right thing to do (but not sure) is to add separate section element for both categories.
like this:
Any suggestions?
Note that the section element is a sectioning content element. This means it creates an entry in the document outline. If you want to use h1-h6 according to the corresponding rank in the outline, your h2 headings should become h3 headings.
Also note that it’s recommended to explicitly use sectioning content elements where appropriate (e.g., at least wherever you use heading elements), so you might want to use section for "What we do" etc., too.
So the outline-relevant structure could look like this:
<body>
<h1>Xyz Company</h1>
<section>
<h2>About us</h2>
<section>
<h3>What we do</h3>
</section>
<section>
<h3>Where we are?</h3>
</section>
<section>
<h3>Where we do?</h3>
</section>
</section>
<section>
<h2>Attributes</h2>
<section>
<h3>Respect</h3>
</section>
<section>
<h3>Responsibility</h3>
</section>
<section>
<h3>Growth</h3>
</section>
</section>
</body>
Each sectioning content element (and each sectioning root element, i.e., body in this case) has its own heading, and there is no heading without explicit section.
Even if you don’t want to provide "About us" and "Attributes" headings, you can still keep the two section elements. Not ideal, but better than not having these, because they make the intended document outline clear. (A compromise could be to visually hide these two headings with CSS.)
From a pure technical SEO standpoint, it would be better if both sections had their own heading, and the contents of those sections had their subheadings, so you would be looking for something like this:
<main>
<h1>Your Company Name</h1>
<section>
<header>
<h2>About Us</h2>
<h3>What we do</h3>
<h3>Where we are</h3>
<h3>Where we do</h3>
</header>
<section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
</section>
<section>
<header>
<h2>About Us</h2>
<h3>What we do</h3>
<h3>Where we are</h3>
<h3>Where we do</h3>
</header>
<section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet Dolor...</section>
</section>
</main>
Usually what I like to do is look at the page without any CSS/JavaScript and see how it looks. If you have the same flow, and things appear like they should by default, you are on the right track.
Search engines are smart enough to understand what you mean, even if you use div for everything, but having it semantically correct may increase their likeness towards your clean and organized code.
Adding sections for both could be helpful, but what is much more helpful is that this page talks about a specific topic, other than multiple. So I would recommend that instead, you make one page for each About Us and Attributes. If it seems overkill, you can go with just one page; That would be correct, but not optimal in search engines eyes -- They really like that you have one page for each topic and that they-re unique within the domain.
Related
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.
Here is my code, at the moment:
<section id="one">
<h2>Section Title</h2>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</section>
<section id="two">
<h2>Section Title</h2>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</section>
<section id="three">
<h2>Section Title</h2>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</section>
I was contemplating using the <header> element to surround each section's <h2>, but would I then also have to use a <footer> element at the bottom of each section, as well? I have a feeling that the <footer> element of each section would more often than not be empty, unless footnotes were necessary, such as a source of information, or notes about the information provided in a paragraph, etc.
Is this part of the specification's rules, or am I purely basing this on the assumption that "if you have one, you should have the other"?
No, you do not have to use both a header and a footer if you use one. They are similar, but completely independent. The HTML5 specification adds no such restrictions.
Content model: Flow content, but with no header, footer, or main element descendants.
The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.
– <header> spec
Content model: Flow content, but with no header, footer, or main element descendants.
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.
– <footer> spec
No, you don't have to use both of them.
It's ok to use:
both of them
none of them
only header
only footer
It's similar to Microsoft Word. You can create a document that has only the title as header, only the page number as footer, both of them or none of them.
HTML tags are only used to describe your content, you don't have to use any of header/footer tags or you can use one of them, or both together, it's really up to you.
Edit:
Also you can use them multiple times in a single html file
<hgroup>
<h4>Employment</h4>
<h3>Graphic designer</h3>
<h5>Godigital</h5>
</hgroup>
Is this correct, or I should use order tags as <h3><h4><h5>?
It's completely fine.
Only thing you have to remember is that you can't put anything but h1-h6 within hgroup. Order doesn't matter.
Yes, it is. More information here.
<hgroup> acts as a wrapper for one or more related heading
elements possibly contained within a element. It can only
contain a group of <h1>–<h6> element(s), and it should be used for
subtitles, alternative titles, and tag lines.
Example:
<article>
<hgroup>
<h1>Title goes here</h1>
<h2>Subtitle of article</h2>
</hgroup>
<p>Lorem Ipsum dolor set amet</p>
</article>
EDITED:
Following this decision, hgroup is removed from the HTML5 specification.
It is difficult to infere something else from this context, but inside of a HTML file, this would be correct. You could use up to h6 tag.
W3C hgroup
I'm building a page with some news items on it.
The current HTML I have is:
<h1>News</h1>
<article>
<h2>Item 1</h2>
<p>Lorem ipsum</p>
<footer>
<ul>
<li>By: me</li>
<li>31-12-2011</li>
</ul>
</footer>
</article>
<article>
<h2>Item 2</h2>
<p>Lorem ipsum</p>
<footer>
<ul>
<li>By: me</li>
<li>31-12-2011</li>
</ul>
</footer>
</article>
As you can see I use a <h2> for the article title.
However now I'm thinking it should also be a <h1> since it is in the 'scope' of the article element.
So: What would be the semantically correct element to use for the title of my news items?
From an HTML5 point of view, either is fine, and amount to the same thing.
For non-HTML5 aware processors though, the ranking of h2 will be understood correctly and h1 will not, so at the present time, while HTML5 is still new, I'd err on the side of caution and use h2, unless you need more than six levels of heading.
I think either one is semantically correct. From http://www.w3.org/TR/html5/sections.html#headings-and-sections:
Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.
So, either way is fine, but don't mix and match, and don't (for example) put an <h2> in a section that's within a section that has an <h2> or <h3>.
For what it's worth, the spec's own examples for <article>, at http://www.w3.org/TR/html5/sections.html#the-article-element, both use <h1>.
I am learning HTML 5 - going pretty smoothly.
My question is that I have a home page, header, menu and below this 3 content blocks, evenly spaced. They each contain various copy, with header text. For example,
Column 1
About Us
Lore Ipsum...
Our Advantage
Lore Ipsum...
Column 2
Our Products
Lore Ipsum...
Column 3
Contact Form
Twitter Feed
Contact Us
Lore Ipsum...
What is the best markup for this? Normally I would but each column in a div. Would this be best?
<div id="column1">
<section>
<h2>About Us</h2>
<p>Lore Ipsum...</p>
</section>
<section>
<h2>Our Advantage</h2>
<p>Lore Ipsum...</p>
</section>
</div>
<div id="column2">
<section>
<h2>Our Products</h2>
<p>Lore Ipsum..</p>
</section>
</div>
<div id="column3">
<form...
<div id="twitter">
<script...>
</div>
<section>
<h2>Contact Us</h2>
<p>Lore Ipsum...</p>
</section>
</div>
I'd say your posted code is fine, although personally I'd use <header><h1></h1></header>, instead of <h2></h2>, since the headings in this case are section headers (this is optional though).
More information on section headers can be found at:
http://html5doctor.com/the-header-element/
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
Consider using the <article> element instead of the <section> element, at least for "About Us" and "Our Advantage". These are almost certainly going to be syndicatable units of content so <article> is more appropriate. Possibly for the other sections too, but it really depends on what the lorem ipsum text says.
Otherwise, what you've got is good. <h2>s for your headings are fine if that's what you want to use. Neither <h1> nor <header> are giving you anything extra.
I would have done the same as you. As long as the sections in each div aren't strongly related. In that case I would change the divs to sections that contains sub-sections. Divs are still valid in HTML5 but are more of general block level containers.
What is the purpose of the div? It serves no function from what I can tell. All the section elements can be styled as they are except 'column3', perhaps.