Blog

HTML Tags, Headings, Sections, and Why It’s Important to Get Them Right

blog_post_184

In my previous accessibility and usability blog post, I mentioned that multiple h1 elements should not be used on a single page, unless you were using the HTML5 specification and the page was designed to handle such elements. I want to now explore the reasons behind this and discover a little more about what HTML actually is.

HTML stands for HyperText Markup Language. This is the coding language used in all web pages. There are a lot of different coding languages in use on the web (PHP, ASP, Ruby, etc.), but web browsers only understand HTML for displaying web pages, so all of these languages need to produce HTML. This markup defines all of the content on the page, and although web browsers do add some basic styling, HTML is very plain on its own. Just take a look at the fastest page on the internet, as stated, it has no additional scripts or styles added, just raw HTML.

So what about HTML versions? The current standard is HTML 5.1 which was published by the W3C at the beginning of November 2016. Previously it was HTML 5, which began in late 2014, and before that version 4.x and so on back to the beginnings of the internet. However, not all web browsers implement all features and, alas, they do not all work the same. This is why a lot of developers hated trying to make their sites work in Internet Explorer. In fact, one online retailer even took it a step further and added an additional Internet Explorer Tax to their products to help fund the additional time it took to create workarounds for their site to function correctly on the outdated versions of Internet Explorer. Thankfully, most of that is behind us now, but there are still variations between browsers, as each browser likes to do things its own way. Caniuse is a great online tool for developers to see if the features of HTML, JS and CSS will work in the browsers they need to support.

The HTML language uses tags to specify its code. For example, text contained between <p> and </p> is marked as a paragraph, and similarly text between <h1> and </h1> is a level 1 heading. A complete tag and its content is referred to as an element of HTML. Different HTML versions added and/or deprecated different tags. Using these tags in the correct manner leads to web semantics, which conveys more meaning for the developer, browser, web crawlers and even screen readers, again, improving accessibility. Back in the dark days of web development, the site layout was built by using table elements, as advanced styling and other methods of controlling the layout did not exist. And of course, you could forget about it been responsive, as mobile devices capable of accessing the internet weren’t even on the radar. Today, we have access to CSS, and more HTML elements to use for better structure and representation of information. However, if you wish to see an example of how things were done in that bygone era, the Spam Jam website is still running, since 1996.

Now that we understand a little more about HTML and how it is structured, let us take a look at the initial point of why HTML5 permits the use of multiple <h1> tags. As mentioned above, HTML5 introduced several new tags to be used to improve the web semantics. One of these tags is the element which allows developers to create 'sections' of content. As defined by the MDN, "The HTML <section> element represents a standalone section of functionality contained within an HTML document, typically with a heading, which doesn't have a more specific semantic element to represent it."

This means that a section should not be placed on a page just to enable a new heading element to be used. A section element is specifically that, a section of content for the document. If you are intending to use multiple h1 elements on a page to draw more weight towards these items, you may be better suited to having the content split across multiple pages. If we liken the use of h1 elements to chapters in a book, you would not begin multiple chapters on the same page, as each section would be defining its own content, that, semantically, is not related to the other sections. Splitting content that needs to have multiple h1 elements across multiple pages would also increase your SEO and online presence, just ask our marketing team.

Glossary:

Active Server Pages (ASP) - Server side language created by Microsoft.

Cascading Style Sheets (CSS) - Defines the styles applied to markup.

PHP Hypertext Preprocessor (PHP) - Open Source server side language.

Search Engine Optimisation (SEO) - Used to improve rankings in search engine results.

World Wide Web Consortium (W3C) - An international community that develops open standards to ensure the long-term growth of the Web.


Aaron Humphreys Aaron Humphreys

About the author:
Aaron is a "Full Stack" Developer at Klyp. He is a technology enthusiast and gamer at heart.