/    /  HTML5 Semantics

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 Semantics

 

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 Semantics

 

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:

 

HTML5 Semantics

 

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 Semantics

 

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 Semantics

 

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:

 

HTML5 Semantics