📘 HTML Basics
Understanding the fundamentals of HTML is your first step to web development.
What is HTML?
HTML stands for HyperText Markup Language:
- Hyper - Links and connections
- Text - Plain text content
- Markup - Tags that describe content
- Language - System of communication
HTML 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, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<h1>Welcome</h1>
<p>Content goes here</p>
</body>
</html>
Breaking It Down
| Part | Purpose |
|---|---|
<!DOCTYPE html> | Declares this is an HTML5 document |
<html> | Root element that wraps all content |
<head> | Contains metadata (not visible on page) |
<meta> | Provides metadata about the page |
<title> | Page title shown in browser tab |
<body> | Contains visible page content |
HTML Tags
Tags are the building blocks of HTML:
<!-- Opening tag -->
<p>
<!-- Content between tags -->
Hello, World!
<!-- Closing tag -->
</p>
<!-- Complete element -->
<p>Hello, World!</p>
Common Tags
Headings
<h1>Main heading</h1> <!-- Largest -->
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Small heading</h4>
<h5>Smaller heading</h5>
<h6>Smallest heading</h6> <!-- Smallest -->
Text Content
<p>Paragraph of text</p>
<br> <!-- Line break -->
<hr> <!-- Horizontal line -->
<strong>Bold text</strong> <!-- Important text -->
<em>Italic text</em> <!-- Emphasized text -->
<mark>Highlighted text</mark>
Lists
<!-- Unordered list -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Ordered list -->
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<!-- Description list -->
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
Links and Images
<!-- Link -->
<a href="https://example.com">Click here</a>
<!-- Image -->
<img src="image.jpg" alt="Description">
<!-- Link to other pages -->
<a href="/about">About Us</a>
Attributes
Attributes provide additional information about elements:
<!-- Syntax: attribute="value" -->
<tag attribute="value">Content</tag>
<!-- Examples -->
<a href="https://example.com" target="_blank">Link</a>
<img src="photo.jpg" alt="My Photo" width="300">
<div id="main" class="container">Content</div>
Common Attributes
| Attribute | Purpose | Example |
|---|---|---|
id | Unique identifier | id="header" |
class | CSS class name | class="button" |
href | Link destination | href="page.html" |
src | Image/resource source | src="image.jpg" |
alt | Alternative text | alt="Description" |
title | Hover tooltip | title="Info" |
style | Inline CSS | style="color: red;" |
Self-Closing Tags
Some HTML tags don't have closing tags:
<img src="photo.jpg" alt="Photo">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">
Comments
Comments are hidden from display but helpful for documentation:
<!-- This is a comment -->
<!-- Multi-line comment:
This is very useful for
explaining your code
-->
Best Practices
✅ DO:
- Use proper indentation for readability
- Always include
<!DOCTYPE html> - Use semantic HTML tags when possible
- Add
alttext to images - Use lowercase for tag and attribute names
- Close all opening tags
❌ DON'T:
- Leave tags unclosed (except self-closing)
- Nest tags incorrectly
- Use outdated tags like
<font> - Write HTML in all caps
- Overuse
<div>for everything
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first web page!</p>
<h2>About Me</h2>
<ul>
<li>I love web development</li>
<li>I'm learning HTML</li>
<li>I'm excited about coding</li>
</ul>
<h2>Links</h2>
<a href="https://example.com">Visit Example</a>
<!-- Comment: Footer section -->
<hr>
<p>© 2026 My Website</p>
</body>
</html>
Next Steps
Ready to learn more?