Why HTML Semantics are Important

Enjoy Digital
By Enjoy Digital
5 minutes to read

Semantics is the linguistic and philosophical study of meaning in a given language, including the language of programming. The word itself is derived from the Greek ‘sēmantikos’ and translates to ‘significant’.                                          

But what difference do semantics make to HTML?

HTML5

HTML has always had a semantic approach to markups but HTML5 has introduced quite a few new elements which help us define different parts of our webpage even more clearly.

The following elements all have specific meaning to site crawlers and search engines. They add value and meaning to the overall structure and formatting on which the information will be represented.

<main> – The main content of a document, does not include global items like nav or footer

<nav> – Navigation links or link bar can be added here

<article> – A self-contained piece of content within a document (e.g. blog posts, comments, etc.)

<section> –  Section of content within a document

<aside> - A tag that is aside from main content but should be related to surrounding content

<figure> – Defines self-contained content that is independent (e.g. photos, illustrations, videos, etc.)

<mark> – Used to highlight important parts of content

<figcaption> – A caption for figure elements

<hgroup> – Defines a group of header tags

<footer> – Footer of a document for Element

<time> – This defines readable date/time

What does this mean?

These new tags help to reduce unnecessary and nondescript <DIV> and <SPAN> tags which fail to tell us anything about the content in place.

It could be said though that IDs or classes could be used where relevant instead of the specifics of HTML5. Whilst this is true, each class element has to have a defined name which describes the content in order to be semantic. This can often be very tricky as the name may make sense to you but will not always be clear to another developer working on the same project.

Below are some of the improvements that HTML5 can make. 

 

HTML 4

<div class="article_blue">
<div class="article_title_red">HTML 4 IS GREAT</div>
<div class="the_content">Semantics
<span class="darkbold">are</span> important</div>
</div>

 

HTML 5

<article>
  <h1>HTML 5  IS GREAT</h1>
  <p>Semantics
     <b>are</b> important</p>
</article>

 

The differences between the two is immediately obvious. Using semantics provides a better structure and makes the code and content easier to read. It will inevitably reduce the size of your stylesheets and may even be clear to non-developers.

As HTML5 eliminates the need for specific element names, content becomes adaptable should a future redesign take place. Time will not have to be spent changing class names as all content should work in unison with new designs.

So why does semantic markup matter?

Google and other search engines view pages without styles and instead process content by the use of correct tags. For example, Google et al will recognise <h1> and not <p> as the former is more descriptive and highlights the importance of the content.

As previously mentioned, styling with CSS becomes a lot easier. If you’re using a modular or pod approach, each section containing a Header 2 tag can easily be globally styled. Similarly, if one has a specific customisation, you can change other global elements or specific styles and it stops the need for classes and IDs.

 

 

Other Aspects of Semantics

Microdata

Microdata which is part of the WHATWG HTML specification is used to nest metadata within existing content. This means search engines, web crawlers and browsers can use the microdata to improve a user’s browsing experience. This can be achieved by using supported vocabulary to describe an item and adding name-values to its properties. It’s also a simpler way of annotating HTML elements with machine-readable tags.

Search engines benefit greatly from this as it allows users to see more relevant results. 

WAI-ARIA

WAI-ARIA is a specification that adds accessibility and semantic value to a web page. This can be achieved with the help of elements as landmark roles which can be described by using ARIA-prefixed attributes.

Conclusion

It’s undisputable that semantics play an important role within HTML and web development. This style of markup helps reinforce meaning rather than solely defining presentation or look and, for developers, means writing meaningful/modular code and taking time to think about structure.

We love all that networking and connection making, but let’s face it, you can’t beat a good old-fashioned chat over a cuppa. Just give us a call, we’ll put the kettle on.

Get in touchArtboard 1
comments powered by Disqus