HTML Code Tips
Master HTML and HTML5 with quick, practical tips. Learn the right tags, structure, and usage through live examples and best practices — all in one place.
Gettting started
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<h1>Welcome to Ohio Codespace</h1>
</body>
</html>
Comment
<!-- This is a comment -->
<!-- Or you can comment out a
large number of lines. -->
Paragraph
<p>Hello world</p>
<p>Welcome to Ohio.</p>
HTML link
<a href="https://ohiocodespace.vercel.app">Ohio</a>
<a href="mailto:doe@xyz.com">Email</a>
<a href="tel:+234123456789">Call</a>
<a href="sms:+234123456789&body=ha%20ha">Msg</a>
| href | The URL that the hyperlink points to |
| rel | Relationship of the linked URL |
| target | Link target location: _self, _blank, _top, _parent |
Image tag
<img
loading="lazy"
src="https://placehold.co/300x400"
alt="Describe image here"
width="400"
height="400"
>
| src | Required, image location. (URL | Path) |
| alt | Describtion of the image |
| width | Width of the image |
| Height | Height of the image |
| Loading | How the browser should load |
Headings
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
Text Formatting Tags
<b>Bold Text</b>
<strong>This text is important</strong>
<i>Italic Text</i>
<em>This text is emphasized</em>
<u>Underline Text</u>
<pre>Pre-formatted Text</pre>
<code>Source code</code>
<del>Deleted text</del>
<mark>Highlighted text (HTML5)</mark>
<ins>Inserted text</ins>
<sup>Makes text superscripted</sup>
<sub>Makes text subscripted</sub>
<small>Makes text smaller</small>
<kbd>Ctrl</kbd>
<blockquote>Text Block Quote</blockquote>
Section Divisions
<div></div> Division or Section of Page Content
<span></span> Section of text within other content
<p></p> Paragraph of Text
<br> Line Break
<hr> Basic Horizontal Line
Inline Frame
<iframe title="New York"
width="342"
height="306"
id="gmap_canvas"
src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed"
scrolling="no">
</iframe>
JavaScript in HTML
<!-- INTERNAL JAVASCRIPT -->
<script type="text/javascript">
let text = "Hello Ohio";
alert(text);
</script>
<!-- EXTERNAL JAVASCRIPT -->
<script src="script.js"></script>
CSS in HTML
<!-- INTERNAL CSS -->
<style type="text/css">
h1 {
color: blue;
}
</style>
<!-- EXTERNAL CSS -->
<style rel="stylesheet" href="style.css"></style>
HTML 5 TAGS
Document
<header>
<nav>
<ul>
<li><a href="#">Edit Page</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</nav>
</header>
Header Navigation
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>Ohio Codespace</h1>
</main>
<footer>
<p>©2025 Ohio Codespace</p>
</footer>
</body>
HTML5 Tags
| Tag | Description | Tag | Description |
|---|---|---|---|
| <article> | Content that’s independent | <aside> | Secondary content |
| <audio> | Embeds a sound, or an audio stream | <bdi> | The Bidirectional Isolate element |
| <canvas> | Draw graphics via JavaScript | <data> | Machine readable content |
| <datalist> | A set of pre-defined options | <details> | Additional information |
| <dialog> | A dialog box or sub-window | <embed> | Embeds external application |
| <figcaption> | A caption or legend for a figure | <figure> | A figure illustrated |
| <footer> | Footer or least important | <header> | Masthead or important information |
| <main> | The main content of the document | <mark> | Text highlighted |
| <meter> | A scalar value within a known range | <nav> | A section of navigation links |
| <output> | The result of a calculation | <picture> | A container for multiple image sources |
| <progress> | The completion progress of a task | <rp> | Provides fall-back parenthesis |
| <rt> | Defines the pronunciation of character | <ruby> | Represents a ruby annotation |
| <section> | A group in a series of related content | <source> | Resources for the media elements |
| <summary> | A summary for the <details> element | <template> | Defines the fragments of HTML |
| <time> | A time or date | <track> | Text tracks for the media elements |
| <video> | Embeds video | <wbr> | A line break opportunity |
HTML5 Audio
<audio controls
src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
Your browser does not support the audio element.
</audio>
HTML5 Video
<video controls="" width="100%">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
HTML5 Progress
<progress value="50" max="100"></progress>
HTML5 mark
<p>I Love <mark>Ohio</mark></p>
HTML5 Kdi
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
</ul>
HTML5 Ruby
<ruby>
汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>
HTML TABLES
Table Example
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>19</td>
</tr>
<tr>
<td>Doe</td>
<td>35</td>
</tr>
</tbody>
</table>
HTML5 Table Tags
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Defines a group of columns |
| <col> | Defines a column within a table |
| <thead> | Groups the header content |
| <tbody> | Groups the body content |
| <tfoot> | Groups the footer content |
<th> Attributes
| Attribute | Description |
|---|---|
colspan |
Number of columns a cell should span |
headers |
One or more header cells a cell is related to |
rowspan |
Number of rows a cell should span |
abbr |
Description of the cell's content |
scope |
The header element relates to |
<td> Attributes
| Attribute | Description |
|---|---|
colspan |
Number of columns a cell should span |
headers |
One or more header cells a cell is related to |
rowspan |
Number of rows a cell should span |
HTML LISTS
Unordered list
<ul>
<li>I'm an item</li>
<li>I'm another item</li>
<li>I'm another item</li>
</ul>
Ordered list
<ol>
<li>I'm the first item</li>
<li>I'm the second item</li>
<li>I'm the third item</li>
</ol>
Definition list
<dl>
<dt>A Term</dt>
<dd>Definition of a term</dd>
<dt>Another Term</dt>
<dd>Definition of another term</dd>
</dl>
HTML Forms
Form Tags
<form method="POST" action="api/login">
<label for="mail">Email: </label>
<input type="email" id="mail" name="mail">
<br/>
<label for="pw">Password: </label>
<input type="password" id="pw" name="pw">
<br/>
<input type="submit" value="Login">
<br/>
<input type="checkbox" id="ck" name="ck">
<label for="ck">Remember me</label>
</form>
Form Attribute
| Attribute | Description |
|---|---|
name |
Name of form for scripting |
action |
URL of form script |
method |
HTTP method, POST / GET (default) |
enctype |
Media type |
onsubmit |
Runs when the form was submit |
onreset |
Runs when the form was reset |
Label Tags
<!-- Nested label -->
<label>Click me
<input type="text" id="user" name="name"/>
</label>
<!-- 'for' attribute -->
<label for="user">Click me</label>
<input id="user" type="text" name="name"/>
Input Tag
<label for="Name">Name:</label>
<input type="text" name="Name" id="">
Textarea Tag
<textarea rows="2" cols="30" name="address" id="address"></textarea>
Checkboxes
<input type="checkbox" name="s" id="soc">
<label for="soc">Soccer</label>
<input type="checkbox" name="s" id="bas">
<label for="bas">Baseball</label>
Radio Buttons
<input type="radio" name="gender" id="m">
<label for="m">Male</label>
<input type="radio" name="gender" id="f">
<label for="f">Female</label>
Fieldset Tags
<fieldset>
<legend>Your favorite monster</legend>
<input type="radio" id="kra" name="m">
<label for="kra">Kraken</label><br/>
<input type="radio" id="sas" name="m">
<label for="sas">Sasquatch</label>
</fieldset>
Select Tags
<label for="city">City:</label>
<select name="city" id="city">
<option value="1">Sydney</option>
<option value="2">Melbourne</option>
<option value="3">Cromwell</option>
</select>
Datalist Tags(HTML5)
<label for="b">Choose a browser: </label>
<input list="list" id="b" name="browser"/>
<datalist id="list">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
Submit and Reset Buttons
<form action="register.php" method="post">
<label for="foo">Name:</label>
<input type="text" name="name" id="foo">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
Input Attributes
<input type="text" name="username" value="Ohio" minlength="6" required />
| Attribute | Description |
|---|---|
| type="…" | The type of data that is being input |
| value="…" | Default value |
| name="…" | Used to describe this data in the HTTP request |
| id="…" | Unique identifier that other HTML elements refer to |
| readonly | Stops the user from modifying |
| disabled | Stops any interaction |
| checked | Checkbox or radio is selected |
| required | Makes the field compulsory |
| placeholder="…" | Temporary hint text shown inside input |
| autocomplete="off" | Disables browser auto-completion |
| autocapitalize="none" | Prevents auto capitalization |
| inputmode="…" | Specifies keyboard type for mobile |
| list="…" | Associates input with a <datalist> ID |
| maxlength="…" | Max number of characters |
| minlength="…" | Minimum number of characters |
| min="…" | Minimum numeric value (for number/range) |
| max="…" | Maximum numeric value (for number/range) |
| step="…" | Numeric step increment (e.g., 1, 0.1) |
| pattern="…" | Regular expression pattern to match |
| autofocus | Input gets focus when page loads |
| spellcheck | Enables browser spell checking |
| multiple | Allows multiple values (e.g., file uploads) |
| accept="" | Specifies file types accepted for uploads |
Input types
| Input Type | Preview |
|---|---|
| type="checkbox" | |
| type="radio" | |
| type="file" | |
| type="hidden" | (hidden) |
| type="text" | |
| type="password" | |
| type="image" | |
| type="reset" | |
| type="button" | |
| type="submit" | |
| New Input Types in HTML5 | |
| type="color" | |
| type="date" | |
| type="time" | |
| type="month" | |
| type="datetime-local" | |
| type="week" | |
| type="email" | |
| type="tel" | |
| type="url" | |
| type="number" | |
| type="search" | |
| type="range" | |
HTML meta Tags
Meta tags
<meta charset="utf-8">
<!-- title -->
<title>···</title>
<meta property="og:title" content="···">
<meta name="twitter:title" content="···">
<!-- url -->
<link rel="canonical" href="https://···">
<meta property="og:url" content="https://···">
<meta name="twitter:url" content="https://···">
<!-- description -->
<meta name="description" content="···">
<meta property="og:description" content="···">
<meta name="twitter:description" content="···">
<!-- image -->
<meta property="og:image" content="https://···">
<meta name="twitter:image" content="https://···">
<!-- ua -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">
Open Graph
<meta property="og:type" content="website">
<meta property="og:locale" content="en_CA">
<meta property="og:title" content="HTML Cheatsheet">
<meta property="og:url" content="https://quickref.me/html">
<meta property="og:image" content="https://xxx.com/image.jpg">
<meta property="og:site_name" content="QuickRef.ME">
<meta property="og:description" content="A handy HTML cheatsheet for developers and learners.">
Twitter Cards
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@FechinLi">
<meta name="twitter:title" content="HTML cheatsheet">
<meta name="twitter:url" content="https://quickref.me/html">
<meta name="twitter:description" content="Description of this page">
<meta name="twitter:image" content="https://xxx.com/image.jpg">
Geotagging
<meta name="ICBM" content="45.416667,-75.7">
<meta name="geo.position" content="45.416667;-75.7">
<meta name="geo.region" content="ca-on">
<meta name="geo.placename" content="Ottawa">