The basic structure of an HTML5 page utilizes semantic elements to provide meaning and organization to the document's content. This structure is designed for improved readability, accessibility, and SEO.
Here are the key components of an HTML5 page structure:
<!DOCTYPE html>:
This declaration is the first line of an HTML5 document and informs the browser about the document type.
<html>:
This is the root element that encloses all other elements of the HTML document. It often includes a lang attribute to declare the document's language.
<head>:
This element contains metadata about the HTML document that is not displayed directly on the page. This includes:
<meta charset="utf-8">: Specifies the character encoding for the document.<title>: Sets the title that appears in the browser tab or window title bar.<link>: Links to external stylesheets (CSS).<script>: Links to or embeds JavaScript code.<meta name="viewport" ...>: Configures the viewport for responsive design.<body>:
This element contains all the visible content of the HTML document. Within the <body>, HTML5 introduces several semantic elements to structure content:
<header>: Represents introductory content for a document or a section, often containing headings, logos, or navigation.<nav>: Contains navigation links, typically for the main site navigation.<main>: Represents the dominant content of the <body>, and there should only be one <main> element per document.<article>: Represents a self-contained, independent piece of content that could be distributed independently, such as a blog post or a news article.<section>: Represents a thematic grouping of content, typically with a heading.<aside>: Represents content that is tangentially related to the content around it, often displayed as a sidebar.<footer>: Represents a footer for its nearest ancestor sectioning content or the document itself, often containing copyright information, contact details, or related links.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 5 Structure</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>Welcome to My HTML5 Page</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is a paragraph within an article. It contains information about the topic discussed in the article.</p>
</article>
<section>
<h2>Section Title</h2>
<p>This is a paragraph within a section. It groups related content together.</p>
</section>
<aside>
<h2>Related Links</h2>
<p>This is an aside that contains links or information related to the main content.</p>
</aside>
</main>
<footer>
<p>© 2025 My Website. All rights reserved.</p>
<p>Contact us at <a href="mailto:support@example.com">support@example.com</a></p>
</footer>
</body>
</html>