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.

Thanks for reading:

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

Table of Contents
Great! Next, complete checkout for full access to GeekBits.
Welcome back! You've successfully signed in.
You've successfully subscribed to GeekBits.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info has been updated.
Your billing was not updated.