Ultimate HTML Cheatsheet

HTML is the standard markup language for creating web pages and applications. This cheatsheet covers essential HTML concepts, tags, attributes, and examples to help you build web pages effectively.

For more details checkout my step-by-step HTML tutorial.

Boilerplate

<!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>
    <!-- Body -->
  </body>
</html>

Headings

There are six headings in HTML, <h1> is the largest and <h6> is the 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>

Container Elements

<div>This is a div block</div>
<span>This is a span block</span>
<p>This is a paragraph</p>
<pre>This is preformatted text</pre>
<code>console.log('Hello World')</code>

Text Formatting

<b>This is bold text</b>
<i>This is italic text</i>
<strong>This is strong text</strong>
<em>This is emphasized text</em>
<sub>This is subscript text</sub>
<sup>This is superscript text</sup>

Lists

Unordered List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Media

<img src="image.jpg" alt="Image" />

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

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4" />
</video>

Table

<table>
  <caption>
    Demo Table
  </caption>
  <thead>
    <tr>
      <th>Column1</th>
      <th colspan="2">Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data1</td>
      <td>Data2</td>
      <td>Data2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>&nbsp;</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tfoot>
</table>

Links

<a href="https://coderrshyam.vercel.app">CoderrShyam</a>

Forms

Form Structure

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <input type="submit" value="Submit" />
</form>

Form Elements

Element	Purpose	Example
Text Input	Free text input	`<input type="text" name="username" placeholder="Enter Username" />`
Email Input	Email address validation	`<input type="email" name="email" placeholder="Enter Email" />`
Password Input	Masked password field	`<input type="password" name="password" placeholder="Enter Password" />`
Checkbox	Multiple selections	`<input type="checkbox" name="agree" value="yes" /> I agree`
Radio Button	Single selection	`<input type="radio" name="gender" value="male" /> Male`
Submit Button	Submit the form	`<input type="submit" value="Submit" />`
Button	Clickable button	`<button type="button">Click Me!</button>`
Select (Dropdown)	Dropdown selection	`<select name="country"><option>India</option></select>`
Textarea	Multi-line input	`<textarea rows="4" cols="50">Enter comments</textarea>`
File Input	Upload file	`<input type="file" name="file" />`
Range Input	Number slider	`<input type="range" name="range" min="0" max="100" />`
Number Input	Only numeric values	`<input type="number" name="quantity" min="1" max="5" />`
Date Input	Calendar selection	`<input type="date" name="date" />`
Search Input	Search field	`<input type="search" name="search" placeholder="Search" />`
URL Input	Valid URL	`<input type="url" name="url" placeholder="Enter URL" />`

Meta Tags

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

Characters & Symbols

&copy;
<!-- © -->
&reg;
<!-- ® -->
&trade;
<!-- ™ -->
&lt;
<!-- < -->
&gt;
<!-- > -->
&amp;
<!-- & -->

Random Text

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
</p>

Semantic Elements

<header>Header content</header>
<footer>Footer content</footer>
<section>Section content</section>
<article>Article content</article>
<aside>Aside content</aside>

CSS Integration

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

<link rel="stylesheet" href="styles.css" />

Accessibility

<img src="image.jpg" alt="Image description" />
<label for="name">Name:</label>
<input type="text" id="name" name="name" />

Responsive Design

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

JavaScript Integration

<script>
  console.log("Hello World");
</script>

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

Comments

<!-- This is a comment -->

Other Tips for HTML Beginners

Best Practices

Always use lowercase tags
Always close the tags
Use indentation for readability
Use alt attribute for images
Use semantic elements
Add meta tags for SEO
Use CSS for styling
Use JavaScript for interactivity
Use a Modern Text Editor: Tools like Visual Studio Code provide syntax highlighting, autocompletion, and Emmet support.

Utilize Emmet: ul>li*5 → expands to

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Indent Your Code: Use consistent indentation for readability.
Always Close Tags: Helps avoid rendering issues.
Learn CSS and JavaScript: HTML works best when combined with CSS and JS.
Use Comments Wisely: Leave notes or disable sections of code.
Practice Regularly: Build different web pages to improve.
Learn about Responsive Design: Ensure your site works across devices with flexible grids and media queries.

Conclusion

HTML is the backbone of web development. By mastering it, you can create beautiful and functional websites with confidence.

<!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>  </body> </html>

<img src="image.jpg" alt="Image" /> <audio controls> <source src="audio.mp3" type="audio/mpeg" /> </audio> <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4" /> </video>

Table

<table>
  <caption>
    Demo Table
  </caption>
  <thead>
    <tr>
      <th>Column1</th>
      <th colspan="2">Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data1</td>
      <td>Data2</td>
      <td>Data2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>&nbsp;</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tfoot>
</table>

Forms

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <input type="submit" value="Submit" />
</form>

Element	Purpose	Example
Text Input	Free text input	`<input type="text" name="username" placeholder="Enter Username" />`
Email Input	Email address validation	`<input type="email" name="email" placeholder="Enter Email" />`
Password Input	Masked password field	`<input type="password" name="password" placeholder="Enter Password" />`
Checkbox	Multiple selections	`<input type="checkbox" name="agree" value="yes" /> I agree`
Radio Button	Single selection	`<input type="radio" name="gender" value="male" /> Male`
Submit Button	Submit the form	`<input type="submit" value="Submit" />`
Button	Clickable button	`<button type="button">Click Me!</button>`
Select (Dropdown)	Dropdown selection	`<select name="country"><option>India</option></select>`
Textarea	Multi-line input	`<textarea rows="4" cols="50">Enter comments</textarea>`
File Input	Upload file	`<input type="file" name="file" />`
Range Input	Number slider	`<input type="range" name="range" min="0" max="100" />`
Number Input	Only numeric values	`<input type="number" name="quantity" min="1" max="5" />`
Date Input	Calendar selection	`<input type="date" name="date" />`
Search Input	Search field	`<input type="search" name="search" placeholder="Search" />`
URL Input	Valid URL	`<input type="url" name="url" placeholder="Enter URL" />`

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

Other Tips for HTML Beginners

Always use lowercase tags

Always close the tags

Use indentation for readability

Use alt attribute for images

Use semantic elements

Add meta tags for SEO

Use CSS for styling

Use JavaScript for interactivity

Use a Modern Text Editor: Tools like Visual Studio Code provide syntax highlighting, autocompletion, and Emmet support.

Utilize Emmet: ul>li*5 → expands to

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Indent Your Code: Use consistent indentation for readability.

Always Close Tags: Helps avoid rendering issues.

Learn CSS and JavaScript: HTML works best when combined with CSS and JS.

Use Comments Wisely: Leave notes or disable sections of code.

Practice Regularly: Build different web pages to improve.

Learn about Responsive Design: Ensure your site works across devices with flexible grids and media queries.