<h2 class="blockquote">Overview</h2><p>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.</p><p><img src="https://storage.googleapis.com/storage-codeclouds/xlarge/0509-What-Are-Semantic-Elements-in-HTML-Anyway_1200x450px-.webp" alt="0509-What-Are-Semantic-Elements-in-HTML-Anyway_1200x450px-.webp" srcset="https://storage.googleapis.com/storage-codeclouds/xsmall/thumbnail_0509-What-Are-Semantic-Elements-in-HTML-Anyway_1200x450px-.webp 245w,https://storage.googleapis.com/storage-codeclouds/small/small_0509-What-Are-Semantic-Elements-in-HTML-Anyway_1200x450px-.webp 500w,https://storage.googleapis.com/storage-codeclouds/medium/medium_0509-What-Are-Semantic-Elements-in-HTML-Anyway_1200x450px-.webp 750w,https://storage.googleapis.com/storage-codeclouds/large/large_0509-What-Are-Semantic-Elements-in-HTML-Anyway_1200x450px-.webp 1000w," sizes="100vw" width="1000px"></p><p>To approach this topic, we must first ask — what are semantics, outside of the computer world?&nbsp;&nbsp;&nbsp;&nbsp;<br>In the broadest sense, it’s simply the study of meaning. More specifically, the following is&nbsp;one of the definitions from Merriam Webster:</p><p>“<i>The historical and psychological study and the classification of changes in the signification of words or forms viewed as factors in linguistic development</i>.”</p><p>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.</p><p>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.</p><p>The 3 most important and well-known semantic elements are the &lt;html&gt;, &lt;head&gt;, and &lt;body&gt; 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:&nbsp;&nbsp;</p><h3 class="blog_h3">The Navigation Section Element</h3><p>Starting off with what’s likely at the top of your page, the &lt;nav&gt; 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 &lt;nav&gt; 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.&nbsp;</p><h3 class="blog_h3">The Main Element</h3><p>The &lt;main&gt; 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.&nbsp;</p><h3 class="blog_h3">The Article Contents Element</h3><p>The &lt;article&gt; 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.&nbsp;</p><h3 class="blog_h3">The Form Element</h3><p>The form element is used for users uploading content, commonly a contact form or submission of structured information like an address.</p><h3 class="blog_h3">Heading Tags</h3><p>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.&nbsp;</p><h3 class="blog_h3">Em and Strong</h3><p>You might be quite used to seeing the &lt;strong&gt; tag since its introduction with HTML5. It is commonly thought of as a replacement for &lt;b&gt; 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 &lt;strong&gt; 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.</p><p>The story with the &lt;em&gt; tag is similar, but with &lt;i&gt; instead of &lt;b&gt;. The italics in rendering is non-standard, and it is simply meant to denote emphasis in semantics.</p><h3 class="blog_h3">Figure and FigCaption</h3><p>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 &lt;figure&gt; and &lt;figcaption&gt; tags are used in a similar way, like this:&nbsp;</p><figure class="image"><img src="https://storage.googleapis.com/storage-codeclouds/large/code-screen-1.png" alt="code-screen-1.png" srcset="https://storage.googleapis.com/storage-codeclouds/xsmall/thumbnail_code-screen-1.png 245w,https://storage.googleapis.com/storage-codeclouds/small/small_code-screen-1.png 500w,https://storage.googleapis.com/storage-codeclouds/medium/medium_code-screen-1.png 750w,https://storage.googleapis.com/storage-codeclouds/large/large_code-screen-1.png 1000w," sizes="100vw" width="1000px"></figure><h3 class="blog_h3">Video, Audio, and Embed</h3><p>The &lt;video&gt; and &lt;audio&gt; tags are pretty self-explanatory and should contain a video or audio embed respectively. The &lt;embed&gt; tag is to denote any type of embedded media.</p><h3 class="blog_h3">Can I still use Divs?</h3><p>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.&nbsp;</p><p>One might use divs to style the buttons in a navigation bar or perhaps to layout an image and its caption inside the &lt;section&gt; or &lt;article&gt; elements.&nbsp;</p><h3 class="blog_h3">What It All Looks Like&nbsp;</h3><p>Here’s an example page to demonstrate a structure with semantics:</p><figure class="image"><img src="https://storage.googleapis.com/storage-codeclouds/large/code-screen-2-1.png" alt="code-screen-2-1.png" srcset="https://storage.googleapis.com/storage-codeclouds/xsmall/thumbnail_code-screen-2-1.png 245w,https://storage.googleapis.com/storage-codeclouds/small/small_code-screen-2-1.png 500w,https://storage.googleapis.com/storage-codeclouds/medium/medium_code-screen-2-1.png 750w,https://storage.googleapis.com/storage-codeclouds/large/large_code-screen-2-1.png 1000w," sizes="100vw" width="1000px"></figure><p>Even without all of the content inside these tags, can you imagine what the page looks like roughly?&nbsp;&nbsp;&nbsp;&nbsp;<br>When put into practice and with CSS, the above accomplishes something that looks like this:&nbsp;</p><p><img src="https://storage.googleapis.com/storage-codeclouds/large/0509.png" alt="0509.png" srcset="https://storage.googleapis.com/storage-codeclouds/xsmall/thumbnail_0509.png 171w,https://storage.googleapis.com/storage-codeclouds/small/small_0509.png 500w,https://storage.googleapis.com/storage-codeclouds/medium/medium_0509.png 750w,https://storage.googleapis.com/storage-codeclouds/large/large_0509.png 1000w," sizes="100vw" width="1000px"></p><p>For the complete code to achieve the above, head over to our <a target="_blank" rel="noopener noreferrer" href="https://codepen.io/codeclouds/pen/WNzWBMq?editors=1100">HTML5 Semantics Demo on codepen.io</a>.</p><figure class="image"><img src="https://storage.googleapis.com/storage-codeclouds/xlarge/0509-What-Are-Semantic-Elements-in-HTML-Anyway_-1200x110px.png" alt="0509-What-Are-Semantic-Elements-in-HTML-Anyway_-1200x110px.png" srcset="https://storage.googleapis.com/storage-codeclouds/xsmall/thumbnail_0509-What-Are-Semantic-Elements-in-HTML-Anyway_-1200x110px.png 245w,https://storage.googleapis.com/storage-codeclouds/small/small_0509-What-Are-Semantic-Elements-in-HTML-Anyway_-1200x110px.png 500w,https://storage.googleapis.com/storage-codeclouds/medium/medium_0509-What-Are-Semantic-Elements-in-HTML-Anyway_-1200x110px.png 750w,https://storage.googleapis.com/storage-codeclouds/large/large_0509-What-Are-Semantic-Elements-in-HTML-Anyway_-1200x110px.png 1000w," sizes="100vw" width="1000px"></figure><p><i>If you are a recent graduate and you’re looking to get an </i><a target="_blank" rel="noopener noreferrer" href="https://careers.codeclouds.com/jobs/front-end-developer/"><i>entry level Front-End developer job</i></a><i>, CodeClouds Labs is hiring! If you live in or near Kolkata, this might be the right place for you to grow.&nbsp;</i></p>

In this blog, we talk about semantic tags in HTML and how they help you structure your document.

What Are Semantic Elements in HTML, Anyway?

large_sales-thumb.webp

medium_sales-thumb.webp

small_sales-thumb.webp

thumbnail_sales-thumb.webp

sales-thumb.webp

thumbnail_Josh-Warfel.jpg

Josh-Warfel.jpg

thumbnail_Spencer-Leatherman.jpg

Spencer-Leatherman.jpg

How To Switch From Manual To Automated Testing As a Tester

An intro to Docker, Basic Image Setup, and Deploying Your First Container

Junior Developer vs Senior Developer: What’s the Difference?

7 Things to Know When Working From Home

9 Guides to Help You Prepare for Your Software Developer Interview

The Advantages and Disadvantages of Using GitHub

Docker, Kubernetes, and Helm: How To Up Your Containerization Game

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

The Differences Between MongoDB and SQLite

How to Insert Custom PHP to a WordPress Post

Why You Should Consider a Dedicated Offshore Development Team

Top 10 Website Designing Tips!

Seven steps to building the ultimate remote development team

Magento, Shopify, and BigCommerce: Which eCommerce Platform is Right for You?

How to Create a Better Subscription Business with an Alternative to Shopify Subscription Apps!