Semantic HTML: Key Tags and Their Functions.

the moment i met HTML5 I am very pleased, it has introduced a whole set of new elements that make structuring pages very easy.

What is the semantics?

Semantics gives the content on the page meaning, structure, value and not just its style. The use of Semantic HTML has helped search engines categorize and categorize content, making site maintenance, restyling, and updating easier for developers.

Let’s talk about semantic HTML elements, their key tags and functions.

  • <header>
    The header element represents the introductory material for its sectioning parent element. A header can nest a group of introductory or navigational aids, and it can occur multiple times on a content page.

  • <nav>
    The nav element represents a section of a page that links to other pages or parts of a content page. <nav> Elements can easily access linked information with specific content in a page.

  • <section>
    The section element represents a general section of a document or application. This is a thematic group of material. A website home page may contain sections such as Introduction, Content, and Contact. This element may be nested. h1And p Tag as a child of the section element.

  • <article>
    The element represents the article in a content, it is a standalone element (independent). This element is used for blogs, forum posts and newspaper articles.

  • <figcaption>
    a. defines a caption for <figure> Element. This element adds a visual explanation to an image.

  • <main>
    Specifies the main content of the document. material inside <main> The element must not contain repeated content in the document such as navigation links, copyright information, sidebars, site logos and search forms. Only one <main> The element in the document can be used <main> The element must not be a descendant of every other element as in <nav>,

  • <aside>
    The element defines something separate from the content in which it is placed (such as a sidebar). The content on one side should be related to the surrounding material.

  • <details>
    Specifies additional details that the user can view or hide on demand. The element creates an interactive widget that the user can open and close. A variety of materials can be placed in <details> , Content can only be visible if the open attribute is set.

  • <summary>
    Defines a visual title for the tag <details> Element. The title can be clicked to view/hide the details.

  • <mark>
    element is used when you want to highlight parts of your text.

  • <time>
    The element is used to encode dates and times in a machine-readable manner so that users can add scheduled events to the user’s calendar, and search engines can produce better search results. It is a human-readable date/time.

  • <footer>
    The element specifies a footer for a document or section. This element usually contains the author, copyright information, links and contact information.
    I think you’ll agree that there are many benefits to using semantic HTML elements, making it much easier to structure pages. Despite the fact that non-sense elements prefer <div> And <span> tells us nothing about the content of it, but about semantic elements such as <form> , <img> clearly states its contents.

Leave a Comment