Introduction

It is one thing to write a code and it is another to write a clean readable code. The way you group and wrap elements in HTML goes a long way to determine how clean and accessible the markup will be. In this article. I discussed the non-semantic and the semantic HTML elements and how it improves the accessibility, SEO and readability of webpage .

Definition

The HTML which stands for Hyper Text Markup Language is not a programming language but a markup language for the web that defines the structure of a content. It consists of elements which we use to wrap up different contents to give certain appearance or perform a particular function. With the use of opening and closing tags we can give line breaks, make texts italicize, enlarge fonts and several other.

Anatomy of an element

<p> My first Hello world </p>

<p>(opening tag): consists of the element type enclose in an opening and closing angle brackets. The opening tag indicates the start of an element
</p>(closing tag):consists of enclosing angle brackets and a forward slash before the element type. it is an indicator that the element has ended.
the content: this is the content within the element
The element: this is all together the opening tag, closing tag and the content.

Attributes:this is an additional info given to the element which do not appear in the content. eg id="wrapper" they serve as identifiers.

skeleton of the HTML

image source:natickhighwebdesign.com/anderson/fall2017.h..

Grouping of Elements.

Grouping in HTML used to be to done using the no-semantic elements(Div and span ) until introduction of semantic elements in HTML5 .

semantic HTML elements
non-semantic HTMLelements

The non-semantic tags.

These tags do not clearly define the content which they hold except indicated with attributes. they include :

< div>

This stands for division, it is used to group elements together in order to make codes look organised and less confusing. With the use of div you can style multiple elements at once by giving it the class or id attribute . If you had similar elements in your code you can group them into div's for easy styling in your CSS or Javascript.

image source:c-sharpcorner.com/UploadFile/b5be7f/working..

<span>

The span element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes using the class or id attributes. It should be used only when no other semantic element is appropriate. Span is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.

The semantic tags:

These are a number of additional tags that allows us to group HTML content together. Sematic HTML is using html to reinforce structural meaning. It’s about using tags, class names, and ids that reinforce the meaning of the content within the the element. These tags clearly gives the text it wraps around the role (or meaning) it takes on the page .

image source:iamweb.design/wsuk/2019/03/27/the-semantics..

The header element defines the contents that should be considered as introductory information on a page. It appears at the very top of every page of your website, be it a logo, tagline, search prompts or navigation menu.

image source:socialmediaexaminer.com/new-linkedin-header..

< nav>

The navigation menu are commonly placed at the top of a web page, in the sidebar, or the <footer>, but where ever they appear, ensure to wrap it in a <nav> tag.

< main>

The body of a page goes in the <main> tag . It is used between the header and footer elements to contain the primary content of the web page. The main cannot be descendants of any other tag but a direct descendants of the <body> element. It serves as a replacement for <div id="main" > used in the past to wrap page content.

note : there could be more than one <main> element on the web page in some cases .

<article >

The article element defines self contained content that could stand independently on the page on its own, example. blog posts, articles or any other content that could appear on another website as collective content. In some cases the <article> element are direct descendants of the <section> or <main> element. An article can also contain the <header>, <footer>, and <section> element within another page.

<section>

the section element is used in grouping together contents of a similar theme. A section is not self-contained like the article element, It is used to identify content that is a major sub-section of a larger whole. For instance when you are writing long post, newsletter, signup forms etc. In some cases <section> can be contained within the <article> element.

image source: geeksforgeeks.org/html-course-building-main..

<aside>

When your website has less important content that is not directly related to the main content of the page but adds complementary information about the page. It is advised to includes in the sidebar using the <aside> tag.

image source:developer.mozilla.org/en-US/docs/Learn/HTML..

<address>

The address element provides contact information for the nearest parent article or <body> element that contains it. The address is used inside the <article> to provide contact information for the article's author, or outside the <article> in the <footer> element as a direct descendant of the <body> element to provide direct information for the websites owner .

The footer comes at the base of a page or <section>. it is not typically a direct descendant of the body element but can also be written in the <main> element, <section > or <article>It contains things like the copyright notice, links related to the content and address info about the owner of the website . umerous tags.

image source:colibriwp.com/blog/how-to-edit-footer-in-wo..

Some other tags are

<picture>: similar to the <img> the picture element provides flexibility by allowing multiple source elements for the same resource which adapts based on media queries or image type support.

<code>: used mostly in technical writing to visually separate computer code from the rest of the sentence, by wrapping each of the occurrence in a <code> tag, the browser applies some default formatting to display it more appropriately.

<time>

<del>

<data>

<figure>

<var>

code example of a typical semantic tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>a family trip </title>
  </head>
  <body>

    <header>
      <h1>The  Travels around the world</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="health.html">Health</a></li>
          <li><a href="health.html">Places</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>Welcome!</h2>
      <p>This site is all about the adventures that families stand to experience by just taking  
         a leap of faith!</p>
    <section class="advert">
      <h2>BEST RESORTS AVAILABLE</h2>
      <p>We are assuring confort at its best with the best resorts across the nation...</p>
       <article>
         <h2>our packages are: </h2>
            <picture>
                <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
                <source media="(min-width:465px)" srcset="img_white_flower.jpg">
           </picture>
        <h2>STANDARD RAMADAN UMRAH TOUR</h2>
           <p>Saudi Arabia</p>
            <span>₦ 880,230</span>
       </article
    </section>
     </main>
    <aside class="advert">
      <h2>testimonials</h2>
      <p>these families are witnesses to our amazing packages </p>
    </aside>

    <footer>
      <small>Copyright © <time datetime="2019">2019</time> by I. Devlin</small>
    </footer>

  </body>
</html>

The semantic tags are of better advantage than the non-semantic tags because using <div> used to work great and give a nice structure just the way you wanted but then , you'd realise that at the end of the code there would be too many div tags and classes and this makes the code look complex and styling in CSS becomes a challenge. use of semantic tags paves way for :

Cleaner markup/ Improved code: it is easier to achieve cleaner, neater code and we can remove div tags and all the
Elegant forms: we can now have fancier forms. There will be different type of inputs, search and different fields for different purpose.

Improve the SEO positioning The SEO positioning can be affected, positively or negatively depending on factors such as: the way in which the content is written and a ‘responsive’ web page . The Specially- named containers can help search engines and browsers to easily identify how our pages are arranged. in a case such as google which uses an algorithm that analyzes the code of our website, uses the markup and the labels used to better understand the purpose of the page making the website easily accessible.
Consistency: when you get a new job or move to a new project you don't have to learn from scratch all the markup and understand the classes used across the codebase. It would be much easier to skim through a HTML file and get familiar with the codebase using the semantic tags

Conclusion

So to sum it up, it is undeniable that semantic HTML has become the cornerstone of web development. . Some of old the elements have become obsolete now and they are usurped by CSS and so the need to adopt semantic HTML element tags. For updates on my next article, follow up on Twitter

Semantic VS Non-Semantic HTML tags