Based on “Crafting Meaningful HTML” online training by Jen Kramer.

One of the things I enjoy about web design and development, is that it is always progressing. New design trends, new software programs, new algorithms, new plugins…etc. What that means is, I am continually trying to learn, grow and improve my skill sets to keep up with the pace at which the field moves. So, I like to spend time researching what’s new or for ways that I can improve or expand my talents. Recently, I came across a training video that piqued my curiosity (mentioned above) and while the video itself didn’t share any new groundbreaking theories, ideas or software programs that would make my job easier, what it did share, was one simple way that I could start to improve my HTML coding. It starts with semantic HTML.

While the title might hint at something complex or a new, modern way to code; simply put, semantic HTML is structured HTML programmed with the intent to convey importance and provide understanding.

Understanding in the sense that it is synonymous with the word intuitive. This is a vital skill for both young and seasoned programmers to practice, as it allows current colleagues and future programmers who may precede them at a job, to be able to quickly identify and edit the HTML on a page. Additionally, it assists screen readers and boosts, to some degree, the SEO value of your site. As spiders identify this information while crawling websites, they better delineate the information on the page and can appropriately direct visitors to the information they seek.

Before I provide an example of proper versus improper semantic HTML, let me identify the road markers, aka, tags that act as the informational cues in the code. Tags are wrapping and/or containing elements in the HTML that define what is coded in between the opening tag and the closing tag . These tags won’t necessarily change the look or style of the content on the page, though they can using CSS, their main purpose is to provide a hierarchy of the information coded on a webpage. There are numerous tags available to developers to implement into their code for a variety of benefits and uses.

Let me provide a few quick examples of tags and how they are used. An article tag looks like this; opening tag “article”, closing tag “/article”. Seems pretty easy and for some veteran developers, this is nothing new, however, using the article tag in a blog post will help other developers to identify the beginning and end of the article, as well as, assist the aforementioned screen readers to dictate to a visually impaired website visitor. Between the opening and closing artcile tag, you will see other tags like this; “p” and “/p”. Or “h1”, “h2”, “nav” and “ol”. I’m going to assume that most of you, if not all, reading this blog post are familiar with HTML basics and understand the concept of a paragraph tag or h1 tag.

So, let me provide an example of proper versus improper semantic HTML.

improper demonstration of semantic html proper semantic html demonstration

As you can see from these two very simple examples, why the concept of semantic HTML is important and of good practice. The improper example, basically wrapped an entire blog post in opening and closing paragraph tags. It provides no structured hierarchy to the content, thus providing little guidance in being able to disseminate important information versus non-important. And in this modern world of scan reading, it is a quick way to lose website visitors and have high bounce rates on pages with unmanageable chunks of content.

Let’s explore a few of the more popular and useful tags in semantic HTML coding.

  • header; This tag is used to define the header of the page, it most commonly has a logo, search field and navigational elements within it.
  • nav; This tag is used to define a set of navigational links.
  • article; This tag is used to define an article, like a blog post.
  • aside; Most often used for side elements on a page like call out boxes or supporting information to the main body of the page.
  • body; This tag defines the main area of content on the web page.
  • h1; This tag defines the main heading of the page and or title of a post.
  • h2; This tag is less important than the h1 tag, but is used to supplement the information provided in the h1 tag and is often used to style headings that are slightly less visually noticeable.
  • strong; This tag is supposed to draw attention to a word or phrase. It bolds the content.
  • em; This tag places emphasis on a word or phrase. It italicizes the content.
  • ul; This tag is used to define a bulleted list.
  • ol; This tag is used to define an ordered list. The only difference between this tag and the ul tag, is this will order your list with numbers starting with 1 and assigning a numerical value to each subsequent item in the list.
  • footer; This tag is used to define the footer or bottom of the webpage or website. Most often you will find copyright information, supplemental navigational links or privacy policy / terms and conditions page information.

This is just a quick list of some of the more popular tags that are used and should be implemented in the HTML you code in order to properly assign content and provide structure. Again, these steps are simple, but significant so that your fellow coworkers, SEO spiders and screen readers can track where they are, intuitively understand what the code is saying and identify the important elements of the code you’re writing. Much like you were able to hopefully, make your way to and through this blog post. Remember, our job is to create an easy and enjoyable experience for website visitors, semantic HTML helps developers perform their job well.