Why headlines are needed

Why do we need headings and which tags to use for them?

This question we are asked most often.

When HTML was invented many years ago, the world was completely different. The authors of the specification were inspired by text documents, where paragraphs, lists, tables, pictures and, of course, headings were in the same stream. Just like in your essays and coursework: the biggest title is the title, the smaller titles are parts or chapters.

HTML has since six levels of headings : from <h1> to <h6> . They headline everything that follows them and form implicit sections. Such logical parts of the page. Implicit they are because they are closed only when the next heading appears.

 <h1></h1> <h2></h2> <p></p> <h3></h3> <p></p> 

But it’s better to explicitly set sections using the <section> element, remember the third release? These two fragments are identical, from the point of view of semantics, but this one is much clearer, though much more verbose.

 <h1></h1> <section> <h2></h2> <p></p> <section> <h3></h3> <p></p> </section> </section> 

Because of this system of implicit sections, the specification strongly recommends not using the <h*> elements for captions under headings. This is a regular paragraph, and the title should denote a separate part of the content. The specification has a chapter with examples of the layout of complex elements : signatures, crumbs, dialogues - read.

Okay! Once we have explicit sections, it is easy to determine the ratio of the parts by nesting. So maybe the browsers themselves will guess what level headers are needed? And then assume: <h1> , <h2> , ash ... lost. So it would be more convenient to change parts of the code in places.

The same idea occurred to the authors of HTML5 and they described in the specification the algorithm of the outline. It permits only <h1> be used on the page, and the importance of nesting structural elements like <article> and <section> .

 <h1></h1> <section> <h1></h1> <section> <h1></h1> </section> </section> 

The developers really liked the idea, many even rushed to introduce it. But here's the problem: the algorithm of the outline has not yet been implemented by any browser, reader or search engine. On such pages, all the headlines scream that they are number 1 and the most important. But if everything is important, then nothing is important.

Do not do that, the specification itself now writes about it. The level of headings you need to monitor yourself. In fact, this is not so difficult: on a typical page it is unlikely that there will be more structural parts than 3 levels. So do not be lazy.

No, wait. I put the class on a <div> and see everything at once - this is the biggest heading, I put another class - the heading is getting smaller, it’s obvious. Why then this nonsense with the calculation of levels, if there is CSS?

 <div class="big-black">   </div> <div class="small-grey">    </div> 

Of course you are right, styles create a visual model of importance: large black text is more important, small gray is not important at all. But only if you look at such a page.

There are two important groups of users who read your page by tagging tags. They don’t look how big and black your <div> is - to find the most important thing on the page, they search for <h1> . This is a reader and robots. With robots, everything is clear: these are search engines that need to be helped to understand your pages.

Readers or screen readers are used by people who do not see your interfaces well or at all, or cannot control the browser in the usual way. VoiceOver, NVDA, JAWS read the contents out loud and are guided only by meaningful tags. The div and span elements mean nothing, no matter what classes or styles you wrap. Such a site is like a newspaper without headlines, just a mess of text.

Yes, what a newspaper! Wake up, 2017 in the yard, I'm doing an isomorphic one-page application, and not a wall newspaper. I have here component states - what for semantics where there is no text? Very good question.

All readers go through the page tag by tag, from first to last. And they read everything inside. Extremely inefficient: each page starts with a header and as you go through it, you forget what it was. Therefore, readers have special modes that show only important parts of the page. Structural elements header, nav, main and others, all links, all headers.

If you display all the headings and read them, you can create a mental, rather than a visual model of the page. And then take and go directly to the desired section by selecting its title. Menu, search, directory, settings, login - all these parts of your application can be entitled to simplify access to them.

 -  -  -  -  -  -  

But it happens that the design does not have headers for important parts. The designer draws, everything is clear to him: a menu with a chop, a search with a field, and so on. But this should not prevent you from making available interfaces. Arrange the necessary headings, and then hide them. How? Just do not display: none , his readers ignore. There is such a pattern visually hidden , more in the description of the video.

Think not only about how your layout looks, but also how logical the layout is organized . Do not forget about the headlines: let the styles show, and the headings tell about your pages or applications.

Video version

Questions can be asked here .