SEMANTIC HTML

What Is Semantic HTML

Semantic HTML introduces meaning to the code written in a webpage. In semantic HTML the elements used here can reveal to web developers and browsers what they actually do and what content should go in it. It also helps developers to know where the elements are placed based on the name of the element.

Semantic HTML Element

As we have learned that Semantic HTML display or use tags that convey information about their content, some of the main semantic HTML elements include;

Header Element
Nav Element Main Element
Footer Element
Figure Element and Figcaption Element
section Element and Article Element
Aside element
Address Element
Details Element
Mark Element
https://web.dev/learn/html/semantic-html

In order to understand further the Semantic HTML elements we will focus at each at at a time in order to know how to use them appropriately

Header Element

This element describes the content at the top of the webpage

Navigation Element

This element contains the the navigational links of the webpage. It is normally placed in the Header Element or the Footer Element.

Main Element

This element encapsulates the main content of a page, it is placed between the header/navigation and the footer area

Footer Element

This Element contains that page's footer content at the bottom of the Body Element

Figure Element and Figcaption Element

The Figure Element is used to enclose media such as images, diagrams and code snippets.
while the Figurecaption Element is used to describe the media content encapsulated within the Figure Element.
These two elements are normally used together.

Section Element and Article Element

The Section Element is used to classify a group of elements in a document such as chapters, headings or any other area of the document with the same theme
while the Article Element contains content or information that make sense on its own such as articles, blogs and comments

Aside Element

This Element is used to give additional information which is not required but it helps improve the understanding of the main content as it enhances another element.
Usually this extra information is displayed in a sidebar o a location that its not covering the main content

Address Element

This Element represents the contact information of a business or person

Details Element

This Element contains the Summary tag and any other additional details which are only visible when the element is in an open state

Advantages Of Using Semantic HTML

Accessibility; Semantic HTML make it possible for webpages to be accessible for mobile devices and people with disabilities.
This is because screen readers and browsers are better able to interpret the content of the site.

Readability; Semantic HTML makes the source code of the website easier to read for other web developers.

Semantic HTML improves the website's Search Engine Optimization(SEO).SEO is the process of increasing the number of people that visit a webpage.
Search engines are better able to identify the content of a website and weigh the most important content appropriately with a better SEO.

Limitations Of Using Semantic HTML

Increased complexity
A learning curve for new developers
It requires ongoing maintenance
learning semantic html made easy