We know that HTML is a markup language and within it we also read semantic markup. Semantic markup means we talk about the meaning of content. It is important to understand for every website designer. Let’s talk about such tags that as soon as we read them, we can know which code is written inside it.
We have 2 types of tags
One is our semantic tag and the other is non semantic tag and very basic terms, as soon as we see a semantic tag, we can understand its meaning and find out what content is written inside it.
And non semantic tag, looking at which we do not understand what content is written inside it.
SEMANTIC TAGS For example: 1. An example of semantic tags can be my <heading></heading> tag, that is, by looking at it we come to know that it will have something written about the heading inside it. 2. Looking at the <p></p> tag we come to know that a paragraph must be written inside it. 3. And by looking at my <img> tag we come to know that the content of img type has come inside it.
NON-SEMANTIC TAGS But if we talk about a <div></div> tag or a <span></span> tag then we do not know what content is written inside it.
When we see these tags for the first time, we get a little confused and the reason for this is that these are non-semantic tags. Their meaning does not correspond to their markup.
But here a question arises that why do we use semantic tags. The very basic answer is that it makes things more meaningful, our cood becomes more meaningful.
You can learn adding these tags practically under courses at web development institute in Delhi i.e. ADMEC Multimedia Institute.
Being meaningful means that our layout will become more accurate. Its second advantage is that our SEO will become more friendly. Being SEO friendly means that our website will rank higher. If we have used semantic markup properly inside that website then Screen readers understand this very well.
These are the main 2 reasons why we should use semantic tags.
Now let us talk about some semantic tags that we use inside our website.
First of all, we talk about the <heading></heading> tag which comes first in our website. Second is our <main></main> tag, we use it to display the main content inside our website. Next comes our <footer></footer> tag which we use at the bottom of our website, inside this we provide information about contact.
Apart from these there are some other semantic tags also as 1. <article> <h2>article title</H2> </article> 2. <section> <P>section title</p> </section> 3.<aside> <ul> <li><a href="#">link 1</a><a/li> <li><a href="#">link 2</a><a/li> <li><a href="#">link 3</a><a/li> </ul> </aside> 4. <nav> <ul> <li><a href="#">HOME<a/></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTAC</a><\li> </ul> </nav> In this way we use these tags to create semantic markup of our web page or website. This part will be unclear to those which are very new to HTML, hence it is important to learn it from scratch at HTML5 institute in Delhi from experts.
Differences from other tagsSemantic tags 1. For example, <header> clearly indicates whether it contains introductory material or navigation links. 2.<section> indicates thematic grouping of content.
Non-semantic tags 1. Non-semantic tags such as *<div> and <span>' are generic containers used for layout and styling without adding any semantic meaning. 2. Non semantic tags do not contribute to SEO because they do not provide information about the content. 3. Non-semantic tags, while useful for layout and styling, do not provide the same level of clarity. 4. If we use only non semantic tags then it can make our website difficult to use.
So, this is it for today, for more learning, you can consider joining web design courses in Delhi from a reputed training institute like ADMEC Multimedia where placement support is 100% and it has been offering training since last 18 years in the domain of web site design and development.