How to Implement Semantic Tags in HTML?

The semantic elements are elements with a meaning, it clearly describes its meaning to both the browser and the developer. It provides information about the contents of those tags that goes beyond just how they look on a page. Text that is enclosed in the **<code>** tag is immediately recognized by the browser as some type of coding language. Instead of trying to render that code, the browser understands that you are using that text as an example of the code for the purposes of an article or online tutorial.

  • The main tag specifies the main content of a document. The content inside the main element should be unique to the document, it should not contain any repeated content such as sidebars, navigation links, copyright information, side logo, or such forms.

  • The detail tag specifies additional details that the user can open and close on demand. It is often used to create an interactive widget that the user can open and close. By default, the widget is closed, when opened it expands and displays the content within it.

  • The summary tag defines a visible heading for the detail element.