1. Basic Structure of an HTML Document
Every HTML document follows a standard structure that defines how browsers render the content.
Core Components:
2. Breakdown of HTML Document Structure
A. <!DOCTYPE html>
- Purpose: It declares the document type and HTML version (HTML5).
- Must be the first line in an HTML file.
- It is not case-sensitive (
<!doctype html>also works).
B. <html> Tag
- It is the root element of an HTML page.
- Contains all other HTML elements.
langattribute specifies the language For example,enfor English.
C. <head> Section
Contains metadata. This is the information about the webpage, not displayed).
Let’s look at some;
<meta – Defines character encoding — It supports all languages.
charset="UTF-8">
<meta – Makes the page responsive on mobile devices.
name="viewport" content="width=device-width,
initial-scale=1.0">
<title> – Sets the title shown in the browser tab.
<link> – Contains links external resources (CSS, favicons, cdn links).
<style> – Embeds CSS directly in HTML.
<script> – Embeds or links JavaScript.
D. <body> Section
- Contains visible content (text, images, links, etc.).
- All user-facing elements go here.
4. Semantic HTML5 Structure
Modern HTML uses semantic tags for better readability and SEO.
| Tag | Purpose |
|---|---|
<header> |
Introductory content (logo, navigation). |
<nav> |
Navigation links. |
<main> |
Main content of the page. |
<section> |
Groups related content. |
<article> |
Independent content (blog post, news). |
<aside> |
Sidebar or secondary content. |
5. Key Notes
✔ Always close tags (<tag></tag>).
✔ Use lowercase for tags (<html>, NOT <HTML>).
✔ Indent code properly for readability.
✔ Validate HTML using W3C Validator.