HTML Basics
Master the foundational markup language that powers every website on the internet.
Why HTML Matters for Developers
Industry-Standard Foundation
Learn exactly how professional developers structure HTML documents
Debugging Skills
Understand common mistakes and how to fix them early in your learning
Semantic Understanding
Grasp why proper HTML structure matters for accessibility and SEO
Anatomy of an HTML Document
Every valid HTML document follows a specific structure that browsers use to render content correctly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>Critical Components:
lang="en"- Specifies language for accessibilitycharset="UTF-8"- Ensures proper character encoding- Viewport meta tag - Makes site mobile-friendly
- Semantic structure - Helps search engines understand content
Essential HTML Tags Cheat Sheet
These are the building blocks you'll use in nearly every project:
| Tag | Description | Importance |
|---|---|---|
<!DOCTYPE html> | Defines the document type and HTML version (HTML5) | Required |
<html> | Root element that wraps the entire HTML document | Required |
<head> | Contains page info like title, styles, and meta data | Required |
<title> | Shows text on browser tab (used in SEO) | Required |
<meta> | Sets character encoding, responsive settings, and page info | Highly Recommended |
<link> | Links external files like CSS | Highly Recommended |
<style> | Writes internal CSS styles | Highly Recommended |
<script> | Adds JavaScript for interactive features | Highly Recommended |
<body> | Holds everything visible on the page | Required |
<div> | Block-level container for layout or grouping content | Layout |
<span> | Inline container for text and styling | Styling |
<section> | Groups related content into sections | Semantic Value |
<article> | Used for independent pieces like blog posts | Semantic Value |
<header> | Defines the top part (e.g., logo, nav) | Semantic Value |
<footer> | Defines the bottom part (e.g., copyright) | Semantic Value |
<main> | Marks the main content area | Semantic Value |
<nav> | Contains navigation links | Semantic Value |
<aside> | Holds side content like ads or tips | Semantic Value |
<h1>-<h6> | Headings (h1 = most important) | Semantic Value |
<p> | Creates a paragraph of text | Structural |
<br> | Line break (new line) | Structural |
<hr> | Horizontal line for content separation | Structural |
<strong> | Bold text to show importance | Styling |
<em> | Italic text for emphasis | Styling |
<b> | Bold text (no special meaning) | Styling |
<i> | Italic text (no special meaning) | Styling |
<u> | Underlined text | Styling |
<mark> | Highlights the text | Styling |
<small> | Smaller text | Styling |
<del> | Strikethrough (deleted) text | Styling |
<ins> | Inserted text (usually underlined) | Styling |
<sub> | Subscript text (below) | Styling |
<sup> | Superscript text (above) | Styling |
<a> | Adds a link (use href) | Fundamental |
<img> | Displays an image (needs src) | Visual Content |
<figure> | Groups an image and caption | Semantic Value |
<figcaption> | Caption for a <figure> | Semantic Value |
<audio> | Plays audio files | Media |
<video> | Plays video files | Media |
<source> | Provides media source for <video>/<audio> | Media |
<iframe> | Displays external page in a box | Media |
<ul> | Unordered (bullet point) list | Structural |
<ol> | Ordered (numbered) list | Structural |
<li> | List item inside ul or ol | Structural |
<table> | Starts a table | Structural |
<tr> | Adds a row to a table | Structural |
<td> | Adds data cell | Structural |
<th> | Adds table header cell (bold) | Structural |
<thead> | Groups header rows | Semantic Value |
<tbody> | Groups body rows | Semantic Value |
<tfoot> | Groups footer rows | Semantic Value |
<form> | Creates a form to collect user input | Fundamental |
<input> | Creates an input field | Fundamental |
<textarea> | Multi-line input field | Fundamental |
<button> | Clickable button | Fundamental |
<select> | Drop-down menu | Form Element |
<option> | Options for drop-down | Form Element |
<label> | Label for form elements | Accessibility |
<details> | Expandable section of content | Semantic Value |
<summary> | Title for <details> | Semantic Value |
<canvas> | Drawing area using JavaScript | Visual/Graphics |
<svg> | Draw shapes and icons using code | Graphics |
<noscript> | Fallback if JavaScript is disabled | Accessibility |
<template> | Hidden HTML for future use | Advanced |
Common Beginner Mistakes to Avoid
1. Missing Closing Tags
Always close your tags. Missing tags can break layout and cause rendering issues.
2. Improper Nesting
Tags must be closed in the correct order. Nest properly.
3. Missing alt on Images
Alt text helps screen readers and SEO. Always use it for <img>.
4. Block Inside Inline
Never place block elements like <div> inside inline tags like <span>.
5. Missing Viewport Meta
Missing this tag causes mobile scaling issues.
6. Too Much Inline Styling
Keep your styles in CSS. Avoid inline styles for reusable and clean code.
Hands-On Practice
Apply responsive design concepts in our interactive playground:
- Experiment with media queries and breakpoints
- Test flexbox and grid layouts
- See real-time responsive preview
- Save your responsive designs
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Mobile-first base styles */
.container {
width: 100%;
padding: 1rem;
}
/* Tablet breakpoint */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
/* Desktop breakpoint */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Practice</h1>
<p>Try adding your own responsive elements</p>
</div>
</body>
</html>