Code Flick TechnologiesToolscodeftech.com

HTML Cheatsheet

One-page reference for HTML5 — semantics, forms, tables, media, metadata. Copy-ready snippets.

100% in your browser. Files never uploaded.

Document

HTML5 boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
</head>
<body></body>
</html>
Meta description
<meta name="description" content="…">
Stylesheet
<link rel="stylesheet" href="style.css">
Script (deferred)
<script src="main.js" defer></script>

Semantic

Header / Nav
<header>
  <nav>…</nav>
</header>
Main / Article
<main>
  <article>…</article>
</main>
Section
<section><h2>Title</h2>…</section>
Aside / Footer
<aside>…</aside>
<footer>…</footer>
Figure
<figure>
  <img src="…" alt="…">
  <figcaption>Caption</figcaption>
</figure>

Forms

Form
<form action="/submit" method="post">…</form>
Input + label
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
Email / number / date
<input type="email">
<input type="number" min="0" max="100">
<input type="date">
Textarea
<textarea rows="4"></textarea>
Select
<select name="country">
  <option value="qa">Qatar</option>
  <option value="ae">UAE</option>
</select>
Submit
<button type="submit">Send</button>

Tables

Basic
<table>
  <thead><tr><th>Name</th><th>Score</th></tr></thead>
  <tbody>
    <tr><td>Alice</td><td>42</td></tr>
  </tbody>
</table>

Media

Image
<img src="path.jpg" alt="…" width="300" height="200">
Picture (responsive)
<picture>
  <source srcset="hi.webp" type="image/webp">
  <img src="hi.jpg" alt="…">
</picture>
Video
<video controls src="movie.mp4"></video>
Audio
<audio controls src="song.mp3"></audio>

Lists & links

Unordered list
<ul>
  <li>One</li>
  <li>Two</li>
</ul>
Ordered list
<ol>
  <li>First</li>
</ol>
Definition list
<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>
Link
<a href="https://…">Text</a>
New tab
<a href="…" target="_blank" rel="noopener noreferrer">…</a>

How to use

  1. 1
    Browse the snippets
    Document, semantic, forms, tables, media, lists.
  2. 2
    Copy any
    One click per row.

Related tools