DEV Community

Cover image for What is Semantic HTML?
Bronwen Gien
Bronwen Gien

Posted on

What is Semantic HTML?

Producing semantic HTML originates from the desire to communicate, which should be the primary purpose of every online page. By including semantic tags in your text, you convey more information about it to the browsers and, importantly, search engines.

Semantic HTML tags indicate what the different sections of an HTML Document are instead of merely how they look. This is a key principle in web design and semantic HTML tags make it easier to see what information is on the page and its importance.

Table Of Contents

  1. What is semantic HTML? 
  2. Semantic HTML tags
  3. Conclusion

What is semantic HTML?

Not all tags are created equally in HTML.  Some are semantic tags, and some are non-semantic. Elements such as <div> and <span>  tell the browser nothing about the content, making them non-semantic.

Semantic elements such as <header><nav>, and <footer> provide browsers with a clear definition of the content within the tag that defines its content.

Semantic HTML tags

Header:

The <header> tag is normally used for a banner image or a series of navigational links (see <nav> below). The typical contents of a <header> element are elements like an <h1> tag or a logo.

Image description

For more code examples that you can copy and explanations of the different Semantic HTML sections click here

Top comments (0)