Home / Web / What is semantic HTML and why use semantic HTML?
semantic html

What is semantic HTML and why use semantic HTML?

Semantics means using “meaningful” language; in Web Development, this means using tags and identifiers which describe the content.

Semantic HTML: Semantic HTML where the tags are used to structure the content are selected and applied appropriately to the meaning of the content.

For Example: A paragraph tag should only be used to indicate a paragraph. It should never be used for applying space to a web page.

Non-semantic elements: <div> and <span>

Semantic elements: <form>, <table>, and <img>

Why semantically correct HTML is better to preferred for development?

  • Ease of use: Semantic HTML is clean HTML format. It is much easier to read & edit markup that is not littered with extra tags and inline styling. Clean HTML also saves time and cost when other people have to interact with it. So the size of HTML page is small, so it loads quickly.
  • Accessibility
  • Search Engine Optimization: Semantic HTML helps to increase SEO of you website because of it’s clean code and load time.
  • Repurposing

Use Semantic Tags correctly in your webpage

When you start to use semantic tags element to convey meaning rather than presentation, you need to be careful about to use them correctly simply for their common display properties.

Some of the most commonly misused semantic tags include:

  • Blockquote: use the <blockquote> tag for indenting the text that is not a quotation. Use CSS margins for that.
  • <p>…</p>: Some people used paragraph tag to give space like <p>&nbsp;</p>. Instead of this use margin style from CSS.
  • H1-H6: Header tags are used for making font bigger and bolder. If text is not a headline then , then used font-weight and font-size style property for making it bigger and bolder.

 Which are the new Semantic Elements in HTML5?

HTML5 offers new semantic elements these are:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

About Helpservices

About This site (allhelpservices.com) is dedicated to helping other bloggers learn the skills of blogging, wordpress, education, technology, social media sharing , SEO, Electronics, Earn Money From Blogging, Web hosting and web share their own experiences and promote the blogging medium. We started Allhelpservices in August 2015 mainly because we wanted to keep a record of what we wear learning from development and because we wanted to connect with other learners.

Check Also

style sheet

What are ways of inserting a style sheet?

Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps ...

Leave a Reply