HTML Cheat Sheet

Introduction

If you want to be a web developer, it’s crucial to be proficient in HTML – the language of the internet. A good solution, therefore, is to always have a cheat sheet at hand to help you in your most troubling moments.

You will find a fairly basic yet comprehensive HyperText Markup Language (HTML) cheat sheet in this document.

We will go through each major HTML tag and explain how to use them. This document is also a good starting point for people who want to learn HTML, with easy-to-understand examples.

So, let’s get started!

Document Summary

<html> ... </html

Specifies that the webpage is written in HTML. It appears on the very first and last line of the webpage. It’s mainly used to show that the page uses HTML5 – the latest language version. Also known as the root element, this tag acts as a parent tag for every other tag used on the page.

<title> ... </title>

Contains the title/name of the webpage. You can see this in your web browser’s title bar for every web page. Search engines use this tag to extract the topic of the webpage, which is quite convenient when ranking relevant search results. Keep in mind that including this tag in your document is mandatory.

<head> ... </head>

Used to specify metadata about the webpage. It includes the webpage’s name, its dependencies (JS and CSS scripts), font usage, etc.

<body> ... </body>

Everything the user sees on a webpage is written inside this tag. It’s a container for all the contents of the webpage.

Example

<html> 
     <head> 
         <title>My First Website</title> 
     </head> 

     <body> 

     </body> 
</html>

Document Information

<base>

Used to specify the base URL of your site. This tag makes linking to internal links on your site systematized. Remember that this tag can only be used once and only in the <head> tag.

<style> ... </style>

It can be used as an alternative to an external style sheet or complement it. Includes the webpage’s appearance information.

<link>

Used to link to scripts external to the webpage. Typically utilized for including stylesheets.

<meta>

Metadata tag for the webpage. It can help highlight the page’s author, keywords, original published date, etc.

<script> ... </script>

Used to add code snippets, typically in JavaScript, to make a web page dynamic. It can also be used to just link to an external script.

<html> 
     <head> 
         <meta charset="utf-8"> <base href="http://myfirstwebsite.tld" target="_blank" /> 
         <title>My Beautiful Website</title> 
         <link rel="stylesheet" href="/css/master.css"> 
         <script type="text/javascript"> var dummy = 0; </script> 

     </head> 
     <body> 
     </body> 
</html>

Document Structure

<h1-h6> ... </h1-h6>

Six different variations of writing a heading. <h1> has the largest font size, while <h6> has the smallest.

<br>

A single line break for webpages. It’s used to write a new line.

<hr>

Similar to the <br> tag. In addition to switching to the next line, <hr> tag also draws a horizontal bar to indicate the end of the section.

<span> ... </span>

This tag injects inline elements, like an image, icon, or emoticon, without ruining the formatting or styling of the page.

<div> ... </div>

A web page’s content is usually divided into blocks specified by the <div> tag.

<p> ... </p>

Plain text is placed inside this tag.

Example:

<div> 
    <h1>Top 10 Greatest Films</h1> 
    <p>These are considered the greatest movies of all time.</p> 
    <hr> 
    <h2>The Godfather</h2> 
    <p>This 1972 classic stars Marlon Brando and Al Pacino.</p> 
</div>

Text Formatting

<strong> ... </strong>

Makes text bold. Used to emphasize a word or phrase.

<em> ... </em>

Another emphasis tag, but displays text in italics.

<cite> ... </cite>

A tag for citing the author of a quote.

<blockquote> ... </blockquote>

Quotes often go into this tag. Is used in tandem with the ‘cite’ tag.

<q> ... </q>

Similar to the above tag, but for shorter quotes.

<abbr> ... </abbr>

Denotes abbreviations or acronyms.

<b> ... </b>

Alternative to the ‘strong’ tag. Generates bold text.

<i> ... </i>

Used to display text in italics but does not emphasize it like the ’em’ tag.

Denotes text that has been added to the webpage.

<pre> ... </pre>

Pre-formatted, monospaced font text laid out, with whitespace inside the element, remained intact.

<address> ... </address>

A tag for specifying the author’s contact details.

<dfn> ... </dfn>

A tag dedicated to mark definitions.

<code> ... </code>

Used to display code snippets within a paragraph.

<sup> ... </sup>

Similar to the <sub> tag, but used to write a superscript. Example: a^x.

<sub> ... </sub>

Used to write a subscript. It’s smaller font just below the mid-point of regular fonts. Example: a_x.

<small> ... </small>

Reduces text size. In HTML5, it often refers to redundant or invalid information.

Example:

<p>Here's <strong>some bold text</strong> and here's <em>some text in  italics</em> compared to regular text.</p>
<blockquote>
Anyone who has never made a mistake has never tried anything new.
<cite>- Albert Einstein</cite> eb ctent shoud be asy t
</blockquote>
<pre>Here's what pre-formatted text looks like. </pre>
<p>A code snippet example: <code>Three. Two. Online</code></p>

<a href="mailto:"> ... </a>

A tag dedicated to sending emails.

<a href="#name"> ... </a>

A variation of the <a name=”name”> tag. Used to navigate to the web page’s <div> section only.

<a href=""> ... </a>

An anchor tag. Primarily used to include hyperlinks.

<a href="tel://###-###"> ... </a>

An anchor tag for mentioning contact numbers. The numbers are clickable, which can be particularly beneficial for mobile users.

Images

<img>

A tag to display images on a web page.

alt="text"

A text is displayed when the user hovers the mouse over an image. It can be used to give additional details about the image.

border=""

Specifies the border thickness of the image. If not mentioned, the default value is 0.

width=""

Specifies image width in pixels or percentages.

shape=""

The shape of an area.

<map name=""> ... </map>

Name of the map associated between an image and a map.

<area>

Specifies image map area.

coords=""

Coordinates vital information about the shape. Example: vertices for rectangles, center or radius for circles.

src="url"

A URL or path where the image is located on your drive or the web.

height=""

Specifies image height in pixels or percentages.

<map> ... </map>

Denotes an interactive (clickable) image.

align=""

The relative alignment of an image. It can change parallel to other elements on a web page.

Example:

<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Solar_system.jpg" width="823" height="1024" alt="The Solar System" usemap="#solarmap"> 
<map name="solarmap"> 
    <area shape="circle" coords="572,322,100" href="solar-system.htm" alt="The Solar System"> 
</map>

Lists

<ol> ... </ol>

A tag for an ordered or numbered list of items.

<ul> ... </ul>

Opposed to the <ul> tag. Used for an unordered list of items.

<dl> ... </dl>

A tag for a list of items with definitions.

<li> ... </li>

An individual item as part of a list.

<dt> ... </dt>

A definition of a single term that is in-line with body content.

<dd> ... </dd>

A description of the defined term.

Example

<ol>
   <li>Monday</li>
   <li>Tuesday</li>
   <li>Wednesday</li>
</ol>
<ul>
   <li>France</li>
   <li>Germany</li>
   <li>Italy</li>
</ul>
<dl>
   <dt>Toyota</dt>
      <dd>A Japanese car brand</dd> 
   <dt>Armani</dt>
      <dd>An Italian fashion brand</dd>
</dl>

Forms

<form> ... (/form>

A parent tag for an HTML form.

action="url"

Where the form data will be submitted once the user fills it.

method=""

Specifies which HTTP method (POST or GET) will be used to submit the form.

autocomplete

Determines if the form has auto-complete enabled.

accept-charsets

Determines character encodings when a form is submitted.

<fieldset> ... </fieldset>

Identifies groups of all fields on the form.

<input>

Used to take input from the user. The input type is determined by a number of attributes.

enctype=""

Used only for the POST method. It dictates the data encoding scheme when a form is submitted.

novalidate

Determines whether a form should be validated before submission.

<label> ... </label>

Used to label a field in the form.

<legend> ... </legend>

Operates as a caption for the <fieldset> element.

target

After submission, the form response will be displayed wherever this refers to. Usually has the following values: _blank, _self, _parent, _top.

Input Type Attribute

type=""

Determines which type of input (text, dates, password) is requested from the user.

name=""

Specifies the name of the input field.

value=""

Specifies the value currently contained in the input field.

width=""

Determines the width of the input element in pixel values.

size=""

Determines the input element width (number of characters).

maxlength=""

Specifies the most input field characters allowed.

required

Makes an input field compulsory. The form cannot be submitted if a required field is left empty.

height=""

Determines the height of the input element in pixel values.

placeholder=""

This tag can be used to provide a hint to the user about the nature of the requested data.

min=""

The minimum value allowed for an element.

autofocus

Forces focus on the input element when a web page loads completely.

<textarea> … </textarea>

Applied for longer strings of input. It can be used to get a multi-sentence text from the user.

pattern=""

Specifies a regular expression that can be used to look for patterns in the user’s text

max=""

The maximum value allowed for an element.

disabled

Disables an input element. The user can no longer enter data.

<select> … </select>

Specifies a list of options that the user can choose from.

Select Attributes

name=""

A name for a particular list of options

multiple

States if the user can choose multiple options from the list.

autofocus

Specifies that a drop-down list will automatically come into focus after the page loads.

size=""

A total number of options given to the user

required

Specifies if choosing an option(s) is necessary for form submission.

<option> … </option>

A tag for listing individual items on the list of options.

Option Attributes

value=""

A text visible to the user for any given option.

selected

Determines which option is selected by default when a form loads.

<button> … </button>

Tag for creating a button for form submission.

Example:

<form action="form_submit.php" method="post">
   <fieldset>
      <legend>Bio:</legend>
      First name:<br>
      <input type="text" name="first-name" value="John"  placeholder="Please enter your first name here"><br>
      Last name:<br>
      <input type="text" name="last-name" value="Doe"  placeholder="Please enter your last name here"><br><br>
      Favorite sport:<br>
       <select>
         <option value="basketball">Basketball</option>
         <option value="soccer">Soccer</option>
         <option value="tennis">Tennis</option>
       </select>
      <textarea name="description"></textarea>
      <input type="submit" value="Submit">
   </fieldset>
</form>

Tables

<table> … </table>

Marks a table on a webpage.

<tfoot> … </tfoot>

Determines the footer of a table.

<tr> … </tr>

Denotes a single row in a table.

<caption> … </caption>

A description of a table is placed inside this tag.

<tbody> … </tbody>

The body of a table where the data is held.

<thead> … </thead>

Specifies information about specific columns of a table.

<th> … </th>

The value of a heading of a table’s column.

<colgroup> … </colgroup>

Used for grouping columns together.

<td> … </td>

A single cell of a table. Contains the actual value/data.

<col>

Denotes a column inside a table.

Example

<table>
     <colgroup>
         <col span="2">
         <col>
     </colgroup>
     <tr>
         <th>Name</th>
         <th>Major</th>
         <th>GPA</th>
     </tr>
     <tr>
         <td>Bob</td>
         <td>Law</td>
         <td>3.55</td>
     </tr>
     <tr>
         <td>Alice</td>
         <td>Medicine</td>
         <td>3.61</td>
     </tr>
</table>

Objects and iFrames

<object> … </object>

Used to embed an additional multimedia object into a web page. This can be an audio/video file, document (.pdf), etc.

<iframe> … </iframe>

An inline block of content. It’s used as a container for multimedia objects in a flexible manner. It floats inside a web page, meaning it’s placed relative to other webpage items.

height=""

Determines object height in pixel values.

type=""

The type/format of the object’s contents.

width=""

Determines object width in pixel values

iFrame Attributes

name=""

The name of an iFrame.

src=""

The source URL/path of the multimedia object to be held inside an iFrame.

height=""

Determines the height of an iFrame.

<embed> … </embed>

Used to embed external objects, such as plugins

srcdoc=""

Any HTML content to be displayed inside an iFrame.

<param />

Used for iFrame customization. This includes additional parameters to go along with the content.

width=""

Determines the width of an iFrame.

Embed Attributes

height=""

Determines the height of an embedded item

src=""

The URL/path of an embedded item.

width=""

Determines the width of an embedded item

type=""

The type or format of an embedded content.

Example

<object width="1000" height="1000"></object>
<iframe src="other-web-page.html" width="500" height="500"></iframe>
<embed src="video-file.swf" width="500" height=“500"></embed>

HTML5 New Tags

<header> … </header>

Specifies the webpage header. It can also be used for objects inside the web page.

<footer> … </footer>

Specifies the webpage footer. It can also be used for objects inside the web page.

<main> … </main>

Marks the main content of a web page.

<article> … </article>

Denotes an article.

<aside> … </aside>

Denotes content displayed in a sidebar of a web page.

<details> … </details>

Used for additional information. The user has the option to view or hide these details.

<figure> … </figure>

A tag reserved for figures (diagrams, charts) in HTML5.

<summary> … </summary>

Used as a heading for the tag. It’s always visible to the user.

<dialog> … </dialog>

Used to create a dialog box.

<section> … </section>

Specifies a particular section in a webpage.

<figcaption> … </figcaption>

A description of the figure is placed inside

<mark> … </mark>

Used to highlight a particular portion of a text.

<nav> … </nav>

Navigation links for the user in a web page

<menuitem> … </menuitem>

A particular item from a list or menu.

<meter> … </meter>

Measures data within a given range.

<progress> … </progress>

Typically used as a progress bar. This is used to track progress.

<rp> … </rp>

Shows text for web browsers without Ruby annotation support.

<ruby> … </ruby>

Describes a Ruby annotation for East Asian typography

<rt> … </rt>

Displays East Asian typography character details.

<time> … </time>

A tag for formatting date and time.

<wbr>

A line-break within the content.

Collective Character Objects

&#34; &quot;

Quotation Marks (“)

&#38; &amp;

Ampersand (&)

&#60; &lt;

Less than sign (<)

&#62; &gt;

Greater than sign (>)

&#160; &nbsp;

Non-breaking space ( )

&#169; &copy;

&#64; &Uuml;

@ Symbol (@)

&#149; &ouml;

Small bullet (•)

&#153; &ucirc;

Trademark symbol (™)

HTML Cheat Sheet

Example

Text Formatting

Lists

Forms

Input Type Attribute

Select Attributes

Option Attributes

Tables

Objects and iFrames

iFrame Attributes

Embed Attributes

HTML5 New Tags

Collective Character Objects

Leave A Comment
Cancel reply

Leave A Comment

Categories

Address

Instagram

HTML Cheat Sheet

HTML Cheat Sheet

Example

Text Formatting

Lists

Forms

Input Type Attribute

Select Attributes

Option Attributes

Tables

Objects and iFrames

iFrame Attributes

Embed Attributes

HTML5 New Tags

Collective Character Objects

Leave A Comment Cancel reply

Leave A Comment

Categories

Leave A Comment
Cancel reply