While learning about or working with Hyper Text Markup Language (HTML), it is quite common to hear the word “semantic”. You will hear things like:
- “You should always develop with semantic HTML in mind”
- “This div should be replaced with a semantic element.”
But what does all that mean?
Simply put, semantic HTML (also referred to as semantic markup) is HTML that provides meaning or context for an element rather than just presentation. Some of the major reasons why semantic HTML is so important are:
- Technology (such as web browsers, screen readers, etc.) use semantic markup to interpret information the proper way. As a web developer, your job is to communicate. A plethora of tags are at your disposal and it is up to you to select the proper ones to get the correct message out to everyone/everything that chooses to decipher your content.
- Using the semantic tags will not only help with navigation through your website, it will also improve your Search Engine Optimization (SEO). Search engines such as Google will rank your website higher because it is easier for them to identify how your pages are arranged.
- Using semantic HTML will help with your journey towards ADA compliance. Becoming ADA compliant involves adhering to the latest web accessibility guidelines known as the WCAG 2.1. Following these guidelines includes optimizing sites for people with disabilities. One way to do this is developing with semantic HTML so people that utilize screen readers can navigate your site just like anyone without a disability can. Everyone should be able to obtain the same information – no matter how they are receiving it.
Below are a few real-life examples that epitomize the importance of using semantic HTML:
Header vs Div tags
A website header contained within the <header> tag will tell your web browser that, “this is a header”. Compare that to the exact same header contained within a <div> tag – the web browser doesn’t get as much information and it is left guessing what this portion of the content is about. Whether you use the <header> or <div> tag to make your header, they will look the same but the <header> tag is more descriptive and is the way websites should be developed. That is what is meant by semantic HTML.
Bold/Italic vs Strong/Em
Tags such as <b> (bold) or <i> (italics) have become deprecated for this reason. These outdated tags only described the presentation of the elements it surrounded and mentioned nothing related to meaning. Something would be bolded or put in italics to draw attention to it but that was it. These tags have since been replaced with the <strong> and <em> tags respectively.
These newer tags added the missing context that is so important when it comes to semantic HTML. Something with a <strong> tag will become bolded but to something like a screen reader it will communicate that whatever is within the tag is of strong importance. Similarly, the <em> tag will present text in italics and is used to stress emphasis for a specific word or words compared to the surrounding text.
Heading Tags
One area of semantic HTML that beginners typically have trouble with early on is the heading tags. If you weren’t taught the proper usage of each tag, there is often a lot of misunderstanding around when and how to use them.
Each page on a website should only have a single <h1> – this should be the page’s top-level heading. <h2>s are subheadings of the <h1> tag, <h3>s are subheadings of the <h2> tags, etc. all the way down to <h6>. A lot of beginners will choose to use a heading simply by how large the browsers make it by default rather than following the hierarchal levels. This is an important concept to grasp and helps give all your pages more context and flow.
If you or your team are having difficulties with semantic HTML, we offer digital quality management services that can help get you on track. Let’s get started today!