Semantics are everything when it comes to HTML. When a browser is displaying your HTML document, it first has to parse (or analyze) the tags so that it is able to create hierarchy from the content of your page, and is able to grasp the intent of the content provided.

HTML heading tags play a huge role in the game of semantics. Each denotes a differing level of importance, and helps the browser (and your visitors) visually determine the significance of the different elements on your page. Today, we’ll see how each of the heading tag looks, and examine how they help build more organized HTML pages.

Part 1: What are Headings?

Headings are essentially titles and subtitles for specific sections on a page. For instance, if your site has a section for news, there would probably be a header at the top of the section labled “News”. With HTML, there are 6 different sizes of headings, <h1> to < h6>. H1 is the largest heading and H6 the smallest. In a semantic HTML document, these elements should be used in order from largest to smallest, descending in order-of-importance.

If you’ve already used an H1 in a particular section, typically, you’d move down to an H2 for your next section. This would make that section appear as a subsection of the first.
Let’s take a look at the different sizes of headings for a better visual representation of how they work.

Part 2: The HTML

Our HTML page will consist of all 6 headers, descending from largest to smallest. Here’s what the HTML looks like:

Recall that <H1> is the largest of the headers. You should only be using the <h1> tag once per page. The others –<h2> thru <h6> – you may use as often as you’d like to; but keep in mind they should stay in order. For example, an< h3> should be a subsection of <h2>, <h2> of <h1> and so on.

Take a look at the following example to better illustrate this hierarchal concept:

If you view the previous example in the browser, you’ll see that each section has a clearly defined header, and that the subsection header is slightly smaller than its parent.

A Few Last Words

Again, semantics are essential in the HTML markup. Making sure your pages are well formed will make revisiting your code easier to modify later on, and it will keep your HTML pages standards-compliant. With headers, the important thing to note is that size reflects importance. Using them in the wrong order can not only confuse your visitors, but may also damage your sites search engine rankings.

Download Source Files