Semantic HTML.. and why it matters.
Most people have probably heard the word “semantics” tossed around at least once in their life. It’s a word that sort of defines itself… but until I really took a step back to think about what it means, I didn’t exactly get the full picture.
Semantics literally means “the meaning of a word, phrase, sentence, or text”.
That definition translates perfectly to the context of HTML elements — Semantic HTML elements are “elements with a meaning”.
In HTML, there’s a decent list of what are considered Semantic Elements.
These semantic elements are important to use for several reasons:
First and foremost, they clearly define the elements meaning to both the browser, and to any developers looking at / working on the code.
As a project continues to grow and gets bigger and bigger, using semantic HTML elements also makes the code more maintainable, much easier to navigate, and more difficult to get disoriented.
By using these semantic elements that provide a meaning of that element to a browser — as opposed to something like a <div> or a <span> which provide no actual meaning, but do inherit meaning from their children — it also helps your website in several other surprising ways as well:
Accessibility — there are a considerable number of users that utilize screen readers to navigate webpages. These programs scan each element in order to provide context, meaning, and navigation across a website. Users typically navigate using only a keyboard. Ensuring the correct usage of semantic HTML elements provides for accessibility and a more robust experience for those utilizing such programs.
SEO Best Practices — SEO, or Search Engine Optimization, is the concept of how a Search Engine prioritizes different results. By utilizing the proper semantic HTML, search algorithms can better detect the meanings of those elements, to display the results that are the most relevant. Google for example prioritizes sites that are responsive and accessible, and have higher priority data matching the search terms. An <h1> element for example signifies a title, that is much more important than a <p> element that signifies a paragraph.
But what about the CSS..?
There is really no difference in styling an element that is a <div> compared to an element that is a <section>. I know that I’m not alone in falling into a pattern of simply using <div> or <span> elements with varying classes or ID’s to add styling.. but
Summary
Utilizing proper semantic HTML tags will make your website more accessible, more visible, and easier to navigate & maintain. There are plenty of best practices to look into and consider; for example an <a> anchor tag should be used when navigating around the website, whereas a <button> tag should be used for performing an action on a page.
There are plenty of sources available at any time to help you ensure that you’re using proper semantic HTML elements — check some of them out here:
W3 Schools on Semantic HTML Elements
I hope you enjoyed the post here, and learned something new about semantic HTML elements, their usage, and why they are important. I’ll be back again soon. Cheers!
