Semantic vs. Non-semantic HTML

Semantic HTML

Semantic HTML allows us to convey meaning, not just visual presentation in our code. We can use heading elements instead of big bold text to indicate section headings. We can use articles, headers, footers and asides to mark up particular sections of content instead of using more meaningless divs.

We can use CSS to style both non-semantic and semantic HTML. We can make them look the same to sighted users. But the semantic HTML will pass on more meaning to non-sighted users such as the visually impaired and search engine robots.

Accessibility

Semantic HTML gives users using screen readers for the blind a better sense of our content. The code helps to tell the user when something is a heading, a section or other type of element.

Search Engine Optimization

Semantic HTML is also helpful to SEO as it helps search engines to understand how are content is organized. Search engines can see that an H1 is more important than an H3. They will also recognize that such heading are used to introduce the content that follows.

Non-Semantic HTML

Semantic HTML allows us to convey meaning, not just visual presentation in our code. We can use heading elements instead of big bold text to indicate section headings. We can use articles, headers, footers and asides to mark up particular sections of content instead of using more meaningless divs.

We can use CSS to style both non-semantic and semantic HTML. We can make them look the same to sighted users. But the semantic HTML will pass on more meaning to non-sighted users such as the visually impaired and search engine robots.

Accessibility

Semantic HTML gives users using screen readers for the blind a better sense of our content. The code helps to tell the user when something is a heading, a section or other type of element.

Search Engine Optimization

Semantic HTML is also helpful to SEO as it helps search engines to understand how are content is organized. Search engines can see that an H1 is more important than an H3. They will also recognize that such heading are used to introduce the content that follows.