In my last blog Blue Pencil I explained how the tags used in HTML tell the browser where to place things. In the old days we used <div> tags and <span> tags which made our page look — well — nice. But what if your HTML code could do more than give formatting directions? What if it could share information and make the job of organizing your site easier?

Currently, there’s a movement toward using Semantic HTML, and if you use it in your code, your tags can do a whole lot more than formatting.

Better Accessibility

Good semantic HTML also improves the accessibility of web documents (see also Web Content Accessibility Guidelines). For example, when a screen reader or audio browser can correctly ascertain the structure of a document, it will not waste the visually impaired user’s time by reading out repeated or irrelevant information when it has been marked up correctly.

(Semantic HTML, 2019)

It can also help you keep your code more organized, which helps search engine crawlers do their job more efficiently.

Better Search Engine Optimization

In a recent article published in Lifewire — a technology advice website — Jennifer Kyrnin describes how semantic HTML is different from traditional HTML and points out one of its main benefits.

… semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.

(Kyrnin, 2019)

Sounds great, right? Let’s take a look at some popular semantic HTML tags. Notice how they do double duty by telling WHAT THEY ARE as well as WHERE THEY SHOULD BE on the page.

(James, n.d.)

Now that you have an idea of how they work and why they work well, let’s take them for a spin.

Adding Navigation

To test semantic HTML, I decided to add a navigation bar to my existing index.html page. Look just below the <body> tag and you’ll see the <nav> tag. The <ul> tells the browser it’s an unordered list, and the <li> tags use the <a> tag to make links out of the words listed in white: Home, Effective Writing, Digital Health, Visual Design, Web Design, and About. Here’s a snapshot of the code.

Here’s how the page looks in the browser with the newly added navigation.

Super easy and really efficient.

As someone who is used to traditional HTML, it’s easier to code the way I always have. But it didn’t take a lot of energy to incorporate semantic tags into my page.

Going forward, I’ve learned that using semantic HTML can make your site more accessible and generate more traffic based on higher search engine rankings.

Better Cross Browser Capabilities

According to web developer Bruce Lawson, ” … HTML5 semantics are carefully designed to extend the current capabilities of HTML, while always enabling users of older browsers to access the content. We’ll also see that semantic markup is not ‘nice to have,’ but is rather a cornerstone of Web development, because it is what enhances accessibility, searchability, internationalization and interoperability” (2011).

until nxt time …


Foster, H. (2019, July 28). BLUE PENCIL. [Blog post]. Retrieved from:

James, O. (n.d.). Semantic HTML | HTML & CSS is hard. Retrieved from: /html-and-css/semantic-html/

Kyrnin, J. (2019, May 2). What is semantic HTML and why you should use it. Retrieved from:

Lawson, B. (2011, November 18). Sexy new HTML5 semantics. Retrieved from:

Semantic HTML. (2019). In Wikipedia. Retrieved from:

Markup language. (2019). In Wikipedia. Retrieved from

What is HTML – A Simple Guide to HTML. (n.d.). Retrieved from:

Header image by Digital Buggu from Pexels

Written by


Leave a Reply

Your email address will not be published. Required fields are marked *