Scribd
Upload
18 views1 page

Introduction to Semantic HTML _ Semantic HTML _ Codecademy

Semantic HTML uses elements that provide meaning about the content, improving accessibility, SEO, and code readability. Unlike non-semantic elements like <div> and <span>, semantic elements such as <header> convey context about the information contained within. This approach enhances user experience and makes web pages easier to navigate, similar to labeled aisles in a store.

Uploaded by

rajjrrathore
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views1 page

Introduction to Semantic HTML _ Semantic HTML _ Codecademy

Semantic HTML uses elements that provide meaning about the content, improving accessibility, SEO, and code readability. Unlike non-semantic elements like <div> and <span>, semantic elements such as <header> convey context about the information contained within. This approach enhances user experience and makes web pages easier to navigate, similar to labeled aisles in a store.

Uploaded by

rajjrrathore
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Introduction to Semantic HTML

2 min

When building web pages, we use a combination of non-semantic HTML and Semantic HTML. The word
semantic means “relating to meaning,” so semantic elements provide information about the content
between the opening and closing tags.

By using Semantic HTML, we select HTML elements based on their meaning, not on how they are
presented. Elements such as <div> and <span> are not semantic elements since they provide no context
as to what is inside of those tags.

For example, instead of using a <div> element to contain our header information, we could use
a <header> element, which is used as a heading section. By using a <header> tag instead of a <div> , we
provide context as to what information is inside of the opening and closing tag.

Why use Semantic HTML?

Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with
disabilities as well. This is because screen readers and browsers are able to interpret the code better.

SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing
the number of people that visit your webpage. With better SEO, search engines are better able to
identify the content of your website and weight the most important content appropriately.

Easy to Understand: Semantic HTML also makes the website’s source code easier to read for other
web developers.

To better understand this, you can think of comparing non-semantic HTML to going into a store with no
signs on the aisles. Since the aisles aren’t labeled, you don’t know what products are in those aisles.
However, stores that do have signs for each aisle make it a lot easier to find the items you need, just like
Semantic HTML.

You might also like