Semantics

Semantics

It is critical to understand the meaning of words when communicating in any language. And if it's computer-to-computer communication, it's even more crucial. As a result, HTML5 adds more semantic features to the code, making it easier to grasp.

Hence, the meaning of words and sentences is defined by semantics. Furthermore, both the browser and the developer can understand what the semantic elements signify.

Those elements which have a meaning are known as semantic elements such as < article>, < table>, < form>, etc. This meaning is understood by both the developer and the browser. Some semantic elements which can be used to define various parts of a web page are as follows:

  • < article>

    The element contains independent and self-contained content. It can be used in newspapers, forums, blog posts, etc.

  • < header>

    The introductory data or navigational links can be represented by a container using the tag. The element can contain one or more heading elements(H1-H6), logos, ownership information, etc.

  • < footer>

    This element defines a footer for a section or a document. It usually contains authorship information, site maps, links to different sites, etc. We can have multiple footer elements in a document.

  • < section>

    This element defines a section in a document. A webpage can consist of many sections and every section’s content can vary. Having headings for each section is not necessary.

  • < nav>

    This element defines a set of navigational links in the form of a nav menu or nav bar.

  • < aside>

    This element is used to define content aside from the main content. It acts as a sidebar.

Example No.1:

<html> <body> <section> <h1>KW</h1> <p>The Knowledge2life is online learning website.</p> </section> <section> <h1>KW Country</h1> <p>Knowledge2life is Indian learning website</p> </section> </body> </html>

OUTPUT:

KW

The Knowledge2life is online learning website.

KW Country

Knowledge2life is Indian learning website

Example No.2:

<html> <body> <h1>Knowledge2life</h1> <article> <h2>Knowledge2life Website</h2> <p>Knowledge2life is online learning website.!</p> </article> </body> </html>

OUTPUT:

Knowledge2life

Knowledge2life Website

Knowledge2life is online learning website.!