Elevate Your HTML Coding Skills with Our Inclusive Cheatsheet: The Ultimate Web Development Companion!

<!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>HTML5 Example</title>
</head>
<body>
    <h1>Hello, Welcome to bestforstudy.com Cheatsheet</h1>
</body>
</html>

Comment

<!-- this is a comment -->

<!--
    Or you can comment out a
    large number of lines.
-->

Paragraph

<p>I'm from bestforstudy.com</p>

<p>I am Sharing the quick reference cheat sheet for HTML.</p>

Also see: Paragraph element

HTML link

<a href="https://coolcheatsheet.me">CoolCheatSheet</a>

<a href="mailto:[email protected]">Email</a>

<a href="tel:+01358585">Call</a>

<a href="sms:+01358585&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://xxx.png" alt="Describe image here" width="400" height="400">

	`src`	Required, Image location (URL \| Path)
	`alt`	Describe of the image
	`width`	Width of the image
	`height`	Height of the image
	`loading`	How the browser should load

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>Preformatted 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>

<pre>Pre-formatted Text</pre>

<kbd>Ctrl</kbd>

<blockquote>Text Block Quote</blockquote>

Also see: Text Format

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>

Note: For SEO: You should only have one h1 on your page !!!

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

Note: These are the tags used to divide your page up into sections

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>

Preview

JavaScript in HTML

<!-- Internal Javascript -->
<script type="text/javascript">
    let text = "Hello bestforstudy.com";
    alert(text);
</script>


<!-- External Javascript -->
<head>
    ...
    <script src="app.js"></script>
</head>

CSS in HTML

<!-- INternal stylesheet -->
<style type="text/css">
    h1 {
        color: purple;
    }
</style>


<!-- External stylesheet -->
<body>
    ...
    <link rel="stylesheet" href="style.css"/>
</body>

# Tags in HTML5

Document

<!DOCTYPE html>
<html>
    <body>
        <header>
            <nav>...</nav>
        </header>
        <main>
            <h1>bestforstudy.com</h1>
        </main>
        <footer>
            <p> 2021 bestforstudy.com</p>
        </footer>
    </body>
</html>

Also see: Document

<header>
    <nav>
        <ul>
            <li><a href="https://www.apple.com/">Apple</a></li>
            <li><a href="https://www.samsung.com/">SamSung</a></li>
            <li><a href="https://www.lg.com/">LG</a></li>
        </ul>
    </nav>
</header>

HTML5 Tags

Tag	Description
<!--...-->	Specifies a comment
<!DOCTYPE>	Specifies the document type
<a>	Specifies an anchor
<abbr>	Specifies an abbreviation
<acronym>	Deprecated:Specifies an acronym
<address>	Specifies an address element
<applet>	Deprecated: Specifies an applet
<area>	Specifies an area inside an image map
<article>	New Tag: Specifies an independent piece of content of a document, such as a blog entry or newspaper article
<aside>	New Tag:Specifies a piece of content that is only slightly related to the rest of the page.
<audio>	New Tag:Specifies an audio file.
<base>	Specifies a base URL for all the links in a page
<basefont>	Deprecated: Specifies a base font
<bdo>	Specifies the direction of text display
<bgsound>	Specifies the background music
<blink>	Specifies a text which blinks
<blockquote>	Specifies a long quotation
<body>	Specifies the body element
<br>	Inserts a single line break
<button>	Specifies a push button
<canvas>	New Tag:This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
<caption>	Specifies a table caption
<center>	Deprecated: Specifies centered text
<col>	Specifies attributes for table columns
<colgroup>	Specifies groups of table columns
<command>	New Tag:Specifies a command the user can invoke.
<comment>	Puts a comment in the document
<datalist>	New Tag:Together with the a new list attribute for input can be used to make comboboxes
<dd>	Specifies a definition description
<del>	Specifies deleted text
<details>	New Tag:Specifies additional information or controls which the user can obtain on demand.
<dir>	Deprecated: Specifies a directory list
<div>	Specifies a section in a document
<dl>	Specifies a definition list
<dt>	Specifies a definition term
<embed>	New Tag:Defines external interactive content or plugin.
<fieldset>	Specifies a fieldset
<figure>	New Tag:Specifies a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
<b>	Specifies bold text
<big>	Deprecated:Specifies big text
<i>	Specifies italic text
<small>	Specifies small text
<tt>	Deprecated:Specifies teletype text
<font>	Deprecated: Specifies text font, size, and color
<footer>	New Tag:Specifies a footer for a section and can contain information about the author, copyright information, et cetera.
<form>	Specifies a form
<frame>	Deprecated:Specifies a sub window (a frame)
<frameset>	Deprecated:Specifies a set of frames
<head>	Specifies information about the document
<header>	New Tag:Specifies a group of introductory or navigational aids.
<hgroup>	New Tag:Specifies the header of a section.
<h1> to <h6>	Specifies header 1 to header 6
<hr>	Specifies a horizontal rule
<html>	Specifies an html document
<isindex>	Deprecated: Specifies a single-line input field
<iframe>	Specifies an inline sub window (frame)
<ilayer>	Specifies an inline layer
<img>	Specifies an image
<input>	Specifies an input field
<ins>	Specifies inserted text
<keygen>	New Tag:Specifies control for key pair generation.
<keygen>	Generate key information in a form
<label>	Specifies a label for a form control
<layer>	Specifies a layer
<legend>	Specifies a title in a fieldset
<li>	Specifies a list item
<link>	Specifies a resource reference
<map>	Specifies an image map
<mark>	New Tag:Specifies a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
<marquee>	Create a scrolling-text marquee
<menu>	Deprecated: Specifies a menu list
<meta>	Specifies meta information
<meter>	New Tag:Specifies a measurement, such as disk usage.
<multicol>	Specifies a multicolumn text flow
<nav>	New Tag:Specifies a section of the document intended for navigation.
<nobr>	No breaks allowed in the enclosed text
<noembed>	Specifies content to be presented by browsers that do not support the <embed>tag
<noframes>	Deprecated:Specifies a noframe section
<noscript>	Specifies a noscript section
<object>	Specifies an embedded object
<ol>	Specifies an ordered list
<optgroup>	Specifies an option group
<option>	Specifies an option in a drop-down list
<output>	New Tag:Specifies some type of output, such as from a calculation done through scripting.
<p>	Specifies a paragraph
<param>	Specifies a parameter for an object
<cite>	Specifies a citation
<code>	Specifies computer code text
<dfn>	Specifies a definition term
<em>	Specifies emphasized text
<kbd>	Specifies keyboard text
<samp>	Specifies sample computer code
<strong>	Specifies strong text
<var>	Specifies a variable
<plaintext>	Deprecated: Render the raminder of the document as preformatted plain text
<pre>	Specifies preformatted text
<progress>	New Tag:Specifies a completion of a task, such as downloading or when performing a series of expensive operations.
<q>	Specifies a short quotation
<ruby>	New Tag:Together with <rt> and <rp> allow for marking up ruby annotations.
<script>	Specifies a script
<section>	New Tag:Represents a generic document or application section.
<select>	Specifies a selectable list
<spacer>	Specifies a white space
<span>	Specifies a section in a document
<s>	Deprecated: Specifies strikethrough text
<strike>	Deprecated: Specifies strikethrough text
<style>	Specifies a style definition
<sub>	Specifies subscripted text
<sup>	Specifies superscripted text
<table>	Specifies a table
<tbody>	Specifies a table body
<td>	Specifies a table cell
<textarea>	Specifies a text area
<tfoot>	Specifies a table footer
<th>	Specifies a table header
<thead>	Specifies a table header
<time>	New Tag:Specifies a date and/or time.
<title>	Specifies the document title
<tr>	Specifies a table row
<u>	Deprecated: Specifies underlined text
<ul>	Specifies an unordered list
<video>	New Tag:Specifies a video file.
<wbr>	New Tag:Specifies a line break opportunity.
<wbr>	Indicate a potential word break point within a <nobr> section
<xmp>	Deprecated: Specifies preformatted text

Also see: Tags

HTML5 Video

<!DOCTYPE html>
<html>

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

</html>

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

// Example

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>

// Example

HTML5 Ruby

<ruby>
    ? <rp>(</rp><rt>hn</rt><rp>)</rp>
    ? <rp>(</rp><rt>z</rt><rp>)</rp>
</ruby>

Preview

? ( hn ) ? ( z )

The <ruby> tag specifies a ruby annotation.

A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. This kind of annotation is often used in Japanese publications.

Use <ruby> together with <rt> and <rp>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that do not support ruby annotations.

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>

Preview

User hrefs: 60 points
User jdoe: 80 points
User ????: 90 points

HTML5 progress

<progress value="30" max="100"></progress>

Preview

HTML5 mark

<p>I Love <mark>bestforstudy.com</mark></p>

I Love bestforstudy.com

# Tables in HTML

Table Example

<table>
    <thead>
        <tr>
            <td>name</td>
            <td>age</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Roberta</td>
            <td>39</td>
        </tr>
        <tr>
            <td>Oliver</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

HTML 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

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

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

# Lists in HTML

Unordered list

<ul>
    <li>I'm an item</li>
    <li>I'm another item</li>
    <li>I'm another item</li>
</ul>

Also see: The Unordered List element

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>

Also see: The Ordered List element

Definition list

<dl>
    <dt>A Term</dt>
    <dd>Definition of a term</dd>
    <dt>Another Term</dt>
    <dd>Definition of another term</dd>
</dl>

Also see: The Description List element

# Forms in HTML

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>

Preview

Form Attribute

Attribute	Description
`name`	Name of form for scripting
`action`	URL of form script
`method`	HTTP method, `POST` / `GET` (default)
`enctype`	Media type, See enctype
`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>

Preview

Click me:

    
<!-- 'for' attribute -->
<label for="user">Click me:</label>
<input id="user" type="text" name="name" />

Preview

Click me:

Note: for in a label references an input's id attribute

Input tags

<label for="username">username:</label>
<input type="text" name="username" id="username">

Preview

username:

Also see: Input Tags

Textarea tags

<textarea rows="4" cols="30" name="Your comment" id="comment"></textarea>

Preview

Note: Textarea is a multiple-line text input control

Radio Buttons

<input type="radio" name="gender" id="m" value="male">
<label for="m">Male</label>

<input type="radio" name="gender" id="f" value="femail">
<label for="f">Female</label>

Preview

Male Female

Note: Radio buttons are used to let the user select exactly one

Checkboxes

<input type="checkbox" name="sport" id="football">
<label for="footbal">Football</label>

<input type="checkbox" name="sport" id="basketball">
<label for="basketball">Basketball</label>

Preview

Football Basketball

Note: Checkboxes allows the user to select one or more

Select tags

<label for="city">City:</label>
<select name="city" id="city">
    <option value="1">New York</option>
    <option value="2">LA</option>
    <option value="3">California</option>
</select>

Preview

City:

Note: A select box is a dropdown list of options

Fieldset tags

<fieldset>
    <legend>Your favorite monster</legend>
    <input type="radio" id="kra" name="m">
    <label for="kraken">Kraken</label><br/>
    <input type="radio" id="sas" name="m">
    <label for="sas">Sasquatch</label>
</fieldset>

Preview

Your favorite monster Kraken
Sasquatch

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>

Preview

Choose a browser:

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>

Preview

Note: Submit the data to server; Reset to default values

# Input Tags in HTML

Input Attributes

The input tag is an empty element, identifying the particular type of field information to obtain from a user.

<input type="text" name="?" value="?" minlength="10"	 required />

-
	`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
	`readonly`	Stops the user from modifying
	`disabled`	Stops any interaction
	`checked`	The radio or checkbox select or not
	`required`	Being compulsory, See required
	`placeholder=""`	Adds a temporary, See ::placeholder
	`autocomplete="off"`	Disable auto completion
	`autocapitalize="none"`	Disable auto capitalization
	`inputmode=""`	Display a specific keyboard, See inputmode
	`list=""`	The id of an associated datalist
	`maxlength=""`	Maximum number of characters
	`minlength=""`	Minimum number of characters
	`min=""`	Minimum numerical value on range & number
	`max=""`	Maximum numerical value on range & number
	`step=""`	How the number will increment in range & number
	`pattern=""`	Specifies a Regular expression, See pattern
	`autofocus`	Be focused
	`spellcheck`	Perform spell checking
	`multiple`	Whether to allow multiple values
	`accept=""`	Expected file type in file upload controls

Note: The <input> tag is empty, which means that the closing tag isnt required. But in XHTML, the (<input>) tag must be closed (<input/>).

Input types


`type="checkbox"`
`type="radio"`
`type="file"`
`type="hidden"`
`type="text"`
`type="password"`
`type="image"`
`type="reset"`
`type="button"`	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"`

Input CSS selectors


`input:focus`	When its keyboard focused

Also see: Input pseudo-classes

# Meta Tags in HTML

Meta tags

Meta keywords are a <meta> tag option that could be used to give more information to search engines on what a page is about.

A <meta> tag defines what different types of metadata are about in an HTML document. These meta tags can be found in the source pages of a website, which is what search engine crawlers scan to determine what a page is about. The question is, should you use the meta keyword tag? It depends; let's find out more...

<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">
<meta name="viewport" content="width=1024">

Also see: Meta tags must-have for SEO your Website

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://bestforstudy.com/programming/html">
<meta property="og:image" content="https://xxx.com/image.jpg">
<meta property="og:site_name" content="Name of your website">
<meta property="og:description" content="Description of this page">

Note: Used by Facebook, Instagram, Pinterest, LinkedIn, etc...

Twitter Cards

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@bestforstudy.com">
<meta name="twitter:title" content="HTML cheatsheet">
<meta name="twitter:url" content="https://bestforstudy.com/programming/html">
<meta name="twitter:description" content="Description of this page">
<meta name="twitter:image" content="https://xxx.com/image.jpg">

Also see: Twitter Card Documentation

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">

Also see: Geo Tags

HTML CheatSheet

Table of Content

# Getting started HTML

Introduction

helloworld.html

Comment

Paragraph

HTML link

Image Tag

Text Formatting Tags

Headings

Section Divisions

Inline Frame

JavaScript in HTML

CSS in HTML

# Tags in HTML5

Document

Header Navigation

HTML5 Tags

HTML5 Video

HTML5 Audio

HTML5 Ruby

HTML5 kdi

HTML5 progress

HTML5 mark

# Tables in HTML

Table Example

HTML Table Tags

td Attributes

th Attributes

# Lists in HTML

Unordered list

Ordered list

Definition list

# Forms in HTML

Form tags

Form Attribute

Label tags

Input tags

Textarea tags

Radio Buttons

Checkboxes

Select tags

Fieldset tags

Datalist tags(HTML5)

Submit and Reset Buttons

# Input Tags in HTML

Input Attributes

Input types

Input CSS selectors

# Meta Tags in HTML

Meta tags

Open Graph

Twitter Cards

Geotagging

Best Suggest