Skip to main content

HTML Semantics Elements

HTML semantic elements are HTML tags that provide meaning and context to the content within them.

Semantic elements help search engines, screen readers, and other devices better understand the structure and content of a web page.

Here are some examples of HTML semantic elements:

  • <header>: Used to define a header section of a web page.

  • <nav>: Used to define a navigation section of a web page.

  • <main>: Used to define the main content of a web page.

  • <article>: Used to define an article or a self-contained piece of content.

  • <section>: Used to define a section of content within a web page.

  • <aside>: Used to define content that is related to the main content but not essential to it.

  • <footer>: Used to define a footer section of a web page.

  • <figure>: Used to define a figure or an illustration in a web page.

  • <figcaption>: Used to provide a caption for a figure or an illustration.

maintainable code

Using semantic elements not only improves the accessibility of a web page but also makes it easier to read and maintain the code.

The <header> Element​

The <header> element is used to define a header section of a web page. It typically contains a logo, a site title, and a navigation menu.

As an example:

Editor

Loading...

The <nav> Element​

The <nav> element is used to define a navigation section of a web page. It typically contains links to different parts of the site.

As an example:

Editor

Loading...

The <main> Element​

The <main> element is used to define the main content of a web page.

As an example:

Editor

Loading...

The <article> Element​

The <article> element is used to define an article or a self-contained piece of content within a web page.

As an example:

Editor

Loading...

The <section> Element​

The <section> element is used to define a section of content within a web page.

As an example:

Editor

Loading...

The <aside> Element​

The <aside> element is used to define content that is related to the main content but not essential to it.

As an example:

Editor

Loading...

The <footer> element is used to define a footer section of a web page.

As an example:

Editor

Loading...

The <figure> Element​

The <figure> element is used to define a figure or an illustration in a web page.

As an example:

Editor

Loading...

The <figcaption> Element​

The <figcaption> element is used to provide a caption for a figure or an illustration.

As an example:

Editor

Loading...