HTML Cheatsheet | Blog | CodeWithHarry

Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Headings

There are six levels of headings. <h1> is the most important (largest), and <h6> is the least important (smallest).

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Containers

Container elements group or hold other content.

<div>This is a block container (div)</div>
<span>This is an inline container (span)</span>
<p>This is a paragraph</p>
<pre>Preserves formatting and spaces</pre>
<code>console.log("Code snippet")</code>
<blockquote>A block quotation of text</blockquote>

Text Formatting

<b>Bold text</b>
<strong>Important text (semantic)</strong>
<i>Italic text</i>
<em>Emphasized text (semantic)</em>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Smaller text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>

Lists

Ordered List

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

Unordered List

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

Definition List

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

Media

<img src="image.jpg" alt="Description" width="300" height="200">
 
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
 
<video width="480" height="320" controls>
  <source src="video.mp4" type="video/mp4">
</video>
 
<iframe src="https://www.example.com" width="600" height="400"></iframe>

Tables

<table border="1">
  <caption>Sample Table</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th colspan="2">Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Rowspan</td>
      <td>Data A</td>
      <td>Data B</td>
    </tr>
    <tr>
      <td>Data C</td>
      <td>Data D</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td colspan="2">100</td>
    </tr>
  </tfoot>
</table>

Links

<a href="https://www.codewithharry.com" target="_blank" rel="noopener">Visit CodeWithHarry</a>
<a href="mailto:[email protected]">Send Email</a>
<a href="#section1">Jump to Section</a>

Forms & Inputs

<form action="/action.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>
 
  <input type="password" name="password" placeholder="Enter Password"><br>
 
  <input type="checkbox" name="subscribe" value="yes"> Subscribe<br>
 
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female<br>
 
  <select name="country">
    <option value="us">USA</option>
    <option value="ca">Canada</option>
  </select><br>
 
  <textarea name="comments" rows="4" cols="30"></textarea><br>
 
  <input type="file" name="resume"><br>
  <input type="number" name="age" min="18" max="100"><br>
  <input type="range" name="volume" min="0" max="100"><br>
  <input type="date" name="dob"><br>
  <input type="email" name="email"><br>
  <input type="url" name="website"><br>
  <input type="search" name="query"><br>
 
  <button type="submit">Submit</button>
</form>

Characters & Symbols

&copy; ©
&lt; <
&gt; >
&amp; &
&dollar; $
&trade; ™
&reg; ®
&nbsp; (non-breaking space)

Semantic Elements

<header>Page header</header>
<nav>Navigation links</nav>
<section>Section of content</section>
<article>Independent article</article>
<aside>Sidebar content</aside>
<footer>Page footer</footer>
<main>Main content</main>

Meta Tags

<meta charset="UTF-8">
<meta name="description" content="HTML Cheatsheet">
<meta name="keywords" content="HTML, Cheatsheet, Code">
<meta name="author" content="Your Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS Integration

<style>
  body { font-family: Arial; background-color: #f0f0f0; }
</style>
<link rel="stylesheet" href="styles.css">

JavaScript Integration

<script>
  console.log("Hello, World!");
</script>
<script src="script.js"></script>

Comments

<!-- This is a comment -->

Accessibility

<img src="dog.jpg" alt="Brown dog running in a park">
<label for="email">Email:</label>
<input type="email" id="email" name="email">

Responsive Design

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  @media (max-width: 600px) {
    body { font-size: 16px; }
  }
</style>

Beginner Tips

Use a modern editor (VS Code) with Emmet.
Indent and close all tags properly.
Practice using semantic elements.
Always include alt for images.
Learn CSS + JavaScript alongside HTML.
Test your HTML in multiple browsers.
Use the W3C Validator to check for errors.

Download HTML CheatSheet