HTML5 Semantics
HTML5 provides more semantic elements that make an easy understanding of the code.Hence Semantics defines the meaning of words and phrases.
non-semantic:
In HTML4 we have seen <div>, <span> etc. These are non-semantic elements. They don’t tell anything about its content.
semantic :
On the other hand, <form>, <table>, and <article> etc. These are semantic elements because they clearly define their content.
use semantic elements:
In HTML4, we have to use their own id or class names to style(CSS) elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, top nav, etc.
Now in HTML5 elements (<header> <footer> <nav> <section> <article>), this will become easier.
Semantic elements can increase the accessibility of your website, and also helps to create a better website structure(design).
Semantic Elements in HTML5:
<article> – Defines an article
<aside> – Content aside from the page content
<details> – Additional information that the user can view/hide.
<figcaption> – Caption for a <figure> element
<figure> – Illustrations, diagrams, photos, code listings, etc.
<footer> – Footer for a document or section
<header> – Header for a document or section
<main> – Main content of a document
<mark> – Defines marked/highlighted text
<nav> – Defines navigation links
<section> – Defines a section in a document
<summary> – Visible heading for a <details> element
<time> – Defines a date/time
HTML5 <article> Element:
HTML <article> element provides article content within a document, page, application, or a website.
Example:
<!DOCTYPE html> <html> <body> <h1>The article element</h1> <article> <h2>Today's article highlights</h2> <p>First story</p> <p>Second story</p> <p>Third story</p> </article> </body> </html>
OUTPUT:
HTML5 <aside> Element:
The <aside> element represent the text which is indirectly giving information to the main content of the page.
Example:
<!DOCTYPE html> <html> <body> <h2>aside Element</h2> <p>enter content here,,,,,,,,,,,,,,,,.........................</p> <aside> <h4>aside</h4> <p>enter text here,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,....................</p> </aside> </body> </html>
OUTPUT:
HTML5 <section> Element:
The <section> element is used to represent the standalone section within an HTML document.
Example:
<!DOCTYPE html> <html> <body> <h2>section Element</h2> <section> <h3>HTML</h3> <p>Hypertext Markup Language ...................,,,,,,,</p> </section> <section> <h3>Javascript</h3> <p>Is a programming language.................................,,,,,,,,,</p> </section> </body> </html>
OUTPUT:
Nesting <article> in <section> or Vice Versa?
The<article> element provides 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.
HTML5 <nav> Element:
The HTML <nav> element is used to define a set of navigation links.
Example:
<!DOCTYPE html> <html> <body> <nav> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">JavaScript</a> | <a href="#">jQuery</a> </nav> </body> </html>
OUTPUT:
HTML5 <header> Element:
The <header> element provides the header of the document/file which can contain introductory content or navigation links.
Example:
<!DOCTYPE html> <html> <body> <header> <h1>Welcome to I2tutorials.com</h1> <nav> <ul> <li>Home |</li> <li>About us |</li> <li>Contact us</li> </ul> </nav> </header> </body> </html>
OUTPUT:
HTML5 <footer> Element:
The <footer> tag provides the footer of an HTML document or page.
Example:
<!DOCTYPE html> <html> <body> <h2>footer Element</h2> <footer> <p>© Copyright 2020. All rights reserved. </p> </footer> </body> </html>
OUTPUT: