Full Explanation of HTML5 Document Structure
1. <!DOCTYPE html>
This tells the browser:
“Hey! This is an HTML5 document.”
It ensures the browser uses the latest HTML standards.
2. <html> ... </html>
This is the root tag of your entire HTML document.
Everything visible or invisible on the page must be inside these tags.
3. <head> ... </head>
This section contains meta-information about the page — not visible to users directly but important
for the browser and search engines.
Common things inside <head>:
<title>
Text shown in browser tab.
Example: <title>My First Website</title>
<meta charset="UTF-8">
Defines the character set (letters, symbols) the page supports. UTF-8 includes most characters from
all languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Makes your page look good on phones and tablets by setting the page width to device width.
<link rel="stylesheet" href="styles.css">
Connects an external CSS file to style the page.
Other meta tags like keywords, description (for SEO), scripts, etc.
4. <body> ... </body>
This is the visible part of the webpage — everything inside <body> is shown to users.
Common tags inside <body>:
4.1 <header> ... </header>
Defines a header section, usually contains titles, logos, or navigation links.
4.2 <nav> ... </nav>
Defines a navigation menu with links to different parts of the page or other pages.
4.3 <main> ... </main>
Contains the main content of the webpage.
4.4 <section> ... </section>
Defines a section or part of the page — like a chapter or area for specific content.
4.5 <article> ... </article>
Represents an independent piece of content, like a blog post or news article.
4.6 <aside> ... </aside>
Content related to the main content but separate — like a sidebar.
4.7 <footer> ... </footer>
Footer of the page — copyright, contact info, or links at the bottom.
4.8 Headings: <h1> to <h6>
Define headings — <h1> is the most important (biggest), <h6> is the smallest.
4.9 Text formatting tags:
<p> — paragraph
<strong> — important/bold text
<em> — emphasized/italic text
<br> — line break
<hr> — horizontal line
4.10 Lists:
<ul> — unordered list (bullets)
<ol> — ordered list (numbers)
<li> — list item
4.11 Links:
<a href="url">Link text</a> — creates a clickable link
4.12 Images:
<img src="image.jpg" alt="description"> — shows an image
alt helps screen readers and shows text if image doesn’t load
4.13 Forms:
<form> ... </form> — a container for inputs and buttons for user input
Common input tags inside form:
<input type="text"> — text box
<input type="email"> — email box
<input type="password"> — password box
<textarea> — multi-line text box
<button type="submit"> — submit button
<label for="id"> — label connected to input
5. Closing tags
Always close your tags properly like </p>, </div>, </form>, and finally close <body> and <html> at
the end.
Summary with a simple example
<!DOCTYPE html>
<html>
<head>
<title>My Sample Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#section1">About</a></li>
<li><a href="#section2">Contact</a></li>
</ul>
</nav>
<main>
<section id="section1">
<h2>About Us</h2>
<p>This is a sample website.</p>
</section>
<section id="section2">
<h2>Contact</h2>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
