How do you structure a basic HTML5 document from scratch
•15 min read
HTML5 Basic Structure
Every HTML5 document should include the following key elements:
<!DOCTYPE html>— tells the browser it’s an HTML5 document.<html>— the root element that wraps the entire document.<head>— contains metadata like title, styles, and links.<body>— contains all visible page content.
✅ Example: Basic HTML5 Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A simple HTML5 document structure example.">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="styles.css"> <!-- Optional external CSS -->
</head>
<body>
<header>
<h1>Welcome to My Website</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>
<section id="home">
<h2>Home Section</h2>
<p>This is a simple HTML5 structure created from scratch.</p>
</section>
<section id="about">
<h2>About Section</h2>
<p>HTML5 provides semantic elements like <header>, <main>, <footer>, and more.</p>
</section>
</main>
<footer>
<p>© 2025 My Website. All rights reserved.</p>
</footer>
</body>
</html>
🧠 Explanation of Key Tags
| Tag | Purpose |
|---|---|
<!DOCTYPE html> | Declares the document type as HTML5 |
<html lang="en"> | Root element; lang attribute defines language |
<head> | Contains metadata, title, links, and scripts |
<meta charset="UTF-8"> | Sets character encoding (UTF-8 supports all characters) |
<meta name="viewport"> | Makes the page responsive on all devices |
<title> | Defines the page title shown in the browser tab |
<body> | Holds all the visible content of the page |
<header>, <main>, <footer> | Semantic HTML5 elements that structure content clearly |
⚙️ Optional Enhancements
You can include:
<script src="script.js"></script>
before </body> to add JavaScript functionality, or
<style>
body { font-family: Arial, sans-serif; }
</style>
inside <head> for quick inline styling.
