Skip to main content

Command Palette

Search for a command to run...

Semantic Tags in HTML..

#semantic tags

Published
2 min read
Semantic Tags in HTML..
A

BTech CSE student at IIIT Ranchi | Aspiring Software Engineer | Passionate about coding, building innovative projects, and solving real-world problems through technology. Currently diving into web development, Machine learning and deep learning. Always learning, creating, and pushing boundaries! #Tech #Coding

Hello everyone Today we are going to discuss about semantic tags. Before that we understand why we are studying this topic.. In simple way if we talk about old html in which we are using div tag , p tag , h1 to h6 tag , span tag but it was not clear for a developer that which part is header which part is content and which is footer..

Semantic tags are basically self explanatory tags using which any developer can easily solve the above problems.. First tag is header tag which tell us the main heading of the content and reading the header tag can easily understood that it is at the topmost of the code..

    <header>
        This is a header

        <nav>
            <a href="">1</a>
            <a href="">2</a>
            <a href="">3</a>
        </nav>
     </header>

Another tag is nav tag in which we use anchor tag . This is also called hyper reference this tag is used to interlink the webpages.. Next tag is main tag which include the main content of the code and anyone can easily understand it.. the main body content is written within this tag..

<main>
        This is main content
    </main>

Some other tags like aside tag , article tag , detail tag these all are used like div and span tag which we have already used so using these tag clearly indicate the subparts of the content..

  <article>
        This is a simple article
    </article>

    <aside>
        <p>This is a first menu</p>
        <p>This is a second menu</p>
    </aside>
 <details>
        <summary>This is a summary</summary>
        This is detail. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi, voluptate?
    </details>

    <footer>
        This is a footer
    </footer>

Footer tag include the last part of content and last part of code.. It is not necessary that footer tag is only used for including last part but it can also be used in the main content or in the header section.. but again as the name suggest its working so they are used as their name..

So this was all about semantic tags and I hope it will help you a lot.. Thank you.

More from this blog

Untitled Publication

28 posts

Currently pursuing Bachelor of technology (Computer science and Engineering) from INDIAN INSTITUTE OF INFORMATION TECHNOLOGY RANCHI,JHARKHAND..