CodeClouds Color Logo CodeClouds White Logo

UI/UX | 28 September 2022

What Are Semantic Elements in HTML, Anyway?

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.

What Are Semantic Elements in HTML, Anyway?

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: 

figure and figcaption tags

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:

the structure with semantic tags

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: 

demo of semantics in HTML5

For the complete code to achieve the above, head over to our HTML5 Semantics Demo on codepen.io.

front-end jobs for beginners

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. 

Originally written September 28, 2022. Last updated

 Views

Written by CodeClouds

CodeClouds provides effective and quality solutions for various web technologies. We have responsive and swift communication 18/5 and deliver quality development services around the globe.

  • facebook
  • twitter
  • linkedin
  • pinterest
  • whatsup
Related Articles
The Basics of UI & Navigation Design

UI/UX | 20 January 2021

The Basics of UI & Navigation Design

Your navigation UI is one of the most important parts of your site, but so many designers neglect to give it the attention it needs. Today we’re going to be going over 8 principles of navigation design to help you get your users where they need to be.

What Will JavaScript Frameworks Look Like in the Next 10 Years?

JAVASCRIPT, UI/UX | 13 April 2020

What Will JavaScript Frameworks Look Like in the Next 10 Years?

It’s the dawn of a new decade, and there are no-doubt many changes ahead of us. What do the 2020s have in store for JavaScript Frameworks?