<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
Related
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.
There are a lot of different answers and after a week I am more confused than before.
The main problem is section and articles.
Let's make an example, this page describes a town:
<h1>TownName</h1>
<p>Description</p>
<h2>What to see</h2>
<h3>Sightseeing Nr1</h3>
<p>Its description</p>
<h3>Sightseeing Nr2</h3>
<p>Its description</p>
...
<h2>How to get</h2>
<h3>By car</h3>
<p>Description</p>
<h3>By train</h3>
<p>Description</p
<h2>Map</h2>
<p>Description</p>
<h2>...</h2>
...
etc.
There are h3 for some h2, for some nope. Should I use article for each h2 and a nested article for h3 too? (The context can be separated, so..)
Or should I use sections for h3?
Or should I use section for blocks of "h2" and article for each h3?
h1 with its description is an article or section too?
It's so difficult, also I have added an image of a page that I projected, I am almost sure that I don't have to use section to wrap aside and main elements..
Zhenya, This is from W3 Schools
**Nesting Semantic Elements**
In the HTML5 standard, the <article> element defines a complete, self-contained block of related elements.
The <section> element is defined as a block of related elements.
Can we use the definitions to decide how to nest elements? No, we cannot!
On the Internet, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <sections> elements.
You will also find pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.
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
I know that every <section> must contain an <h1>, but if I put a <section> inside an <article>, what do I have to use inside the <section>? <h1> or <h2>?
In detail, my article is a blog entry, and the section is the "related content of the article", like a video or a set of images (gallery).
Thanks
A section doesn't necessarily contain an <h1>, though they certainly help arrange your content and give it semantic meaning.
If I had the structure you are describing, I would certainly use the normal <h1>-<h6> progression to structure my document:
<article>
<h1>...</h1>
<p>...</p>
<section id="related-content">
<h1>Related Content<h1>
<h2>Video</h2>
<p>...</p>
<h2>Gallery</h2>
<p>...</p>
</section>
<section id="another-section">
<h1>Another amazing section!<h1>
<h2>...</h2>
<p>...</p>
<h2>...</h2>
</section>
</article>
As always, when in doubt, validate your markup: http://validator.w3.org/
Why would your section require a <h1>? It doesn't.
If you put a <section> in an <article>, you can use any flow content in your <section>, i.e. you can use both <h1> and <h2> as you like.
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>.