[001.3] Semantic Markup

Semantic markup brings meaning to your HTML.

Subscribe now

Semantic Markup [05.13.2016]

Semantics are the study of meaning. Writing Semantic HTML means adding meaning to your html, and letting the content determine its structure, instead of the design.

There are a lot of reasons to write Semantic HTML, but the most important is that content should have meaning. If you're going through the trouble of converting content into a webpage, then it should be structured such that everyone gets the most out of that content. This includes people with disabilities, such as those needing a screen reader. Properly formatting your HTML makes browsing your sites much easier for those individuals.

Another reason to write good semantic markup is that it's easier to maintain. Often you'll come back to your code months or even years later, or are working on that code with a group of other developers. In any of these cases you'll want to be able to get them (or yourself) back up to speed on the code quickly, and that is much easier when it's logically formatted.

Finally, good Semantic HTML ensures design independence. It's much easier to style semantic html, and express those styles consistently throughout your site when it's structured semantically.

Lets look at a couple examples of non-semantic code:

<p>This is <b>important</b> text.</p>
<p>This is <span class="bold">important</span> text.</p>

In the first case, the author used b tags to bold the word important. While in the second case the author surrounds the word with a span and adds a class of 'bold.' In both of these cases the word is bolded, but it doesn't convey any extra meaning about that text. This means that meaning isn't available to non-visual consumers of this content, like a search engine bot or user with a screen reader.

Now let's look at an example of good semantic code:

<p>This is <strong>important</strong> text.</p>

In this case, the author uses a strong tag around the word, and that gives strong emphasis to the word, as well as the bolded appearance by default.

It's virtually always worth the effort to make your code semantically correct. Doing so doesn't require a lot of extra effort and more than likely, you'll end up saving time over the lifetime of your project.