HTML SEMANTIC ELEMENTS - FUNCTIONS AND ADVANTAGES

joebolite97

Published: 23 Aug 2022 › Updated: 23 Aug 2022 HTML SEMANTIC ELEMENTS - FUNCTIONS AND ADVANTAGES

HTML SEMANTIC ELEMENTS - FUNCTIONS AND ADVANTAGES

One of the ways to make your HTML code look simple and easy to comprehend is the use of semantic elements. Most developers just makes use of divs, span and other related elements without knowing when to use them, some just prefer to use divs, because its a divider element and most times a container.

Each element has its uniqueness, and specific area of use. The kind of element used determines the message its passes to the browser and the developer. Some codes are easy to read by other developers because of its simplicity and implementation of semantic elements.

Semantic elements in use

WHAT ARE SEMANTIC ELEMENTS

Semantic elements are elements which clearly defines its meaning and content to the browser and the developer. Semantic element indicates what its content stand for by giving some details in the elements name. Examples of semantic elements are:

- <table>          -  Indicates a table
- <form>           -  Indicates a form
- <code>           -  Indicates a code section and displays as a code
- <article>        -  Indicates an article
- <figure>         -  Indicates a figure e.g. Image
- <figcaption>     -  Indicates caption for the figure
- <legend>         -  Indicates a caption for a field set element
- <time>           -  Indicates time and date
- <header>         -  Indicates a header or head of a page or section
- <main>           -  Indicates the main and important part of a page
- <body>           - Indicates the body of a page

Semantic elements are easy to maintain when implemented correctly, and helps your site to be easily accessible.
Semantic elements also helps search engines and other applications to determine important sections of your page.

some other semantic elements are

<p>        -  paragraph
<section>  -  Section 
<nav>      -  Navigation
<footer>   -  Footer of a page
<address>  -  Indicates an address text or section

All elements can be styled as a box, meaning they can have background, border etc., It doesn't always have to be a div. Although some elements are inline while some are block, but this can always be changed with your CSS.

NON SEMANTIC ELEMENTS

Non Semantic elements are elements whose contents are not easily understood, unless specified or stated using an id = "#", or class="." Examples of non semantic elements are:

<div>
<span>

SUMMARY

As a developer, either beginner, intermediate or advanced, it is advisable to make use of semantic elements, to make your code neat and readable, and also when implementing it with other programming languages you will not have issues.

On the other hand, if the case requires you to use a non semantic element, always include an id or a class to specify its purpose and content.

Thanks for stopping by
Until next time,
Stay woke✌️

All images are mine except stated otherwise.

Leave HTML SEMANTIC ELEMENTS - FUNCTIONS AND ADVANTAGES to:

Written by Cool Joe

Guitarist | B. Agric | Computer geek | Entrepreneur | Developer

Best Posts From Cool Joe

We have not curated any of joebolite97's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

HTML SEMANTIC ELEMENTS - FUNCTIONS AND ADVANTAGES