HTML Semantic Elements Figure, Footer, Header, Main Tags Part-2 By #BKTutorial

 

5) <figure>

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

6) <footer>

The <footer> tag defines a footer for a document or section.

A <footer> contains:

authorship information,

copyright information

Contact information etc.

7) <header>

The <header> element represents a container for introductory content or a set of navigational links.

A <header> contains:

one or more heading elements (<h1> - <h6>)

logo or icon

authorship information

8)  <main>

The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Source Code:

<!DOCTYPE html>

<html>

<head>

<title>HTML Semantic Elements</title>

</head>

<body>

<h2> Figure</h2>

<figure>

 <img src="bkt.jpg" height="300px" width="500px" alt="BKTutorial">

 <figcaption>BKTutorial We Inspire new ideas!!</figcaption>

 </figure>

<h2>Footer</h2>

<footer>

<strong>Copyrighted 2020. All Rights Reserved.</strong> Social Media Links Here.

</footer>

<h2>Header</h2>

<header>

  <ul>

     <li style="list-style:none;"><a href="home.html#">Home</a> </li>

<li style="list-style:none;"><a href="services.html#">Services</a> </li>

<li style="list-style:none;"><a href="contact.html#">Contact</a></li>

  </ul>

</header>

<h2>Main</h2>

<main>

  <article>

<h4>BKTutorial</h4> 

<p>We Inspire New Ideas !!

In this Channel we are uploaded HTML | HTML 5 | CSS | CSS3 | JavaScript | Java | J Query | Python Turtle Graphics |Adobe XD | VFX (Green Screen Effects) | Filmora Effects Videos | Sony Vegas Pro Effect etc. Regarding Video Tutorials in Easy steps / Easy way. </p>

</article>

</main>

<h3>BKTutorial, Html, CSS etc...</h3>

</body>

</html>