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:
