The importance of using semantic markup in the software development process

The Holy Grail of any software developer is a clean, neat, and understandable code. If the code is sweet and simple, the project becomes more light-weight, other developers can easily perform cross-review, and everything looks just fine.

One of the ways to make your code looks clearer and make the page more attractive for search bots is using the semantic HTML (or semantic markup). Even though this method is known for a long time, many developers still overlook it, choosing to write the never-ending <div> all across the page. Being the followers of high-quality and clean coding, the SoftTeco development team prefers using semantic HTML and explains the choice below.

What is semantic HTML and what makes it different?

Every developer knows that HTML tags tell how the content should be displayed on the page – but these tags do not tell the browser what kind of content it displays (i.e. a header or an article). To arrange the content on the page, developers use <div> and <span> tags.

Now imagine how many <div> tags one page may contain. It would be quite challenging for both the developer and the search bot to understand the content on the page and to search for the needed element among numerous <div> tags.

Semantic HTML, on the contrary, uses tags that specify every element of the page. The examples of semantic tags are <header>, <footer>, <article>, <section>.

In this way, when the search bot crawls the page, it can instantly understand its content and define the most important elements. And this is not the only advantage of semantic markup.

Better SEO ranking

As said above, semantic HTML contributes to better SEO ranking as it helps search bot understand the content on the page and detect the most important elements.

When all elements are written in <div> tags, they look the same for search bots. But if you write <header> and <section>, the bot will be able to “see” where each element is placed and thus prioritize them. Another example: the <code> tag. By using it, you are letting the browser know that this is an example of code needed for some purpose and not a piece of code to be rendered.

And don’t forget to use the H1 and corresponding tags for your copy. The H1 tag indicates the context of the page and lets the bot know what the page is about. Other tags are used in hierarchical order and facilitate navigation for both the bots and the users.

Improved usability

It is desirable that the users stay on the website as long as possible and actively interact with its elements. For that, a website (or an app) needs to have high usability, meaning, the user should feel comfortable when interacting with it.

Semantic HTML helps achieve better usability as it enables the browser to automatically provide the best solution. For example, if you write <select> tag for the menu option, the browser will automatically provide the most suitable solution, like a popover menu. In addition, it will change the popover to the picker view if the user accesses the same page on the mobile device.

In case the developer writes a traditional <div> tag, he will have to specify the option menu and it may not be the best solution. 

Better navigation for partially sighted users

Partially sighted users can efficiently browse the websites on condition that the browser supports screen readers. This assistive technology can either read the content of the page to the user, switch the screen to a more user-friendly mode or help better navigate among the page content with keyboard only.

To support the screen reader technology, the website has to be written in semantic HTML so the reader “understands” the page elements and navigates the user through them.

Shorter and simpler code

Shorter code means faster development, higher chances to find bugs and, overall, more accurate work. Compare the two versions:

<strong>Text</strong>

<div style="font-weight: 700">Test</div>

Both of them highlight the chosen word in bold. But with semantic HTML, you basically need one tag only to change the property of a word. Overall, semantic HTML implies a shorter code that is much easier to navigate, which, in turn, contributes, to the quality of the end product.

In addition to that, semantic markup enables developers to better understand each other’s code during the cross-review and find the necessary areas in the code faster and easier. 

The do’s and don’ts of using semantic HTML

Considering all the benefits that semantic markup brings, you might want to immediately adopt it and optimize all the pages of your website. We highly recommend you not to rush as there are many things where semantic markup can go wrong if used incorrectly.

The Do’s

If you have not worked with semantic markup yet, start with a simple implementation, like having only <header>, <nav>, <main> and <footer> tags on the page. In this way, you will avoid the risk of writing the wrong tag which, in turn, will confuse the search bot and lead to serious issues.

When using <article> and <section> tags, try placing the <section> inside the <article> (even though these tags do not differ much). Such a placement is more understandanle by the bots.

Overall, stick to the logical placement even though it may seem too simple. And once you feel comfortable enough with using semantic markup, you can start making it more complex, like placing nesting elements on the page (i.e. an <footer> in the <article>).

The Don’ts

Probably the most important thing to remember is to avoid unnecessary complexity. If you are not 100% confident in semantic HTML, use the basic tags. 

Another important thing to remember: do not use the visual layout as a guide for semantic HTML. This will lead to the search bots confusion and poor ranking.

And do not eliminate <div> at all! The whole point of using semantic HTML is to use the appropriate tags for certain elements – but that does not mean you have to neglect the <div> tag. Get to know your semantic HTML tags, use them correspondingly and start small – these are the keys to a cleaner and high-performing code.