HTML CheatSheet

In this cheatsheet, we will provide you with the most common and useful HTML tags and tools you can use in your development.

HTML 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</title>
</head>
<body>
    
</body>
</html>

Comment

<!-- comment here -->
<!--
		or multiline comment
		like this.
-->

Image Linking

<img loading="lazy" src="link.png", alt="descriptive text", width="400", height="400">

Headings

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

Paragraph

<p>A simple paragraph</p>

Text Formatting

<b>Bold</b>
<em>Emphasis</em>
<i>Italic</i>
<u>Underline</u>
<strong>Important Text</strong>
<pre>Pre-formatted Text</pre>
<code>Source Code</code>
<del>Deleted Text</del>
<ins>Inserted Text</ins>
<sup>Superscript</sup>
<sub>Subscript</sub>
<kbd>Ctrl</kbd>
<blockquote>Block Quote</blockquote>

Divisions

<div>Div or Section</div>
<span>Section of Text within other content</span>
<br>Line Break
<hr> Horizontal Line

Inline Frames

<iframe src="link.here" frameborder="0" title="title" id="id" scrolling="yes"></iframe>

JavaScript

<script type="type/javascript">
    console.log("Hello GeekBits!!")
</script>
----------------------------------------------
<head>
    <script src="script.js"></script>
</head>

CSS

<style>
    h1 {
        color:  lightblue;
    }
</style>
------------------------------------------
<body>
    <link rel="stylesheet" href="style.css">
</body>

Meta Tags

<meta charset="utf-8">
<meta property="og:title" content="...">
<link rel="canonical"       href="https://···">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta property="og:title" content="GeekBits">
<meta property="og:url" content="#">
<meta property="og:image" content="#">
<meta property="og:site_name" content="Website name">
<meta property="og:description" content="Description">

Input Buttons

<input type="radio">
<input type="checkbox">
<input type="text">
<input type="email">
<input type="password">
<input type="submit">
<textarea name="info" id="" cols="30" rows="10"></textarea>
<select name="" id=""></select>

Form Attributes

<form action="url" name="name" method="POST/GET" enctype="media type", onsubmit="action on submit", onreset="action on reset"></form>

Lists

Unordered List

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Ordered list

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>

Definition List

<dl>
    <dt>1</dt>
    <dd>2</dd>
    <dt>3</dt>
    <dd>4</dd>
</dl>

Progress Bar

<progress value="current_value" max="max_value"></progress>

Media

<video src="media.mp4" controls="">Video text here</video>
<audio src="audio.mp3" controls="">Browser text</audio>

Table

<table>
    <thead>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td>
            <td>22</td>
        </tr>
        <tr>
            <td>33</td>
            <td>44</td>
        </tr>
    </tbody>
</table>

Conclusion

This article provides some quick and easy tags and features you can use when working with HTML files.

Grab a PDF copy of this cheatsheet in the resource below.

Download HTML Cheatsheet Below

HTML Cheatsheet Comprehensive

HTML Cheatsheet - Comprehensive.pdf

51 KB

Thanks for reading:

If you enjoy our content, please consider buying us a coffee to support our work: