In the age of Javascript frameworks and their custom components, it has become easier than ever to build elements that function and appear exactly how you like. While only using a few of the standard HTML elements, learnt at the beginning of your journey into Web Development.

However, HTML5 provides many tags you may have forgotten, or neglected for the use of the well-known <div>, <p>, <a>, <h1>, etc.

Incorporating the following HTML elements has the potential to increase SEO, increase accessibility (e.g. by making screen readers more effective) and making your markup clearer and more readable.

Navigation and Layout Elements

Recently I’ve been building some simple, static websites for my portfolio. As part of that I found that I was often only utilising the <div> element to section off parts of my page to form a certain layout.

As I began repeating building certain parts of the page layout (nav bar, footer, information sections), and saw some examples of other peoples work, I realised I was not utilising some elements that could provide more semantic meaning to the page contents.

Header and Footer

Headers and footers are usually the components of a page that sandwich a page’s content. The header being a place to include an image, heading or other information to outline the purpose of the page. While, the footer, in modern website design has become a place to contain secondary page links, contact information, policies and terms and other information of that nature.

The <header> and <footer> elements can be added around the your links (or div that you use to create your component) to signify in the markup, what it is.

Nav and Menu

Navigation bars and menus, are also very common parts of many websites and applications. Similarly to the previous elements, <nav> and <menu> can be used to encapsulate links or <div> .

Hgroup and Section

Many websites, especially those with pages that have many snippets of short-form content, should be utilising the <section> element. On the other hand, <hgroup> has a less obvious application, but is also quite useful. The <hgroup> tag “represents a heading and related content . It groups a single <h1>–<h6> element with one or more <p>”. An example of where this is useful, is on the landing section of a home page, where a business would like the title of their product and their catchphrase/slogan for it beneath.

Purpose Elements

Another category of elements I found I was under utilising are “Purpose Elements”. These elements are used to signify the importance of a section or page. The two main purpose elements I found were <main> and <article> .

The <main> tag is used to define the most important content stored within the body of a given page. While the <article> tag is more specific, in that it specifies the main piece of content on a page that could be distributed independently from the rest of the website. For example, it could be used to contain a blog post or newspaper article.

Conclusion

Utilising these tags in your website or web application can potentially improve SEO but also makes the markdown easier to interpret (especially when you can’t rely on CSS classes like when using TailwindCSS).

If you’d me to cover more under utilised HTML elements or have a suggestion of an element that isn’t used enough, please leave a comment!