HTML Document Structure
Before learning individual HTML tags in depth, you need to understand how a complete HTML document is organized.
1. Basic HTML Structure
Every normal HTML page follows a structure similar to this:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my website.</p>
</body>
</html>
Think of it like a building:
HTML Document
โโโ
โ โโโ โ Page information
โ โโโ โ Visible webpage content
2. <!DOCTYPE html>
This tells the browser that the document uses modern HTML.
It is a declaration, not a normal HTML element.
3.
This is the root element of the document.
Almost everything else belongs inside
<html>.4.
The
<head> contains information about the webpage.Common things placed inside it include:
<meta> <link> <style> <script></strong></p>
<p>Much of this information isn't directly displayed as page content.</p>
<p><strong>5. <title></strong><br>
The title usually appears in the browser tab.</p>
<p>It is also important for search engines and accessibility.</p>
<p><strong>6. <body></strong><br>
The <code><body></code> contains the main content users interact with and see.</p>
<p>Examples: Headings, Paragraphs, Images, Links, Buttons, Forms, Lists, Videos</p>
<p><strong>7. <meta></strong><br>
<code><meta></code> provides information about the document.</p>
<p>A very common example is: <code><meta charset="UTF-8"></code><br>
You will also commonly see: <code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code></p>
<p>This helps webpages display properly on mobile devices.</p>
<p><strong>8. <link></strong><br>
<code><link></code> is commonly used to connect external resources to the HTML document.</p>
<p>For example: <code><link rel="stylesheet" href="style.css"></code></p>
<p><strong>9. Complete Example</strong></p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Portfolio</h1>
<p>I am learning web development.</p>
<a href="about.html">About Me</a>
</body>
</html>
10. What Happens When the Browser Opens It?
HTML file โ Read DOCTYPE โ Read html โ Process head โ Load metadata, title, CSS โ Process body โ Build webpage โ Display to user
11. vs
: Information ABOUT the webpage
: Content OF the webpage
๐ง Double Tap โค๏ธ For More