HTML Cheat Sheet

Basic structure of an HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Defines the HTML version. For HTML5:

<!DOCTYPE html>

The basic elements of an HTML document:

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Use comments to annotate your HTML code:

<!-- This is a comment -->

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML Cheat Sheet">

Defines the title shown in the browser tab:

<title>My Web Page</title>

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">

Internal CSS styles go inside the <style> tag:

<style>
  body {
    background-color: #f0f0f0;
  }
</style>

Use to embed JavaScript:

<script>
  console.log("Hello, JavaScript!");
</script>

Or link an external script:

<script src="app.js"></script>

Use headings to structure content hierarchically:

<h1>Main Heading</h1>
<h2>Subheading</h2>
...
<h6>Smallest Heading</h6>

Define blocks of text using paragraphs:

<p>This is a paragraph of text.</p>

<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<strong>Important</strong>
<em>Emphasis</em>

Line one<br>
Line two

<hr>

New section below horizontal rule

Ordered List

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Unordered List

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Description List

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Anchor Tag (a)

<a href="https://example.com">Visit Example</a>

target and rel attributes

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

<nav> Element

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

img tag and attributes (src, alt, width, height)

<img src="image.jpg" alt="Description" width="300" height="200">

figure and figcaption

<figure>
  <img src="photo.jpg" alt="Photo">
  <figcaption>A scenic view</figcaption>
</figure>

audio and video tags

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

source tag

<picture>
  <source media="(min-width: 650px)" srcset="img-large.jpg">
  <source media="(min-width: 465px)" srcset="img-medium.jpg">
  <img src="img-small.jpg" alt="Responsive image">
</picture>

table, thead, tbody, tfoot

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>30</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">End</td></tr>
  </tfoot>
</table>

tr, td, th

<tr><td>Row Cell</td><td>Another Cell</td></tr>
<tr><th>Header 1</th><th>Header 2</th></tr>

colspan and rowspan

<td colspan="2">Merged Column</td>
<td rowspan="2">Merged Row</td>

form tag and attributes (action, method)

<form action="/submit" method="post">
  ...
</form>

input types (text, email, password, checkbox, radio, file, etc.)

<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">
<input type="checkbox" name="subscribe">
<input type="radio" name="gender" value="male">
<input type="file" name="resume">

label, textarea, select, option, button

<label for="msg">Message:</label>
<textarea id="msg" name="message"></textarea>

<select name="country">
  <option value="in">India</option>
  <option value="us">USA</option>
</select>

<button type="submit">Send</button>

fieldset and legend

<fieldset>
  <legend>Personal Info</legend>
  <input type="text" name="name">
</fieldset>

header, footer, main, section, article, aside

<header>Header content</header>
<main>Main content</main>
<section>A section</section>
<article>An article</article>
<aside>Sidebar content</aside>
<footer>Footer content</footer>

div and span

<div>Block element</div>
<span>Inline element</span>

address, time, mark, code, pre, blockquote

<address>123 Main St</address>
<time datetime="2025-06-14">June 14, 2025</time>
<mark>Highlighted</mark>
<code>const x = 5;</code>
<pre>Formatted text block</pre>
<blockquote>Quoted text</blockquote>

Global attributes (id, class, style, title)

<div id="main" class="container" style="color: red;" title="Tooltip text">Content</div>

data-* attributes

<div data-user-id="123" data-role="admin">User Info</div>

aria-* accessibility attributes

<button aria-label="Close">X</button>

iframe

<iframe src="https://example.com" width="600" height="400"></iframe>

embed, object

<embed src="file.pdf" width="500" height="375" type="application/pdf">

<object data="movie.swf" width="400" height="300"></object>

Semantic Elements

Already shown under Semantic HTML — use them for better structure and accessibility.

Form Validation Attributes (required, pattern, etc.)

<input type="text" required pattern="[A-Za-z]{3,}">

Autofocus, Placeholder, Disabled, Readonly

<input type="text" placeholder="Enter name" autofocus>
<input type="text" value="Fixed" disabled>
<input type="text" value="Read-only" readonly>

Global attributes (id, class, style, title)

<div id="main" class="container" style="color: red;" title="Tooltip text">Content</div>

data-* attributes

<div data-user-id="123" data-role="admin">User Info</div>

aria-* accessibility attributes

<button aria-label="Close">X</button>

iframe

<iframe src="https://example.com" width="600" height="400"></iframe>

embed, object

<embed src="file.pdf" width="500" height="375" type="application/pdf">

<object data="movie.swf" width="400" height="300"></object>

Semantic Elements

Already shown under Semantic HTML — use them for better structure and accessibility.

Form Validation Attributes (required, pattern, etc.)

<input type="text" required pattern="[A-Za-z]{3,}">

Autofocus, Placeholder, Disabled, Readonly

<input type="text" placeholder="Enter name" autofocus>
<input type="text" value="Fixed" disabled>
<input type="text" value="Read-only" readonly>

alt text

<img src="cat.jpg" alt="A sleeping cat">

tabindex

<div tabindex="0">Focusable content</div>

aria-labels

<button aria-label="Close dialog">X</button>

Entities (&amp;, &lt;, &gt;, &quot;, etc.)

& = &
&lt; = <
&gt; = >
&quot; = "