Semantic Elements

Previously we discussed on the inline and block elements which are very essential in html, in this article we will look at semantic elements which are crucial in html, it clearly describes its meaning to both the browser and the developer. let's look at it briefly:

SEMANTIC ELEMENTS

A semantic element is an element of code that uses words to clearly represent what that element contains, it is majorly used to create Web pages. it helps communicate its meaning to both the developer and the browser. These elements clearly define its content and it also clearly describes their meaning in a human- and machine-readable way. By adding semantic HTML tags to your pages, you provide additional information that helps Google understand the roles and relative importance of the different parts of your page.

We have two types of semantic elements which are semantic elements and non semantic elements which usually tells us nothing about its content e.g. the <div> and <span> etc. and semantic elements like the <form> and <table> which tells us or clearly defines it contents. We see in the <footer> element which specifies a footer for a document or section. Also in <figure> and <figcaption> elements which helps to have captions with images. Which helps add a visual explanation to an image and images and captions can be grouped together in <figure> elements.

Lets look at some examples of semantic elements

<header> and <nav>: The header represents a container for introductory content or a set of navigational links. while the <nav> bar helps defines navigation links. As we can see in the picture below which aid enclosed the <nav> bar with the following example:
```
<header>
    <nav>
      <a href="#">HOME</a>
      <a href="#">THINGS CAT LOVES</a>
      <a href="#">ABOUT CATS</a>
    </nav>
  </header>
```
<Form>: It represents a document section containing interactive controls for submitting information. As we will see in the table below:

<form>
      <label for="f name">CAT NAME</label>
      <input type="text" id="catname" name="CAT NAME" /><br />
      <label for=" SPECIE">SPECIE</label>
      <input type="text" id="SPECIE" name="SPECIE" />
    </form>

<figure> and <figcaption>: The <figure> caption adds visual explanation to an image and the <figcaption> elements describes the caption. Lets check the example below:

<figure>
      <img src="cats.jpg" />
      <figcaption>Beautiful cats</figcaption>
    </figure>

<footer>: It is always located at the base of a page or section. it contains copyright and authorship information or navigational elements pertaining to the contents of the parent element. Lets see the example.

 <footer>
        &#169; 2022
    </footer>

<section> : It is a way of grouping together nearby content of a similar theme. A section tag differs to an article tag because it isn’t necessarily self-contained. below is the example.

<section>
      <figure>
        <img src="cats.jpg" />
        <figcaption>Beautiful cats</figcaption>
      </figure>
    </section>

    <section>
      <form>
        <label for="f name">CAT NAME</label>
        <input type="text" id="catname" name="CAT NAME" /><br />
        <label for=" SPECIE">SPECIE</label>
        <input type="text" id="SPECIE" name="SPECIE" />
      </form>
    </section>

<Aside>: It represents a portion of a document whose content is only indirectly related to the document's main content.lets look at the example as it is being enclosed in a <p> tag.

   <p>
      The cat (Felis catus) is a domestic species of small carnivorous mammal.
      It is the only domesticated species in the family Felidae. 
   </p>

  <aside>
      <p>
        A cat can either be a house cat, a farm cat, or a feral cat; the latter
        ranges freely and avoids human contact.
      </p>
    </aside>
    <p>
      Domestic cats are valued by humans for companionship and their ability to
      kill rodents.About 60 cat breeds are recognized by various cat registries.
    </p>

<Article>: It represents a self-contained composition in a document, page that can stand on it on as we will in the codes below:

<article class="CATS">
      <h1>Domestic Animals</h1>
        <h2>26 August 2022</h2>
</article>

WHAT IT WILL LOOK LIKE ON THE WEB PAGE WHEN FUSED TOGETHER

Here we can see how all the semantic elements worked together to make the webpage readable, starting from the header to the footer. Even though it is not at it best, but for teaching purpose it is recommendable.

BENEFITS OF SEMANTIC ELEMENTS

To look at the benefits of semantic elements, we tend to see that it is much easier to read when it has been applied to our codes and as a programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand the code, the easier it makes your job. Also it leads to consistent code and it is easy to be accessed.

CONCLUSION

In this article, we discussed what HTML semantic tags are and the benefits of using it . it also expose us to understand how semantic elements can improve the structure of our web page.

I hope this article was helpful. Thanks for reading.

Cyril Ekpenyong's Blog

Cyril Ekpenyong's Blog

Semantic Elements