05/10/2025, 01:36 HTML for Beginners - Complete Guide
📄 Download as PDF (Print to PDF)
🌐 HTML for Beginners
A Complete Guide to Getting Started with HTML
📚 Table of Contents
1. What is HTML?
2. Basic Structure
3. Essential Tags
4. Text Formatting
5. Links and Images
6. Lists
7. Tables
8. Forms
9. Semantic HTML
10. Best Practices
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 1/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
1. What is HTML?
HTML stands for HyperText Markup Language. It's the standard language used to
create web pages.
HyperText: Text that contains links to other text
Markup: Tags that define how content should be displayed
Language: A set of rules and syntax
💡 Tip: HTML is NOT a programming language. It's a markup language that
structures content on web pages.
Why Learn HTML?
Foundation of all websites
Easy to learn and use
Works with CSS and JavaScript
Essential for web development careers
2. Basic Structure
Every HTML document has a basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initia
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page.</p>
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 2/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
</body>
</html>
Breaking It Down:
Tag Purpose
<!DOCTYPE html> Declares this is an HTML5 document
<html> Root element of the page
<head> Contains metadata (not visible on page)
<title> Shows in browser tab
<body> Contains visible content
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 3/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
3. Essential Tags
Headings (h1 to h6)
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
<h4>Even Smaller</h4>
<h5>Getting Smaller</h5>
<h6>Smallest Heading</h6>
⚠️ Important: Use only ONE <h1> per page for the main title. It's important
for SEO and accessibility.
Paragraphs
<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>
Line Breaks and Horizontal Rules
<p>First line<br>Second line</p>
<hr> <!-- Creates a horizontal line -->
4. Text Formatting
Tag Purpose Example
<strong> Bold (important) Bold text
<em> Italic (emphasis) Italic text
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 4/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
<mark> Highlighted Highlighted
<small> Smaller text Small text
<del> Deleted text Deleted
<ins> Inserted text Inserted
<sub> Subscript H2O
<sup> Superscript X2
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 5/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
5. Links and Images
Links (Anchors)
<!-- External link -->
<a href="https://www.google.com">Visit Google</a>
<!-- Open in new tab -->
<a href="https://www.google.com" target="_blank">Open in New
<!-- Link to another page on your site -->
<a href="about.html">About Us</a>
<!-- Email link -->
<a href="mailto:
[email protected]">Send Email</a>
Images
<!-- Basic image -->
<img src="image.jpg" alt="Description of image">
<!-- Image with size -->
<img src="photo.jpg" alt="My photo" width="300" height="200">
<!-- Image as a link -->
<a href="page.html">
<img src="button.jpg" alt="Click me">
</a>
💡 Tip: Always include the alt attribute for accessibility. It describes the
image for screen readers and shows if the image fails to load.
6. Lists
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 6/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
Unordered Lists (Bullets)
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered Lists (Numbers)
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
Nested Lists
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables</li>
</ul>
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 7/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
7. Tables
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Sarah</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
</table>
Table Tags Explained:
<table> - Defines the table
<thead> - Table header section
<tbody> - Table body section
<tr> - Table row
<th> - Header cell (bold by default)
<td> - Data cell
8. Forms
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 8/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
<form action="/submit" method="POST">
<!-- Text input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<!-- Email input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<!-- Password input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<!-- Radio buttons -->
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="fema
<label for="female">Female</label>
<!-- Checkbox -->
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to newsletter</label>
<!-- Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
</select>
<!-- Text area -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"></textarea
<!-- Submit button -->
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 9/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
<button type="submit">Submit</button>
</form>
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 10/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
9. Semantic HTML
Semantic tags give meaning to your content structure:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
<section>
<h2>Section Title</h2>
<p>Section content...</p>
</section>
<aside>
<p>Side content or ads</p>
</aside>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 11/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
</body>
</html>
Semantic Tags Explained:
Tag Purpose
<header> Page or section header
<nav> Navigation links
<main> Main content (only one per page)
<article> Self-contained content
<section> Thematic grouping of content
<aside> Sidebar or related content
<footer> Page or section footer
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 12/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
10. Best Practices
✅ Do:
Always include DOCTYPE declaration
Use semantic HTML tags
Include alt text for images
Indent your code properly for readability
Use lowercase for tag names
Close all tags properly
Validate your HTML using W3C Validator
Use meaningful names for IDs and classes
❌ Don't:
Use deprecated tags like <font> or <center>
Forget to close tags
Use inline styles (use CSS instead)
Skip accessibility features
Use tables for layout (use CSS Grid/Flexbox)
Comments in HTML:
<!-- This is a comment. It won't be displayed on the page -->
<!--
Multi-line comment
for longer notes
-->
Special Characters (Entities):
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 13/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
Character Code Display
Less than < <
Greater than > >
Ampersand & &
Quote " "
Copyright © ©
Non-breaking space
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 14/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
🎯 Quick Reference Cheat Sheet
Document Structure
<!DOCTYPE html>, <html>, <head>, <body>, <title>
Text Content
<h1> to <h6>, <p>, <br>, <hr>, <strong>, <em>
Links & Media
<a href="">, <img src="" alt="">, <video>, <audio>
Lists
<ul>, <ol>, <li>
Tables
<table>, <tr>, <th>, <td>, <thead>, <tbody>
Forms
<form>, <input>, <label>, <select>, <textarea>, <button>
Semantic
<header>, <nav>, <main>, <article>, <section>, <aside>, <foot
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 15/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
📝 Your First Complete Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
</head>
<body>
<header>
<h1>John Doe</h1>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>I'm a web developer passionate about creat
</section>
<section id="projects">
<h2>My Projects</h2>
<article>
<h3>Project 1</h3>
<p>Description of my awesome project.</p>
</article>
</section>
</main>
<footer>
<p>© 2025 John Doe. All rights reserved.</p>
</footer>
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 16/17
05/10/2025, 01:36 HTML for Beginners - Complete Guide
</body>
</html>
🚀 Next Steps
1. Practice: Create simple web pages using these tags
2. Learn CSS: Style your HTML pages
3. Learn JavaScript: Add interactivity
4. Build Projects: Create real websites
5. Resources:
MDN Web Docs (developer.mozilla.org)
W3Schools (w3schools.com)
FreeCodeCamp (freecodecamp.org)
💡 Final Tip: The best way to learn HTML is by doing. Start coding today and
don't be afraid to make mistakes!
Happy Coding! 🎉
Remember: Every expert was once a beginner.
📄 Download as PDF (Print to PDF)
file:///C:/Users/vansh_b7d74wp/Downloads/html_beginner_guide.html 17/17
