HTML
Cheatsheet

Quick reference for essential HTML tags. Click any code block to copy.

Document Structure

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Content goes here -->
    <script src="script.js"></script>
</body>
</html>

Headings

<h1>Main Title (only one per page)</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<h4>Smaller heading</h4>
<h5>Even smaller</h5>
<h6>Smallest</h6>

Main Title (only one per page)

Section Heading

Subsection

Smaller heading

Even smaller
Smallest

Text Content

<p>Paragraph of text</p>

<strong>Important (bold)</strong>
<em>Emphasis (italic)</em>

<br>  <!-- Line break -->

<blockquote>
    A quoted passage
</blockquote>

<code>Inline code</code>

Paragraph of text

Important (bold) and Emphasis (italic)

Line one
Line two (with line break)

A quoted passage from someone wise

Use inline code for code snippets.

Links

<!-- External link -->
<a href="https://example.com">Link text</a>

<!-- Internal link -->
<a href="about.html">About page</a>

<!-- Same page anchor -->
<a href="#section-id">Jump to section</a>

<!-- Email link -->
<a href="mailto:email@example.com">Email me</a>

<!-- Open in new tab -->
<a href="https://example.com" target="_blank" rel="noopener">External link</a>

Internal link (same page anchor)

External link (opens in new tab) ↗

Email link (opens mail app)

Images

<img src="photo.jpg" alt="Description of image">

<!-- With specific size -->
<img src="photo.jpg" alt="Description" width="800" height="600">

<!-- Lazy loading -->
<img src="photo.jpg" alt="Description" loading="lazy">
Placeholder image showing dimensions 200 by 120

↑ This image has alt text: "Placeholder image showing dimensions 200 by 120"

Lists

<!-- Unordered list (bullets) -->
<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

<!-- Ordered list (numbers) -->
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Unordered (bullets)

  • Item one
  • Item two
  • Item three

Ordered (numbers)

  1. First item
  2. Second item
  3. Third item

Semantic Structure

<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
    
    <section>
        <h2>Section Title</h2>
        <p>Section content...</p>
    </section>
</main>

<aside>
    <!-- Sidebar content -->
</aside>

<footer>
    <p>&copy; 2025 Your Name</p>
</footer>

Article Title

Article content goes here...

© 2025 Your Name

↑ Dashed border shows the page structure visually

Generic Containers

<!-- Block-level container -->
<div class="container">
    <!-- Content -->
</div>

<!-- Inline container -->
<span class="highlight">Highlighted text</span>

Forms

<form action="/submit" method="post">
    <!-- Text input -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <!-- Email input -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <!-- Textarea -->
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5"></textarea>
    
    <!-- Submit button -->
    <button type="submit">Submit</button>
</form>

Tables

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>
Name Role Year
Alex Designer 2024
Jordan Developer 2025

Media

<!-- Audio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- Video -->
<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
</video>

<!-- YouTube embed -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID" 
        width="560" height="315" 
        frameborder="0" allowfullscreen>
</iframe>

Special Characters

&lt;    <!-- < -->
&gt;    <!-- > -->
&amp;   <!-- & -->
&quot;  <!-- " -->
&copy;  <!-- © -->
&nbsp;  <!-- Non-breaking space -->

Common Attributes

<!-- ID (unique on page) -->
<div id="unique-id"></div>

<!-- Class (reusable) -->
<div class="class-name"></div>
<div class="class-one class-two"></div>

<!-- Data attributes (custom data) -->
<div data-id="123" data-category="example"></div>

Accessibility

<!-- Alt text for images (required!) -->
<img src="photo.jpg" alt="Description">

<!-- ARIA label -->
<button aria-label="Close menu">×</button>

<!-- Hidden from screen readers -->
<span aria-hidden="true">🎨</span>

Common Mistakes

Bad

<p>Text (no closing tag)

<p><strong>Text</p></strong>
(wrong nesting)

<img src=photo.jpg>
(missing quotes)

Good

<p>Text</p>

<p><strong>Text</strong></p>

<img src="photo.jpg">

Best Practices

Quick Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Page description for SEO">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
    </header>
    
    <main>
        <h1>Page Title</h1>
        <p>Content goes here...</p>
    </main>
    
    <footer>
        <p>&copy; 2025 Your Name</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>

Other HTML tags...

HTML TAGS

Tag Description
<!--...--> Defines a comment
<!DOCTYPE>  Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation or an acronym
<acronym> Not supported in HTML5. Use <abbr> instead.
Defines an acronym
<address> Defines contact information for the author/owner of a document
<applet> Not supported in HTML5. Use <embed> or <object> instead.
Defines an embedded applet
<area> Defines an area inside an image map
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines embedded sound content
<b> Defines bold text
<base> Specifies the base URL/target for all relative URLs in a document
<basefont> Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo> Overrides the current text direction
<big> Not supported in HTML5. Use CSS instead.
Defines big text
<blockquote> Defines a section that is quoted from another source
<body> Defines the document's body
<br> Defines a single line break
<button> Defines a clickable button
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption> Defines a table caption
<center> Not supported in HTML5. Use CSS instead.
Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
<col> Specifies column properties for each column within a <colgroup> element 
<colgroup> Specifies a group of one or more columns in a table for formatting
<data> Adds a machine-readable translation of a given content
<datalist> Specifies a list of pre-defined options for input controls
<dd> Defines a description/value of a term in a description list
<del> Defines text that has been deleted from a document
<details> Defines additional details that the user can view or hide
<dfn> Specifies a term that is going to be defined within the content
<dialog> Defines a dialog box or window
<dir> Not supported in HTML5. Use <ul> instead.
Defines a directory list
<div> Defines a section in a document
<dl> Defines a description list
<dt> Defines a term/name in a description list
<em> Defines emphasized text 
<embed> Defines a container for an external application
<fieldset> Groups related elements in a form
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
<font> Not supported in HTML5. Use CSS instead.
Defines font, color, and size for text
<footer> Defines a footer for a document or section
<form> Defines an HTML form for user input
<frame> Not supported in HTML5.
Defines a window (a frame) in a frameset
<frameset> Not supported in HTML5.
Defines a set of frames
<h1> to <h6> Defines HTML headings
<head> Contains metadata/information for the document
<header> Defines a header for a document or section
<hgroup> Defines a header and related content
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<i> Defines a part of text in an alternate voice or mood
<iframe> Defines an inline frame
<img> Defines an image
<input> Defines an input control
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<label> Defines a label for an <input> element
<legend> Defines a caption for a <fieldset> element
<li> Defines a list item
<link> Defines the relationship between a document and an external resource (most used to link to style sheets)
<main> Specifies the main content of a document
<map> Defines an image map
<mark> Defines marked/highlighted text
<menu> Defines an unordered list
<meta> Defines metadata about an HTML document
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<noframes> Not supported in HTML5.
Defines an alternate content for users that do not support frames
<noscript> Defines an alternate content for users that do not support client-side scripts
<object> Defines a container for an external application
<ol> Defines an ordered list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output> Defines the result of a calculation
<p> Defines a paragraph
<param> Defines a parameter for an object
<picture> Defines a container for multiple image resources
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<search> Defines a search section
<section> Defines a section in a document
<select> Defines a drop-down list
<small> Defines smaller text
<source> Defines multiple media resources for media elements (<video> and <audio>)
<span> Defines a section in a document
<strike> Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text
<strong> Defines important text
<style> Defines style information for a document
<sub> Defines subscripted text
<summary> Defines a visible heading for a <details> element
<sup> Defines superscripted text
<svg> Defines a container for SVG graphics
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
<template> Defines a container for content that should be hidden when the page loads
<textarea> Defines a multiline input control (text area)
<tfoot> Groups the footer content in a table
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<time> Defines a specific time (or datetime)
<title> Defines a title for the document
<tr> Defines a row in a table
<track> Defines text tracks for media elements (<video> and <audio>)
<tt> Not supported in HTML5. Use CSS instead.
Defines teletype text
<u> Defines some text that is unarticulated and styled differently from normal text
<ul> Defines an unordered list
<var> Defines a variable
<video> Defines embedded video content
<wbr> Defines a possible line-break

 

Useful Coding Resources

W3Schools HTML Tag Glossary

HTML Structure Reference - MDN Web Docs

FreeCodeCamp - Extended Tutorials on HTML, CSS, Javascript and other coding languages

 

Extra Readings/Watchings/X-ings

X-ings

Net Art Anthology

Mouchette - Hyperlink Poetry

Taroko Gorge

 

Remember: HTML is for structure and meaning, not appearance. Use CSS for styling!