Semantics means using “meaningful” language; in Web Development, this means using tags and identifiers which describe 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.
- Search Engine Optimization: Semantic HTML helps to increase SEO of you website because of it’s clean code and load time.
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> </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: