Semantic Tags

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 Meaning, now we will 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:

1. SEMANTIC TAG

2. NON-SEMANTIC TAG

   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.

   Understanding both is very much important specially for learners who want to join website development industry. The concepts of semantic tag is an important part of every web development course too.

   SEMANTIC TAGS

   For example, 1. an example of semantic tags can be my 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 tag we come to know that a paragraph must be written inside it.

   3.And by looking at my tag we come to know that the content of img type has come inside it.

   NON-SEMANTIC TAGS

   But if we talk about a tag or a 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.

   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 tag which comes first in our website.

   Second is our tag, we use it to display the main content inside our website. Next comes our 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=”#”>link1</a><a/li>

   <li><a href=”#”>link2</a><a/li>

   <li><a href=”#”>link3</a><a/li>

   </ul>

   </aside>

4. <nav>

   <ul>

   <li><a href=”#”>HOME<a/></li>

   <li><a href=”#”>ABOUT<a/></li>

   <li><a href=”#”>CONTACT<a/></li>

   </ul>

   </nav>

In this way we use these tags to create semantic markup of our web page or web site.

Differences from other tags

Semantic tags

1. For example, clearly indicates whether it contains introductory material or navigation links. 2. indicates thematic grouping of content.

   Non-semantic tags

   1. Non-semantic tags such as * and ' 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. To learn about these in a better way, join 100% job-oriented web designing courses in Delhi offered by ADMEC Multimedia Institute. These programs cover HTML5 & CSS3 training for professional level.