HTML Fundamentals
Learn HTML: structure web pages with semantic markup.
A Simple Analogy
HTML is like a building's blueprint. It defines the structure: walls, rooms, doors. But the blueprint itself doesn't look pretty—that's CSS's job. HTML says "this is a header," "this is content," "this is a footer."
What Is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It provides structure and semantic meaning to content.
Why Learn HTML?
- Foundation: Required for all web development
- Accessibility: Proper markup helps screen readers
- SEO: Search engines understand semantic HTML
- Structure: Organizes content meaningfully
- Interactivity: Forms and inputs enable user interaction
Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>My Page</title>
</head>
<body>
<header>Header content</header>
<main>Main content</main>
<footer>Footer content</footer>
</body>
</html>
Common Elements
| Element | Purpose |
|---------|---------|
| <h1>-<h6> | Headings (h1 largest) |
| <p> | Paragraph |
| <ul>/<ol> | Lists (unordered/ordered) |
| <a> | Links |
| <img> | Images |
| <form> | User input |
| <button> | Clickable button |
| <div> | Generic container |
| <nav> | Navigation |
| <section> | Thematic grouping |
Semantic HTML
<!-- Good: Semantic -->
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h1>Blog Post</h1>
<p>Content here...</p>
</article>
<aside>Related links...</aside>
</main>
<footer>Copyright 2025</footer>
<!-- Avoid: Non-semantic -->
<div id="header">
<div id="nav">
<a href="/">Home</a>
</div>
</div>
Forms and Inputs
<form action="/submit" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label>
<input type="checkbox"> Remember me
</label>
<button type="submit">Login</button>
</form>
Practical Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product Page</title>
</head>
<body>
<header>
<h1>Product Store</h1>
<nav>
<a href="/">Home</a>
<a href="/products">Products</a>
<a href="/cart">Cart</a>
</nav>
</header>
<main>
<section>
<h2>Featured Product</h2>
<article>
<img src="product.jpg" alt="Product image">
<h3>Laptop</h3>
<p>High-performance laptop</p>
<button>Add to Cart</button>
</article>
</section>
</main>
<footer>
<p>© 2025 Product Store</p>
</footer>
</body>
</html>
Best Practices
- Use semantic elements:
<header>,<nav>,<main>,<footer> - Alt text for images: Accessibility and SEO
- Proper heading hierarchy: h1 → h2 → h3
- Label form inputs: Improves accessibility
- Mobile viewport:
<meta name="viewport">
Related Concepts to Explore
- HTML5 features and APIs
- Accessibility (a11y) and ARIA attributes
- Meta tags and SEO
- CSS styling and layout
- JavaScript interactivity
Summary
HTML provides structure and semantic meaning to web content. Master semantic elements, forms, and accessibility to build accessible, maintainable websites.
Related Articles
CSS Fundamentals
Learn CSS: style and layout web pages responsively.
Read More webJavaScript Fundamentals
Learn JavaScript: the language that powers interactive web experiences.
Read More webHTTP Status Codes
Learn how to understand and use HTTP status codes effectively in web applications and APIs.
Read More