HTML5 Semantics



HTML5 Semantics

Last Updated Jul 27, 2015, 04:50:26 AM

Semantics is one of the most distinctive features of the Web Platform versus other application platforms.

HTML5 provides a series of tools to make developers life easier. Some of them are as follows

  • New media elements.
  • New structural elements.
  • New semantics for internationalization.
  • New link relation types.
  • New attributes.
  • New form types.
  • New microdata syntax for additional semantics.

Think about your code. Do you ever use <div id="nav"></div>, <div class="header"></div>, or <div id="footer"> ? That's exactly where these new elements came from.

The above three seperate div elements have been repalced with specific sementic elements in HTML5 like header, footer, nav

Semantic Elements in HTML5

As web developers we define the header and footer elements in our code something like this code><div id="nav">&l;/div>, <div class="header"></div>, <div id="footer"> but with new HTML5 semantics we can use the same elements in a different way like below

HTML5 <header> Tag

header element tag is used to define a header for the document or a section


Example
Try It Now

HTML5 <footer> Tag

HTML5 footer element tag used to define a footer for the document or a section


Example
Try It Now

HTML5 <nav> Tag

HTML Navigation Element <nav> represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Example
Try It Now

HTML5 <article> Tag

HTML5 <article>represents a self-contained composition in a document, page, application


Example
Try It Now

HTML5 <aside> Tag

HTML5 <aside> element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content.


Example
Try It Now

HTML5 <details> Tag

HTML5 <details>element tag used as a disclosure widget from which the user can retrieve additional information


Example
Try It Now

HTML5 <figcaption> Tag

HTML5 <figcaption> element tag represents a caption or a legend associated with a figure


Example
Try It Now

HTML5 <main> Tag

HTML <main> element can be used as a container for the dominant contents of the document


Example
Try It Now

HTML5 <mark> Tag

it can be used in a page showing search results to highlight every instance of the searched-for word.


Example
Try It Now

HTML5 <section> Tag

The <section> element defines a section in a document.


Example
Try It Now

HTML5 <summary> Tag

Defines a visible heading for a <details> element

Example
Try It Now

HTML5 <time> Tag

HTML5 <time> element tag defines a date/time

Example
Try It Now



Browser Support
Property
HTML5 (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)


Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and w3C

Last Updated Jul 27, 2015, 04:50:26 AM



​