What is HTML?
HTML (HyperText Markup Language) is the backbone of every website. Think of it as the skeleton that gives structure to your web pages. It’s not a programming language — it’s a markup language that tells browsers how to organize and display content.
HTML Document Structure
Every HTML document follows this simple format:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Understanding HTML Elements
HTML uses tags to mark up content:
<h1>This is a heading</h1>
<p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
Anatomy of an HTML Element
<tag attribute="value">Content</tag>
│ │ │ │
│ │ │ └─ Content
│ │ └─ Attribute value
│ └─ Attribute name
└─ Opening tag
Essential HTML Tags
Text Content Tags
<!-- Headings (h1 is most important, h6 is least) -->
<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<!-- Paragraphs -->
<p>This is a paragraph of text.</p>
<!-- Text formatting -->
<strong>Bold text</strong>
<em>Italic text</em>
<mark>Highlighted text</mark>
<small>Small text</small>
List Tags
<!-- Unordered list (bullets) -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- Ordered list (numbers) -->
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
Link and Image Tags
<!-- Links -->
<a href="https://example.com">Visit Example</a>
<a href="about.html">About Page</a>
<!-- Images -->
<img src="photo.jpg" alt="Description of image" width="300" height="200">
HTML Attributes
Attributes give elements extra details or functionality:
<!-- Link with target attribute -->
<a href="https://example.com" target="_blank">Open in new tab</a>
<!-- Image with multiple attributes -->
<img src="logo.png" alt="Company logo" class="logo" id="main-logo">
<!-- Input with type and placeholder -->
<input type="text" placeholder="Enter your name" required>
Common HTML Attributes
-
id: Unique identifier for an element
-
class: CSS class name for styling
-
src: Source for images, scripts, etc.
-
href: Link URL
-
alt: Alternative text for images
-
title: Tooltip text
-
lang: Language of the content
