Semantics refers to adding meaning through language and on the web, that translates to using specific languages and syntaxes to add meaning to content.
It’s an incredibly important part of the modern web and can have a huge impact on the effectiveness of your sites.
If we start with the very basics, web semantics allow us to control the organisation and display of our content.
Although each site is unique, certain conventions have evolved over time in the commonly recognised page elements.
Most pages, for example, contain some form of navigation, search capability, branding region, footer and main content.
By using consistent semantic markup to identify these common elements, we make it easy for user agents to identify and properly present those elements to viewers.
This may seem trivial, but in some cases, such as with assistive technology, identifying content semantically is critical to ensuring functionality and providing easy access to page content.
Semantics can help in other ways as well. A huge part of the success of the web has been the rise in the way content is accessed and shared.
Automated services like search engines make it easy for users to find and access the content.
If that content is marked-up semantically, it’s much easier for it to be indexed and found. Put simply, it makes your content more relevant.
Writing proper markups should be the goal of every web designer. It’s important to realise, however, that there are tangible benefits to marking-up your content semantically.
In this article, we’re going to focus on the proper semantic uses of HTML5 elements as well as exploring some of the syntaxes that can help extend the semantic value of your markup and help you create more meaningful content.
HTML is the backbone of the Web
It’s the common language that forms the structure of every single Web page. As such, semantics is at the heart of what HTML actually does.
As a markup language, Its tags are used to identify types of content on the page.
A paragraph tag, for example, identifies the content as belonging to a paragraph, the most basic element for grouping content available.
However, if that content needs to be identified in a more specific way, let’s say like here we have a quoted source, then it’s better to use a tag that more accurately reflects the content.
Well, in this case, a blockquote. You can even further refine the quote by providing a cite reference for attribution.
This type of markup creates more meaningful content and it’s one of the biggest responsibility of Web authors.
That means as an author, it’s critically important that you understand the meaning behind the elements that you use and when they’re appropriate. In many cases, this is pretty simple.
HTML by design, features a limited number of elements. Just over 100, if you feel like counting.
And if you’ve been writing HTML for any amount of time, you’re probably already familiar with the bulk of them.
Some, like headings and paragraphs, you’ll use almost every time you create a new HTML document.
Others, like the samp element, which identifies content generated by a computer, are so specialised that you may never need to use them.
The trick is to understand a tag’s meaning and the intent behind using it, rather than focusing on its default formatting.
Many authors do just that as they learn HTML. Using the italic or em tag, for example, when they wish to italicise text without actually knowing there are specific meanings behind each of those tags.
In other instances, determining which tag to use is often a judgment call. As we mentioned before, HTML by design has a limited set of tags.
That means that you’ll often find yourself marking up content that has no clear tag set designed to represent it. Take a chat log between two people, for example.
Here we have a conversation between Beth and Sam. Beth has got the job and Sam is really stoked about that.
So how would we mark this up in HTML?
Well, if you do a quick Google search, you’ll probably find numerous approaches and opinions on properly marking it up.
Since there’s no specific tag set designed to represent it, authors are left to decide for themselves which elements best semantically define the content in question.
Now, over time, certain standards often evolve, but in many cases it’s a pure judgment call on the part of the author in terms of how to represent the content.
Now, this should illustrate how important it is for you as an author to understand the semantic meaning behind the tags that you use.
If you don’t have a solid understanding of their semantics, your content is never going to be as meaningful as it should be.
That’s especially true for HTML5.
Improved semantics was one of its main focuses with the addition of new semantic elements, new rules for creating document outlines, and new content models that give a more specific context for when and how elements are used.
And we can’t stress enough how important it is for new authors to read through the HTML5 specification and keep it bookmarked as a handy reference when deciding how to structure and mark up content.
We especially like the Index at the end of the spec that lists every single HTML element.
This allows you to quickly skim through them, read through their properties, and explore the element in more detail by jumping to its definition within the spec.
We highly recommend bookmarking this and then using it as a way of becoming more familiar with the semantics behind the elements that you use.
