A short note on HTML5 article, section and hgroup
This conference season I’ve spoken at some events for non-frontenders, suggesting that people invest time in learning the semantics of HTML. After all, there are only 120(ish) elements; the average two year old knows 100 words and by the time a child is three will have a vocabulary of over 300 words.
A few people asked me the difference between <article> and <section>. My reply: don’t worry. Simply, don’t use <section>. its only use is in the HTML Document Outline Algorithm, which isn’t implemented anywhere, and seemingly never will be. For the same reason, don’t worry about the <hgroup> element.
But do use <article>, and not just for blog posts/ news stories. It’s not just for articles in the news sense, it’s for discrete self-contained things. Think “article of clothing”, not “magazine article”. So a list of videos should have each one (and its description) wrapped in an <article>. A list of products, similarly. Consider adding microdata from schema.org, as that will give you better search engine results and look better on Apple watches.
And, of course, do use <main>, <nav>, <header> and <footer>. It’s really useful for screen reader users – see my article The practical value of semantic HTML.
Happy marking up!
Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)
7 Responses to “ A short note on HTML5 article, section and hgroup ”
Why is that Bruce, had this discussion yesterday – page didn’t have one and I said it needed one discussion went to two articles each with a H1. What’s the downside?
Semantic HTML makes everyone’s life much easier, it’s easier to build, annotate and style. And, while everyone is going to develop their own particular style, the result should generally be fairly easy to understand, which is a far cry from the pre-HTML5 days!
The main reason that you only want one h1 in any page is that h1 is considered equivalent to the page’s title, of which there should also only be one. The difference being that the title element is not directly visible in the browser. Lots of software, not least search engines, are built around this assumption so you may find your site punished or users confused if you do use multiple h1s on a single page.
Of course, the counter-example is: why would would want multiple h1-elements on a single page in the first place?
Google say that multiple H1s aren’t a problem for them, Bing still reports it as an issue though.
Let’s say you have a two or more distinct sections within a document and you want to make it clear they are separate in content, wouldn’t it be more correct to write (excusing the terrible content organisation). So in the example below, Archive of short articles is the most meaningless of the headings, the ones in the sections have the truer description of the content on the page.
H1 Archive of short articles
Section
H1 - Sausage-making in history
Section
H1 - Why do Belgian waffles taste so good?
than say
H1 - Archive of short articles
Section
H2 - Sausage-making in history
Section
H2 - Why do Belgian waffles taste so good?
Kev, if your example is of one page, then the page is a list of articles and therefore the subject/title is Archive of Short Articles. So that would be the H1. The sections would use h2’s. A page should only have one subject matter even if that subject matter is multiple topics. I don’t know why Google sometimes says multiple H1’s are okay. Even if their algorithms can get around someone’s mish-mash content and make sense of it, the human brain shouldn’t have to. H tags should be treated like a table of contents — a book only has 1 title. Hope this made sense.
h1 is an overview of the entire contents of the blog
if h1 is more than one whether the robot engine is not dizzy
Can you recommend how to use h tags within a new article? Is it ok to start with an h1 in each?