Semantic Elements in HTML

In this tutorial, you'll learn how to code HTML5 semantic elements for structuring a page.

HTML Semantic Elements

hgroupTwo or more headings that form a composite heading.
timeA date or date and time that can be parsed by a browser.
figureAn illustration, diagram, photo, code listing or the like that is referred to from the main content of the document.
figcaptionThe caption that identifies a figure.

Attributes of the Time Element

datetimeA date and time in a standard format that can be parsed by a browser.
pubdateA Boolean attribute that indicates that the date is the publication date for the article that contains the time element.

Notes on HTML Semantic Elements

  • Use the HTML5 semantic elements to indicate the structure of your pages.
  • Although there are other HTML5 semantic elements, these are the most useful ones that are currently supported by modern browsers.


<html lang="en">

        body {
            background-color: #fff200;

    <h1>HTML Semantic Elements</h1>
    <h4>hgroup Example</h4>
        <h2>This is a heading 2.</h2>
        <h3>This is a heading 3.</h3>
    <h4>time Example</h4>
    <p>Next year the meeting will be on
        <time datetime="2020-09-23">Sep 23rd</time>.</p>
    <h4>figure and figcaption Example</h4>
var today = new Date();<br>
document.writeln( today.getFullYear() ); <br><br>
            JavaScript code for getting the year.



The output would be as shown in the featured image of this article.

See also:

Leave a Comment