Where are your <headings> heading to?

When you’re new at something there’s always a bunch of basic stuff you have a million questions about. For the most part, people will be helpful and give you the answers you’re looking for. But sometimes, when your question is maybe too basic, too conceptual or abstract, or for some other reason, people will just give you a five-word, simplistic answer, and carry on.

This is the case of the completely unrelated Opus Number in the world of classical music. In the field of web development, it’s also the case of the Heading elements. Yep, those h1, h2, h3, and so on HTML tags. People will tell you they’re for showing different levels of importance, they’ll say they’re just kinds of titles, and if you’re a self-teaching person like me, you might even guess them to be a quick and simple way to format text.

They’re not any of those things.

So what are they really there for?

First of all, try to think of how HTML was originally conceived. It wasn’t really meant for fancy and complex web applications, it was created as a language to mark up long and complex articles, and provide a way to make articles within a large collection to be connected with one another.

So headings were pretty much a necessity from the beginning, becoming the primary way to give a multi-level form to the content. This is most obvious on a very long Wikipedia article, where sections have sub-sections with their own sub-sections within, and you can see how each heading denotes that structure.

And how does this translate to the way we use HTML today?

With the addition of semantic tags like <article> and <section> on HTML5, the anatomy of our pages is now much easier to understand by just reading the code, since it’s not just a big mess of <divs> lying around.

So now headings can go hand in hand with the HTML elements containing them and define a much richer and semantic shape for your code.

Why is this important?

Of the top of my head, doing so will help SEO on your site, since a site with a well shaped content will be easier to read and understand by the search engine’s crawlers; screen readers and other accesibility software depend heavily on this, and because this can help you define styles on your CSS and make new content look perfect out of the box.

Bottomline:

  • Plan structure before coding.
  • Use heading tags to structure and give meaning to your content.
  • Don’t skip heading numbers, it makes no (semantic) sense.
  • Make sure headings and sections/articles/etc are consistent throughout your site.
  • Write your CSS so it works together smoothly with your site’s structure.

And always keep asking those basic, noob questions ☺

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.