html

HTML Semantic Elements

HTML semantic elements define the meaning of their use on a web page. The elements like <figure>, <form>, <header>, <figcaption>, <article>, etc., show the purpose in their keywords and thus falls under semantic elements category. Apart from these, a long list of HTML semantic elements is used for managing the content on a web page.

In contrary to this, non-semantic elements present the content only rather than defining it. such as <div>and <span>tags. Keeping in view the importance of HTML semantic elements, we have compiled this guide that presents the list of HTML semantic elements and their usage.

HTML Semantic Elements

The following are several widely used HTML semantic elements

  • <main>: The main content of the HTML document is described using this tag and is recommended to use only once in the whole document.
  • <article>: This semantic element shows that the article will be defined using this tag and used to write blog post, news articles etc..
  • <section>:It adds a new section on your page that may contain various other tags as well.
  • <header>:This element define the header part of your content and it can be used for section header, article header.
  • <footer>: As the name directs, it is used to add a footer to any content of your web page.
  • <aside>: The name of the tag directs that it is used for describing the side content or sidebar content or adding a note on a side.
  • <details>: This element is used to add extra details to the content and the viewer can hide/show that details as per their need.
  • <summary>: This element defines the content being described in <details>tag. This creates a heading and on clicking that heading, the content of details tag can be seen.
  • <figure>: As the name shows, this element allows you to add an image to your web page using the inline element <img>.
  • <figcaption>:This element is practiced to add a caption to any figure and is used inside the <figure>element.
  • <nav>: This tag is used to define bulk number of navigational links and is used with <ol>and <li>to navigate between numerous pages.
  • <mark>: It is used to highlight the specific part of the text.
  • <time>: This is used to define the time/date (in a human readable format) inside your document.

From the above stated information, you would have gained the preliminary description of various HTML semantic elements. In the upcoming examples, we have provided the usage of few semantic elements in several scenarios.

Example 1: Using <details>and <summary>

The <details>and <summary>are interlinked HTML semantic elements and the following code is used to represent their usage.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title> HTML Semantic Elements </title>

</head>

<body>

    <details>

        <summary>LinuxHint </summary>

        <p>It provides content for linux users, windows users, developers </p>

    </details>


</body>

</html>

In the above tag, a <details>element is declared in which the <summary>tag is embedded.

Output:

The whole content is enclosed using <details>tag and the <summary>tag is used to define a heading for that content.

Example 2: Using <fig>and <figcaption>

The following lines of code presents the usage of <fig>and <figcaption>semantic element.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HTML Semantic Elements </title>

</head>

<style>

    figure {

        border-style: solid;

        width: fit-content;

    }

</style>

<body>

    <figure>

        <img src="file:///C:/Users/adnan/Downloads/lh.jpg">

        <figcaption>Fig1: LinuxHint logo </figcaption>

    </figure>

</body>

</html>

The above code is described as,

  • the <figure>element contains <img> and <figcaption>tags
  • <img>is used to link the figure placed in our computer and the <figcaption>is for the caption of figure being imported.
  • the <style>tag sets the border-style and width of the <figure>element.

Output:

Example 3: Using <article>and <section>

The following code exercises multiple <section>tags in <article>element.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HTML Semantic Elements </title>

</head>

<style type="text/css">

   
    article{

        border-style: solid;

        padding: 4px;

    }

    section {

        border-style: dotted;

        margin: 2px;

    }

</style>

<body>

    <article>

        <section>

            <p>First Section </p>

        </section>

        <section>

            <p>Second Section </p>

        </section>

    </article>

</body>

</html>

The above code is described as,

  • an article using <article>tag is defined that contains two sections
  • the border of <article>is set to solid and padding of 4px is set
  • each section has a dotted border and a margin of 2px.

Note: The border styles, margin, padding is used just to differentiate the active space of each element.

Output:

The area inside the solid border is contained by <article>whereas the dotted borders shows the space occupied by each <section> element.

Example 4: Using <header>and <footer>

The <header>and <footer>are usually used to define the header and footer of a page or an element may contain them as well. The following code describe how header and footer are declared:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HTML Semantic Elements </title>

</head>

<style type="text/css">

header{

    background-color: lightseagreen;

    border-style: solid;

}

footer{

    background-color: orangered;

    border-style: solid;

}

</style>

<body>

    <header>Header </header>

    <p>This code represent the usage of header and footer </p>

    <footer>Footer </footer>

</body>

</html>

The code is described as follows,

  • a header and footer are defined using <header>and <footer>tag
  • a paragraph is declared between header and footer
  • background color and border-style of header and footer is defined in the <style>tag

Output:

From the above stated examples, you would have understood the functionality of various semantic elements.

Conclusion

The HTML semantic elements their selves contain the purpose of their usage, such as <article>, <aside>, <details>, .etc., These elements have aided various developers to write an understandable code to design web-pages. This post describes various HTML semantic elements and presents a set of examples to illustrate their usefulness. You would get the basic understating of these elements which would help in using the HTML in a different way.

About the author

Adnan Shabbir