HTML Tutorial Part 2
Understanding HTML Document Structure and Basic Tags
The Complete HTML Document Structure
Every HTML document follows a specific structure. Understanding this structure is essential for creating valid web pages.
<!-- Document Type Declaration -->
<!DOCTYPE html>
<!-- Root Element -->
<html lang="en">
<!-- Head Section - Metadata -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<!-- Body Section - Visible Content -->
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
<!DOCTYPE html>
<!-- Root Element -->
<html lang="en">
<!-- Head Section - Metadata -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<!-- Body Section - Visible Content -->
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Breaking Down Each Component
1. DOCTYPE Declaration
<!DOCTYPE html> tells the browser that this is an HTML5 document. It must be the very first line of your HTML file.
2. HTML Element
<html> is the root element that wraps all content on the page. The lang="en" attribute specifies the language (English in this case).
3. Head Section
The <head> contains metadata about the document:
- charset: Character encoding (UTF-8 supports all languages)
- viewport: Makes your page responsive on mobile devices
- title: Text displayed in the browser tab
4. Body Section
The <body> contains all visible content that appears on your webpage.
Essential Basic Tags
| Tag | Purpose | Example |
|---|---|---|
<h1> - <h6> |
Headings (h1 is largest) | <h1>Main Title</h1> |
<p> |
Paragraph | <p>Text here</p> |
<br> |
Line break (self-closing) | <br> |
<hr> |
Horizontal rule/line | <hr> |
<div> |
Container/division | <div>Content</div> |
<span> |
Inline container | <span>Text</span> |
Practical Example
Let's create a simple webpage with multiple basic tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Structured Page</title>
</head>
<body>
<h1>Welcome to HTML Learning</h1>
<h2>Getting Started</h2>
<p>HTML is the building block of web pages.</p>
<hr>
<h3>Important Points</h3>
<p>Always structure your HTML properly.<br>
Use appropriate tags for content.</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Structured Page</title>
</head>
<body>
<h1>Welcome to HTML Learning</h1>
<h2>Getting Started</h2>
<p>HTML is the building block of web pages.</p>
<hr>
<h3>Important Points</h3>
<p>Always structure your HTML properly.<br>
Use appropriate tags for content.</p>
</body>
</html>
Pro Tip: Always close your tags in the correct order. If you open <div> before <p>, close </p> before </div>.
Practice Exercise
Challenge: Create an HTML page with:
- Proper document structure
- A main heading (h1) with your name
- A subheading (h2) about your interests
- Two paragraphs describing yourself
- A horizontal line between the paragraphs
Key Takeaways
- Every HTML document needs DOCTYPE, html, head, and body tags
- The head section contains metadata
- The body section contains visible content
- Use semantic tags appropriately (h1 for main heading, p for paragraphs)
- Self-closing tags like br and hr don't need closing tags
Great Progress!
You've completed Part 2 of the HTML Tutorial!
Next up: HTML Text Formatting and Headings
0 Comments