Javatpoint Logo
Javatpoint Logo

HTML5 Semantics

In any language, semantics is used to study the meaning of words and phrases. i.e. semantic elements= elements with a meaning.

Semantic elements have a simple and clear meaning for both, the browser and the developer.

For example:

<div>, <span> etc. are non-semantic elements. They don't tell anything about its content. On the other hand, <form>, <table>, and <article> etc. are semantic elements because they clearly define their content.

HTML5 semantic elements are supported by all major browsers.

Why to use semantic elements?

Semantic elements are used in HTML5 because in HTML4, developers have to use their own id/class names to style elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.

This is so difficult for search engines to identify the correct web page content. Now in HTML5 elements (<header> <footer> <nav> <section> <article>), this will become easier. It now allows data to be shared and reused across applications, enterprises, and communities."

Semantic Elements in HTML5

Table:

Index Semantic Tag Description
1. <article> Defines an article
2. <aside> Defines content aside from the page content
3. <details> Defines additional details that the user can view or hide
4. <figcaption> Defines a caption for a <figure> element
5. <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
6. <footer> Defines a footer for a document or section
7. <header> Specifies a header for a document or section
8. <main> Specifies the main content of a document
9. <mark> Defines marked/highlighted text
10. <nav> Defines navigation links
11. <section> Defines a section in a document
12. <summary> Defines a visible heading for a <details> element
13. <time> Defines a date/time

Some important semantic elements in HTML5

HTML5 <article> Element

https://www.javatpoint.com/html-article-tag

HTML5 <section> Element

https://www.javatpoint.com/html-section-tag

Nesting <article> tag in <section> tag or Vice Versa?

We know that the<article> element specifies independent, self-contained content and the <section> element defines section in a document.

In HTML, we can use <section> elements within <article> elements, and <article> elements within <section> elements.

We can also use <section> elements within <section> elements, and <article> elements within <article> elements.

For example:

In a newspaper, the sport <article> in the sport section, may have a technical section in each <article>.

HTML5 Header Element

https://www.javatpoint.com/html-header-tag

HTML5 Footer Element

https://www.javatpoint.com/html-footer-tag

HTML5 <nav> Element

The HTML <nav> element is used to define a set of navigation links.

Example:

Test it Now

HTML5 <aside> Element

https://www.javatpoint.com/html-aside-tag

HTML5<figure> Element

https://www.javatpoint.com/html-figure-tag

HTML5 <figcaption> Element

https://www.javatpoint.com/html-figcaption-tag

https://www.javatpoint.com/html-figcaption-tag


Next TopicHTML5 Migration




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials