<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Elements Showcase</title>
</head>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header, nav, section, article, aside, footer{
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
header{
background-color: #f4f4f4;
}
nav{
background-color: #e2e2e2;
}
section{
background-color: #eaf2f8;
}
article{
background-color: #f9f9f9;
}
aside{
background-color: #f0f0f0;
}
footer{
background-color: #f4f4f4;
text-align: center;
}
</style>
<body>
<!-- header section -->
<header>
<h1>HTML5 Elements Showcase</h1>
<p>This page demonstrates the use of various HTML5 Structural Elements</p>
</header>
<!-- Navigation Section -->
<nav>
<h2>Navigation</h2>
<p>This <code><nav></code> element represents a section of a page that links to other pages or to parts within the page.</p>
<ul>
<li><a href="#header">Header</a></li>
<li><a href="#nav">Navigation</a></li>
<li><a href="#section">Section</a></li>
<li><a href="#article">Article</a></li>
<li><a href="#aside">Aside</a></li>
<li><a href="#footer">Footer</a></li>
</ul>
</nav>
<!-- Section element -->
<section>
<h2>Section</h2>
<p>The <code><section></code> element represents a standalone section that could potentially be distributed as an independent piece of content.</p>
<p>Each section should have a heading (e.g h2)</p>
</section>
<!-- Article element -->
<article>
<h2>Article</h2>
<p>This article element represents a self-contained piece of content that could be independently distributed or reused.</p>
<p>Example of article elements include a blog post, a news article, a comment, or a forum post.</p>
</article>
<!-- Aside Elements -->
<aside>
<h2>Aside</h2>
<p>The aside element represents a section of a page that consists of content tangentially related to the content around the aside element.</p>
<p>This could be a sidebar or a callout box with related information.</p>
</aside>
<!-- Footer section -->
<footer>
<h2>Footer</h2>
<p>The footer element represents the footer for its nearest sectioning content or sectioning root element.</p>
<p>It typically contains information about the author, copyright information, or links to related documents.</p>
</footer>
</body>
</html>Explanation of Elements:
<header> :
- The
<header>element represents introductory content, typically a group of introductory or navigational aids. It usually contains headings, logo, or introductory content for the page.
<nav> :
- The
<nav>element represents a section of a page that links to other pages or to parts within the page. It’s intended for sections with major navigation links.
<section> :
- The
<section>element represents a standalone section of content that can be independently distributed or reused. Each section should generally have its own heading.
<article> :
- The
<article>element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable. Examples include a blog post, a news article, or a comment.
<aside> :
- The
<aside>element represents a section of a document with tangentially related content to the main content. This could be a sidebar with additional information, advertisements, or other related links.
<footer> :
- The
<footer>element represents the footer of its nearest sectioning content or sectioning root element. It typically contains information about the author, copyright, or links to related documents.
