DEV Community

Ansub Khan
Ansub Khan

Posted on

1

What is Semantic HTML?

What is Semantic HTML?

  • Semantic HTML is a coding style where elements which we use actually have some meaning. Semantic simply put means a logic that has an actual meaning hence comes the name: Semantic HTML, an HTML which is a logic and also has a meaning.

  • This practice is good for Search Engine Optimization (SEO)

  • it is also good for accessibility, especially for visually impaired people who rely on browser speech, screen readers to interpret page content clearly.
    Here is how a non-semantic HTML looks like:

IMG_0135.jpg

here is how a semantic HTML looks like

IMG_0136.jpg

Remember:

  • to write semantic HTML, avoid using div tags everywhere, instead use elements like header, nav, section, article, aside, footer.

  • all these elements are built with a specific purpose - they are good for SEO too.

In Simple Words:

non-semantic elements: <div> and <span> tells nothing about its content.

Semantic Elements: <form>, <table>and <article> -> clearly defines its content.

if you want any help with the Semantic HTML or any other query then please contact me on my Twitter

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay