What is HTML Semantic?

HTML Semantic, also known as semantic markup, is the use of HTML tags that convey the meaning (or semantics) of its content. HTML Semantic tags provide additional information to define the roles and relative importance of the different parts of your webpage.

As opposed to non-semantic elements that don’t directly convey meaning and reveal nothing about their content; they include <div> and <span>

HTML Semantic Elements

Many websites contain HTML codes to indicate navigation, header, and footer. They are known as "Non-semantics." Below are examples of such codes.

<div class="nav">

<div class="header">

<div id="footer">

Meanwhile, HTML Semantic is of two (2) common types:

• HTML semantic tags for structure, and

• HTML semantic tags for text.

HTML Semantic Tags for Structure

Some of the tags include:

• <header> This tag is used to display content that should be considered the introductory information of a section.

• <nav> This tag is used for navigation links, and can be nested within the <header> tag.

• <article> This tag defines content that could stand independently of the page or site it’s on,

• <main> This tag contains the body of a webpage.

• <aside> This tag defines content aside from the main content, A common example is a sidebar.

• <section> This tag is for grouping nearby contents of a similar theme.

• <footer> This tag is used at the bottom of a page. It usually includes contact information, copyright information, and some site navigation.

HTML Semantic Tags for Text

Some of the tags include:

• <h1> (Heading)

• <h2> to <h6> (Subheadings)

• <p> (Paragraph)

• <a> (Anchor for hyperlinks)

• <ul> (Unordered list)

• <ol> (Ordered list)

• <em> (Emphasis in Italics)

• <strong> (Emphasis in Bold)

Benefits of Using HTML Semantics

• Semantic HTML helps to improve maintainability and accessibility.

• The pages made with semantic elements are much easier to read.

• Search engines will consider its contents as important keywords to influence the page's search rankings (SEO optimization)

• Screen readers can use it to help visually impaired users navigate a page.

Examples of HTML Semantic

For a complete list of HTML tags, visit w3schools tag reference.

Conclusion

In this article, we discussed HTML semantic tags and their advantages. I hope this article offered you insight into the works of semantics in HTML.

Comment your thought on the article, as well as any questions you might have.

Share with your Friends and Family!