HTML Tags Cheatsheet
HTML Tags Cheatsheet
A quick-reference guide for HTML5 elements, including document scaffolding, semantic layout structure, text formatting, list arrays, interactive forms, media embeds, tables, and global attributes.
Document Scaffolding
Basic structure of a standard, responsive HTML5 document.
<!DOCTYPE html> <!-- Declares document as HTML5 -->
<html lang="en"> <!-- Root container with primary language -->
<head> <!-- Contains metadata, styles, and scripts -->
<meta charset="UTF-8"> <!-- Sets character encoding to UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive layout setup -->
<title>Document Title</title> <!-- Text shown in browser tab -->
<link rel="stylesheet" href="style.css"> <!-- Links external stylesheet -->
<script src="script.js" defer></script> <!-- Loads external Javascript, deferred till document parsed -->
</head>
<body> <!-- All visible page content goes here -->
<!-- Content here -->
</body>
</html>
Structural & Semantic Layout (HTML5)
Semantic elements clearly describe their meaning to both the browser and search engine crawlers, improving SEO and accessibility.
<header> <!-- Introduction or navigation container -->
<nav> <!-- Navigation links menu -->
<main> <!-- Unique, main content body of the document (only one per page) -->
<section> <!-- Thematic grouping of content, typically with a heading -->
<article> <!-- Self-contained, syndicatable post (e.g. blog post, forum card) -->
<aside> <!-- Secondary sidebar or tangentially related callout -->
<footer> <!-- Footer containing copyright, site directories, or contact info -->
<div> <!-- Generic block-level flow container (used for layout styling) -->
<span> <!-- Generic inline-level text wrapper -->
Text & Content Formatting
<h1>...<h6> <!-- Headings level 1 (largest) down to 6 (smallest) -->
<p>This is a paragraph.</p> <!-- Paragraph of body text -->
<br> <!-- Inline line break (self-closing) -->
<hr> <!-- Horizontal rule/thematic break line (self-closing) -->
<a href="https://site.com">Link</a> <!-- Anchor/Hyperlink tag -->
<a href="mailto:a@b.com">Email Us</a> <!-- Email link trigger -->
<a href="tel:+123456">Call Us</a> <!-- Telephone dial link -->
<strong>Bold Text</strong> <!-- Strong importance (renders bold, read with emphasis by screen readers) -->
<em>Italicized Text</em> <!-- Emphasis (renders italicized) -->
<mark>Highlighted Text</mark> <!-- Represents highlighted/marked reference text -->
<blockquote> <!-- Block quotation block from an external source -->
<p>To be or not to be...</p>
</blockquote>
<pre> <!-- Preformatted text (preserves whitespaces and line breaks) -->
<code>const x = 10;</code> <!-- Inline computer code block -->
Lists
<!-- 1. Unordered List (Bullet points) -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- 2. Ordered List (Numbered list) -->
<ol>
<li>First</li>
<li>Second</li>
</ol>
<!-- 3. Description/Definition List -->
<dl>
<dt>HTML</dt> <!-- Term -->
<dd>HyperText Markup Language</dd> <!-- Definition -->
</dl>
Forms & User Inputs
<form action="/submit" method="POST"> <!-- Container for interactive user inputs -->
<!-- Text Input -->
<label for="username">Username:</label> <!-- Binds explicitly to input with matching ID -->
<input type="text" id="username" name="user" placeholder="Enter name" required>
<!-- Password Input -->
<label for="pass">Password:</label>
<input type="password" id="pass" name="pwd">
<!-- Checkboxes -->
<label>
<input type="checkbox" name="agree" value="yes"> I agree to terms
</label>
<!-- Radio Buttons (Same name groups them so only one can be selected) -->
<label><input type="radio" name="gender" value="m"> Male</label>
<label><input type="radio" name="gender" value="f"> Female</label>
<!-- Dropdown Select Menu -->
<label for="choices">Choose option:</label>
<select id="choices" name="option">
<option value="val1">Option 1</option>
<option value="val2" selected>Option 2 (Default)</option>
</select>
<!-- Large Multi-line Textarea -->
<label for="msg">Message:</label>
<textarea id="msg" name="message" rows="4" cols="50"></textarea>
<!-- Form Submission Buttons -->
<button type="submit">Submit Form</button>
<button type="reset">Reset Fields</button>
</form>
Media & Embeds
<!-- Image Embed -->
<img src="pic.jpg" alt="Description of image" width="600" height="400" loading="lazy">
<!-- Audio Embed -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<!-- Video Embed -->
<video width="320" height="240" controls poster="thumbnail.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>
<!-- External Iframe Embed -->
<iframe src="https://example.com" width="100%" height="400" frameborder="0" title="Frame Title"></iframe>
Tables
<table> <!-- Initializes table wrapper -->
<caption>Weekly Sales Summary</caption> <!-- Title summary of table contents -->
<thead> <!-- Table Header Row block -->
<tr> <!-- Table Row -->
<th>Day</th> <!-- Header cell (renders bold, centered) -->
<th>Revenue</th>
</tr>
</thead>
<tbody> <!-- Table Body Rows block -->
<tr>
<td>Monday</td> <!-- Standard data cell -->
<td>$1,200</td>
</tr>
<tr>
<td>Tuesday</td>
<td>$1,500</td>
</tr>
</tbody>
<tfoot> <!-- Table Footer Row block -->
<tr>
<td>Total</td>
<td>$2,700</td>
</tr>
</tfoot>
</table>
Common Global Attributes
These attributes are universal and can be used on any HTML element.
id="unique-id" # Globally unique identifier (must be unique on the page)
class="style-class another-class" # CSS stylesheet style class selector mapping
style="color: red; padding: 10px;" # Direct inline CSS styling declarations
title="Tooltip Text" # Tooltip text shown on hover
data-user-id="123" # Custom dataset attributes (read/write in JS via dataset.userId)
tabindex="0" # Directs keyboard focus order (0 is normal tab flow, -1 removes from tab flow)
hidden # Hides element visually and hides it from screen readers