HTML Cheatsheet with Explanations
1. Introduction to HTML
HTML (HyperText Markup Language) is the standard language for creating web pages. It structures
the content on the web using various elements and tags. Below is a detailed cheatsheet covering
everything from basic to advanced HTML concepts.
2. Basic HTML Structure
Every HTML document follows a basic structure. The DOCTYPE declaration defines the document
type and version of HTML. The <html> element is the root of an HTML page, containing the head
and body sections.
<!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>Hello, World!</h1>
</body>
</html>
3. Headings & Paragraphs
HTML provides six levels of headings (<h1> to <h6>) and the <p> element for paragraphs.
Headings define the structure of a webpage and are important for SEO.
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph of text.</p>
4. Text Formatting
HTML provides various formatting tags to modify the appearance of text, such as bold, italic,
underline, and highlighting.
<strong>Bold Text</strong>
<em>Italic Text</em>
<u>Underlined Text</u>
<mark>Highlighted</mark>
<del>Strikethrough</del>
5. Forms & Inputs
Forms allow users to input data. They are created using the <form> element and include various
input fields such as text boxes, checkboxes, radio buttons, dropdowns, and buttons.
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="checkbox" id="agree" name="agree">
<label for="agree">I Agree</label>
<button type="submit">Submit</button>
</form>
6. Tables
Tables organize data in rows and columns. The <table> element contains <tr> for rows, <th> for
headers, and <td> for data cells.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
7. Semantic Elements
Semantic elements define the meaning of content, improving accessibility and SEO. For example,
<header> represents the page header, <article> defines self-contained content, and <footer>
represents the page footer.
<header>Header Section</header>
<nav>Navigation Menu</nav>
<main>Main Content</main>
<footer>Footer Section</footer>
8. Multimedia & Embeds
HTML allows embedding multimedia like images, videos, and audio. The <img> tag is used for
images, the <video> tag for videos, and the <audio> tag for audio files.
<img src="image.jpg" alt="Description" width="200">
<video src="video.mp4" controls></video>
<audio src="audio.mp3" controls></audio>
9. Meta Tags & SEO
Meta tags provide metadata about an HTML document, improving search engine optimization (SEO)
and defining how content is displayed.
<meta name="description" content="A brief description of the page">
<meta name="keywords" content="HTML, CSS, Web Development">
<meta name="author" content="Your Name">
10. Advanced Features
HTML also allows embedding APIs, linking external stylesheets, and integrating JavaScript to create
interactive and dynamic web applications.
