The beauty of semantic HTML
Putting meaning into code
Defining Semantic HTML
An influential web design principle is the concept of using HTML elements that indicate what they are opposed to how they appear by default within a browser.
Essentially, writing semantic HTML is to give something more meaning rather than it being a simple description of how something should look.
Let’s use <p> for example. We know this is a tag indicating the text enclosed within it is a paragraph. This is presentational, but also semantic because people are aware of what a paragraph is as well as the browser knowing how to display it.
Conversely, <b> and <i> tags aren’t semantic. Why? They only dictate how the text should look; either bold or italic, or both. They don’t offer any deeper meaning to the markup.
Here are some examples of semantic HTML tags
- Header tags <h1> to <h6>
- <blockquote>
- <code>
- <em>
These are just a couple of examples. There are vast many semantic HTML tags to use in the building of a website that will comply to standards.
Why Semantics Matter
There is a benefit to writing semantic HTML. Every web page is trying to communicate something. Semantic HTML tags in your content will provide deeper information about that content. This improves communication.
Semantic tags let the browser understand the meaning of the content and therefore the page. There is clarity for search engines and more accurate results are delivered to queries.
These tags mean we get more information about the content using those tags, beyond simply how they should look. We know a browser will know a <code> tag is a coding language. If you were using an example of some code in a blog post, the browser would know this and would not simply try to render that piece of code that you’re quoting.
There are styling benefits to your content. One day you might like your sample of code to be displayed in the default browser style. Next week, you might want something with a different colour background. Perhaps after you change that, you decide you want to narrow down the font stack used for your code samples. With a cleverly-applied CSS and a semantic markup, you can achieve this.
Correct use of semantic tags
When you’re using a semantic tag for deeper meaning than the simple presentation, you must use them appropriately or their display properties.
When using semantic tags to convey meaning rather than purely presentation purposes, be careful you don’t use them incorrectly. This can lead to errors.
Some examples of misused tags are:
- h1 to h6 —Headings are used to make your font bolder and bigger. I the text you’re transforming into a heading is not actually a heading/title, it’s more appropriate to use the font-weight and size CSS properties.
- p — It’s commonly seen where an editor will use a non-breaking space contained in a paragraph, ie, <p> </p>. If you need additional space between your page elements, rather than utilising the space created by <p>, you should use a margin or padding style instead.
- blockquote — Some like to use <blockquote> to indent a line or two of text that isn’t specifically a quote. If your text is not a quote, utilise CSS margins.
- ul — Similarly to blockquote, the <ul> tag inserts an indent, too. This works in most browsers. This is wrong on both a semantic an HTML level because the <li> tag is valid in a <ul>. Again, use margins or padding instead.
Using HTML tags enriches the meaning and your pages have the ability to give better information compared to that which is littered with <div> tags. You can write CSS for your headings and paragraphs so they appear how you want, but when it comes to reading the markup, there’s no meaning. There’s text inside a div and text inside another div. There is no way to know how the first related to the following one.
Are there purely semantic HTML tags?
Almost all HTML 4 and 5 tags have some semantic meaning attached, some are purely for semantics. It’s encouraging to see small steps being taken to address the issue of semantic HTML.
Contact us
We’re passionate about building a better world wide web. This means building websites that are inclusive to all your users, not the majority.
