Semantic Tags in HTML help you to define the structure of a web page, and define what your page will mean visually to the human reader in a way computers can understand.
To approach this topic, we must first ask — what are semantics, outside of the computer world?
In the broadest sense, it’s simply the study of meaning. More specifically, the following is one of the definitions from Merriam Webster:
“The historical and psychological study and the classification of changes in the signification of words or forms viewed as factors in linguistic development.”
Much in the same way that semantics classify what words mean, semantics in HTML classifies what your document actually means to the human reader, not just how it is rendered on the web page. Semantic elements are used to define the human structure of your webpage in a computer readable way. This is important for a variety of uses, including search engines, browsers, and even disability tools like screen readers. Non-semantic elements are used wherever elements are needed in an abstract way.
The way I like to think of it is, if you are handed a printout of an HTML document without knowing what the CSS looks like, proper semantics will still let you have an idea in your head about what the content actually means and how it’s organized on the page, as compared to the good ‘ole nested div soup pages we’ve seen in the past.
The 3 most important and well-known semantic elements are the <html>, <head>, and <body> tags, which every valid html page should contain. Beyond that, there’s more elements you can use, a lot of them introduced with HTML5. The following are some examples:
The Navigation Section Element
Starting off with what’s likely at the top of your page, the <nav> element is to denote a section of your page as where the navigation links are. This could be site navigation or in-page navigation like a table of contents. Inside the <nav> element, it’s common to use an unordered list to define the links in the navigation section. It’s commonly seen in the header, but there’s no requirement it is placed there.
The Main Element
The <main> element should be used to denote the main content of a web page. For example, if it’s a blog article, then the article content itself would be in the main section. This should contain the reason the user clicked on the page or what is promised in the page title.
The Article Contents Element
The <article> element is different from the main element, as it’s meant to represent a stand-alone piece of content, meant to be separate from the content on the page, perhaps meant to be distributed on its own.
The Form Element
The form element is used for users uploading content, commonly a contact form or submission of structured information like an address.
Heading Tags
Heading tags are important for helping search engines understand the structure of the content on your pages. There are different levels of headings. H1 should generally only be used once per page, and H2 and so on are used to structure subheadings in levels of nesting or importance.
Em and Strong
You might be quite used to seeing the <strong> tag since its introduction with HTML5. It is commonly thought of as a replacement for <b> as a non-CSS way to denote bold text. However, the bold rendering is just something browsers have chosen to do outside of the actual standard to facilitate the transition. The <strong> tag is meant to be merely semantic, and actual visual boldness of a font should be defined in CSS with the font-weight property anyway. This tag is simply to have it defined semantically that the text inside it is important, whether that’s visually apparent to the reader is a separate thing that should be handled with styles.
The story with the <em> tag is similar, but with <i> instead of <b>. The italics in rendering is non-standard, and it is simply meant to denote emphasis in semantics.
Figure and FigCaption
Imagine you are reading a textbook or an instruction manual, there might be a figure next to a body of text. That figure likely has a caption describing it. The <figure> and <figcaption> tags are used in a similar way, like this:
Video, Audio, and Embed
The <video> and <audio> tags are pretty self-explanatory and should contain a video or audio embed respectively. The <embed> tag is to denote any type of embedded media.
Can I still use Divs?
Yes, as long as you’re not defining the overall structure of your page with them. Divs help create visual structure and help with applying style to your page. In a page that’s defined properly with semantic tags, these should be used when the tag is not dividing things by their general purpose or broad layout, but rather their specific presentation.
One might use divs to style the buttons in a navigation bar or perhaps to layout an image and its caption inside the <section> or <article> elements.
What It All Looks Like
Here’s an example page to demonstrate a structure with semantics:
Even without all of the content inside these tags, can you imagine what the page looks like roughly?
When put into practice and with CSS, the above accomplishes something that looks like this:
For the complete code to achieve the above, head over to our HTML5 Semantics Demo on codepen.io.
If you are a recent graduate and you’re looking to get an entry level Front-End developer job, CodeClouds Labs is hiring! If you live in or near Kolkata, this might be the right place for you to grow.
