Once you’ve been writing HTML for a while, you may come across the term “semantic HTML.” But what does that really mean?
What is Semantics?
You may have heard the phrase “that’s just semantics” used as a way to dismiss an argument or otherwise minimize the importance of something someone says, but semantics can be important to your website. Understanding semantics as it applies to HTML can save you time and money in the long run.
In web design, semantics is concerned with the meaning of the tags and attributes that you use to build your web pages. In other words, semantic HTML is HTML that contains meaning in and of itself, beyond any content that it might be marking up. Semantic HTML lets the browser understand what the tag contains, and so will you.
Here is a hypothetical example of HTML if it were written with all the tags differentiated by numbers:
<!tag1> <tag2> <tag3> <tag4>Now is the Time</tag4> </tag3> <tag5> <tag6>Now is the Time</tag6> <tag7>For all good people…</tag7> </tag5> </tag2>
This is pretty difficult to understand, right? Web browsers could have been programmed to read the above faux HTML just as easily as they read real HTML.
Here’s the same web page written in real HTML:
<!doctype html> <html> <head> <title>Now is the Time</title> </head> <body> <h1>Now is the Time</h1> <p>For all good people…</p> </body> </html>
This is much easier to read and understand, even if you don’t know HTML. You can make guesses about what the content is because of the HTML tags surrounding it. Let’s look at it line by line:
Line 1: <!doctype html>
You may not know what the word “doctype” means, but if you were to guess, you might think it meant “document type” and this is followed by HTML. So this line probably means that the document is an HTML document.
Line 2: <html>
Even if you didn’t understand the first line, this line confirms that we’re working with an HTML document.
Line 3: <head>
This may not be clear immediately, but it obviously means something to do with the “head” of the document, perhaps the brains.
Line 4: <title>Now is the Time</title>
This is the first really semantic tag you see in the document, even though the above tags are reasonably understandable. It’s clear that the title of the document is “Now is the Time.” This line also gives you a clue as to how HTML is structured, as you can see the closing tag right there.
Line 5: </head>
We learned about closing tags in line 4, so it’s clear that this is the end of the head information for the page.
Line 6: <body>
This is probably the beginning of the main focus or body of the web page.
Line 7: <h1>Now is the Time</h1>
This is a repetition of the title, but the tags surrounding the text aren’t terribly clear. Once you understand HTML you’ll recognize this as a level 1 headline, but the semantics are poor on this tag.
Line 8: <p>For all good people…</p>
This is another tag that you will recognize as semantic once you know HTML better. And it might be more obvious what it is in a longer page with more of them. This is a paragraph tag. It might have been more semantic if it was written <paragraph>.
Line 9: </body>
Here we have the end of the body of the page.
Line 10: </html>
And finally the end of the document itself.
As you can see, a tag like <body> has a lot more meaning in and of itself than <tag5>.
This is semantic HTML. Semantic HTML is HTML that provides meaning to the content it contains.
Why is Semantics Important for HTML?
Semantic HTML makes your web pages easier to read and understand. While most of your customers won’t ever see the HTML tags, the browsers will and they can make adjustments based on the tags to make the content display more effectively.
For example, in HTML 4, you could only embed video and audio using non-semantic <object> tags. The browser knew that the element was an object of some type, but not what it was.
An object could be almost anything, and the browser wouldn’t know until it started to try and display it. But with the new semantic <video> and <audio> tags the browser will know immediately what it has to download. If the browser doesn’t support video, it knows before it starts to download the file, which saves the customer time.
But semantics can also save you money. Web pages need to change to stay current. When a page is marked up semantically the next web designer to edit it can tell almost at a glance what the page has on it, without needing to read any of the content. This saves time, and gets the designs built more quickly, which saves money.
Plus, just like browsers, web designers can use semantic HTML to design their pages better. If you have code samples in your documents, you can add line numbers to them automatically if you use the <code> tag around them. You can put gorgeous graphical quotation marks around <blockquote> elements.
And there will probably be additional features that come out in the future for semantic elements. For instance, a tag like <address type=”skype”> might allow for direct video calls embedded in web pages. Using semantic HTML tags future-proof your web designs and ensure that your meaning is understood.
Semantic HTML Tags in HTML5
The following table shows the semantic tags in HTML5.
|<address>||Address of the authors of the document|
|<aside>||Tangential or content that is loosely related to the main content|
|<audio>||Audio or sound file|
|<body>||Body of the document|
|<button>||Button or input tag|
|<canvas>||Canvas for animation or scripted content|
|<col>||Column in a table|
|<colgroup>||Group of columns|
|<datalist>||List of data for use in forms|
|<h1>||First level headline|
|<h2>||Second level headline|
|<h3>||Third level headline|
|<h4>||Fourth level headline|
|<h5>||Fifth level headline|
|<h6>||Sixth level headline|
|<head>||Head of the document|
|<kbd>||Text to be entered by the user|
|<mark>||Content that has been marked in some way|
|<meter>||A scalar measure|
|<q>||Short inline quotation|
|<strong>||Strongly emphasized text|
|<var>||Variable or user defined text|