HTML Cheat Sheet: A Simple Guide to HTML

Posted on - Last Modified on

If you are new to HTML you may feel a little in the dark about how to progress forward with any sort of momentum. Even if you are experienced in the realm of HTML, it can be easy to lose track of references. We have created an HTML cheat sheet to help you progress your learning at a rate of knots.  

We recommend you use this cheat sheet as a basis to turn to on how to use and implement frequently used tags. This article contains a large amount of information, so we advise that you come back to it frequently and use it as a reference point you can turn to when you are in need of a deeper understanding of HTML.

This cheat sheet provides additional material that goes into detail and explains the workings of individual tags. This will help you compile a comprehensive resource for HTML as well as understand the mechanics behind the code to help you get ahead in your learning. If you need to decipher any tag in HTML here is another great resource for discovering a tag’s meaning.

 

1. Document Overview

<html> ... </html> 

The html tag encapsulates the whole HTML document. The HTML tag is the root element displayed at the start and end of an HTML document.

 

<head> ... </head> 

The head tag captures the head of the HTML page containing the title tags, links to style sheets and scripts, as well as Meta data etc.). 

 

<title> text </title>

The title tag displays the title of the page. This tag appears in the browser title bar and is similarly used for bookmarking the page. It is also utilized for search engines.

 

<body> ... </body>

The body tag includes the substance of the HTML document, displaying all the text and imaging on display.

 

2. Document Info

<base/>

The base tag identifies a default URL and a default target for all the links in an HTML document. It is a handy tool for pages with several internal links.

 

<meta/>

The meta tag describes meta data within an HTML document. It explains

additional material about the HTML. Including the date, time, description etc.

 

<link/>

The link tag builds connections to an external style sheet, other outside pages and documents.

 

<style> ... </style>

The style tag delineates style information in an HTML document.

 

<script>...</script>

The script tag encloses scripting statements or outlets to external script links.

 

3. Document Structure

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

These tags <h1> to <h6> express HTML headings. Not surprisingly, h1 is the most important heading, whilst h6 is the least important. They are often segmented to describe different sections of content on an HTML page.

 

<p>...</p>

This is the paragraph tag, one of the most frequently used tags in HTML.

 

<br/>

The break tag Delineates a line break. It is great for breaking up text that needs to be differentiated on different lines. Note there is no end tag for a line break because it is empty.

 

<div>...</div>

The div tag Indicates a division in an HTML document.

 

<span>...</span>

The span tag is used to assemble inline-elements of an HTML page. It is most commonly utilized for collectively combining styling elements. 

 

<hr/>

The horizontal rule tag is a nifty addition that notifies a change in subject of a page.

 

4. HTML5 Tags

With the introduction of HTML5 new tags have been introduced which have become very common and a crucial part of any HTML cheat sheet.

 

<article>...</article>

The article tag defines an article within a document.

 

<aside>...</aside>

The aside tag outlines content within a document sidebar.

 

<bdi>...</bdi>

The bdi tag isolates parts of the text, enabling shaping of text in different directions.

 

<details>...</details>

The details tag labels supplementary info that the user can view or hide.

 

<dialog>...</dialog>

The dialog tag identifies a dialog window.

 

<figure>...</figure>

The figure tag is an autonomous content extension that includes graphics, images, charts, diagrams etc.

 

<figcaption>...</figcaption>

The fig caption tag uses the <figure> element to describe the figure, which is more often than not an image.

 

<footer>...</footer>

The footer tag naturally shows the footer for a document or section.

 

<header>...</header>

Likewise the header tag shows the header for a document or section.

 

<main>...</main>

The main tag articulates the main content of an HTML page.

 

<mark>...</mark>

The mark tag that shows a measure of emphasised marked text within the content.

 

<menuitem>...</menuitem>

The menuitem tag is a context menu with different elements that the user can summon from a popup menu.

 

<meter>...</meter>

The meter tag is a gauge that describes a scalar measurement within an identified series.

 

<nav>...</nav>

The nav tag expresses navigation links for the user.

 

<progress>...</progress>

The progress tag unsurprisingly shows the development of a task.

 

<rp>...</rp>

The rp tag denotes text that does not sustain ruby annotations.

 

<rt>...</rt>

The rt tag is a description of characters in East Asian typography.

 

<ruby>...</ruby>

The ruby tag displays a ruby annotation for East Asian Typography.

 

<section>...</section>

The section tag defines blocks in a document that could be any of chapters, titles, headers, footers etc.

 

<summary>...</summary>

The summary tag is a detectable heading for <details> elements.

 

<time>...</time>

The time tag naturally expresses time and date.

 

<wbr>

A word break tag that denotes a line-break inside the content.

 

5. Formatting

 

(a)Text Formatting

 

<strong>.</strong>

The strong tag is known as a phrase tag that expresses key text. It is often highlighted in bold by browsers to convey its importance.

 

<b>...</b>

The b tag is an alternative tag to generate bold text drawing attention to text. It is for text, words and phrases not as accentuated as the strong tag above.

 

<font>...</font>

The font tag is an old method to denote size, space and color of text, which is now obsolete in HTML5.

 

<abbr>...</abbr>

This abbreviation that helps indicate abbreviations, whilst concurrently allowing the full form to be accessible. E.g. <abbr title=”UnitedNations”>UN</abbr>

 

<acronym>...</acronym>

The acronym tag is not supported in HTML5 but holds a similar effect to the abbreviation tag.

 

<q>...</q>

The q tag defines a short quotation.

 

<sub>...</sub>

The sub tag denotes subscript text that is smaller and placed half a line lower than prior text.

 

<sup>...</sup>

The sup tag denotes superscript text. Converse to the sub text it appears half a line higher than the prior text, again in a smaller size.

 

<tt>...</tt>

The tt tag is no longer supported in HTML5. It is an old tag, denoting typewriter text.

 

<em>...</em>

This is the emphasising tag stressing importance of phrases or words and is often displayed in italics.

 

<i>...</i>

The I tag is an alternative way to create text in italics.

 

<address>...</address>

the address tag displays contact info of the owner/author of the page.

 

<dfn>...</dfn>

The definition tag is used to mark up the important command of a term.

 

<code>...</code>

The code tag is a phrase tag delineating a portion of computer code that is usually mono-spaced.

 

<strike>...</strike>

The strike tag is not supported in HTML5 but denotes strikethrough text.

 

<cite>...</cite>

The site tag is a reference point for information useful for titles, quotes, annotations and statements in a document.

 

<pre>...</pre>

The pre tag is preformatted text in mono-space that maintains spaces and line breaks.

 

<del>...</del>

The del tag denotes deleted text from a document.

 

<ins>...</ins>

The insert tag shows text that incorporated into a document.

 

<small>...</small>

The small tag is used for expressing smaller text. It also has a dual meaning under HTML5, indicating information that may be invalid, inaccurate or irrelevant.

 

<blockquote>...</blockquote>

The blockquote tag identifies a section of text usually quoted from an alternative source.

 

<bdo>...</bdo>

The bdo tag is a Bi-directional override, which overrides the text trend.

 

(b) links formatting

 

<a href=””>...</a>

This tag is an anchor text for hyperlink

 

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

This tag is a link that draws an outgoing message to a particular email address or

addresses.

 

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

This tag is a useful link that allows numbers to be clicked on. It is growing in popularity because of its handiness for mobile users.

 

<a name=”name”>...</a>

This tag is an anchor transporting users to particular document elements.

 

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

Similar to above, this tag transports users to div elements.

 

(c) Imaging formatting

 

<img />

This tag is quite simply to show images.

 

src=”url”

This tag shows the URL of the image.

 

alt=”text”

This tag displays alternative text with the function of clarifying image substance and content to users.

 

height=””

This tag is the capability to denote height in percentage or pixels.

 

width=””

This tag is the capability to denote width in percentage or pixels.

 

align=””

This tag identifies image alignment relative to text on the page.

 

border=””

This tag denotes the border width.

 

vspace=””

This tag shows spacing above and below the image.

 

hspace=””

 

This tag, as above, shows spacing above and below image.

 

<map>...</map>

The map tag allows you to display to users that the image is clickable.

 

<map name=””>...</map>

This tag denotes the name of the map connected amid the image and the map.

 

<area />

The area tag denotes the area of the image map.

 

(d) Lists Formatting

 

<ol>...</ol>

This tag defines an ordered list that is either numbered or lettered.

 

<ul>...</ul>

This tag also denotes a list but unordered without any particular order or

importance, usually bullet pointed.

 

<li>...</li>

This tag denotes a list item, which can be numbered, lettered or bulleted.

 

<dl>...</dl>

This is a descriptive list tag, usually earmarked for list items that require definitions.

 

<dt>...</dt>

This tag specifically labels a term name within a descriptive list.

 

<dd>...</dd>

This tag describes a name in the description list.

 

(e) Forms – formatting and attributes

 

<form>...</form>

This tag creates an HTML form.

 

action=”url”

This form action URL tag stipulates where information is to be sent when a user

submits a form.

 

method=””

The method tag commands how the data is sent.

 

enctype=””

This tag commands how the data is to be encoded when it is sent back to

the server.

 

autocomplete

The autocomplete tag is a nifty addition commanding whether a form should have autocomplete.

 

novalidate

This tag commands whether to validate a form upon submission

 

accept-charsets

This tag detects the character encodings of form submissions.

 

target

The target tag instructs where to show form response following submission.

 

<fieldset>...</fieldset>

The fieldset tag locates the collection of all fields on the form.

 

<label>...</label>

A simple field label tag, directing the user what info to enter.

 

<legend>...</legend>

The legend tag denotes a caption for the <fieldset> element.

 

<input />

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

 

Input type attributes

 

type=””

The type tag identifies the field input type and usually include checkbox, text, passwords and date/time.

 

name=””

The name tag shows the name of the form.

 

value=””

The value tag shows the input field information.

 

size=””

The size tag describes the input element width.

 

maxlength=””

The maxlength tag displays the greatest input element character numbers permissible.

 

required

The required tag ensures the <input> element is entirely completed before users send the form.

 

step=””

The step tag pinpoints the legal number intervals for an input field.

 

width=””

The width tag denotes the pixel width of an <input> element.

 

height=””

The height tag denotes the pixel height of an <input> element.

 

placeholder=””

The placeholder tag aids the user by explaining the value of the <input> element.

 

pattern=””

The pattern tag shows a regular expression as a reference for the <input> element, ensuring users submitted accurate information.

 

min=””

The min tag displays the smallest value permissible for every <input> element.

 

max=””

The max tag displays the largest value permissible for every <input> element.

 

autofocus

The autofocus tag ensures the <input> element is focussed after loading.

 

disabled

The disabled tag deactivates an <input> element on the form.

 

<textarea>...</textarea>

This tag identifies a big text input for lengthier messages.

 

<select>...</select>

The select tag shows a drop-down box for users to choose from a number of selections.

 

Select attributes

 

name=””

The name tag shows the name of a drop down combination box.

 

size=””

The size tag identifies the amount of drop-down alternatives.

 

multiple

The multiple tag is provision for numerous selections to be made simultaneously.

 

required

As the name suggest the required tag necessitates a value is chosen already before a user can submit a form.

 

autofocus

The autofocus tag ensures the drop-down list is focussed routinely after loading.

 

<optgroup>...</optgroup>

The optgroup tag identifies the whole grouping of options.

 

<option>...</option>

The option tag stipulates one of the presented selections in the drop-down list.

 

Option attributes

 

value=””

The value tag clarifies the option value obtainable for selection

 

selected

The selected tag outlines the default selection

 

<button>...</button>

The button tag stipulates the clickable button for users to submit options.

 

(f) Tables and Formatting

 

<table>...</table>

The table tag stipulates and encloses all table information.

 

<caption>…</caption>

The caption tag delineates a table caption.

 

<thead>...</thead>

The thead tag is used to collect header content within an HTML table.

 

<tbody>...</tbody>

The tbody tag is used to collect body content in an HTML table.

 

<tfoot>...</tfoot>

The tfoot tag is used to collect footer content within an HTML table.

 

<tr>...</tr>

The tr tag identifies a row in an HTML table.

 

<th>...</th>

The th tag identifies a header cell in an HTML table.

 

<td>...</td>

The td tag identifies a standard cell in an HTML table.

 

<colgroup>...</colgroup>

The colgroup tag stipulates a group of columns in a table.

 

6. Objects and iFrames

 

<object>...</object>

The object tag delineates an embedded object, which could be in a variety of file types.

 

height=””

The height tag defines the height of the object in pixels.

 

width=””

The width tag defines the width of the object in pixels.

 

type=””

The type tag defines what media type the data encompasses.

 

usemap=””

This uesmap tag is the label within <object> for a client-side image.

 

<iframe>...</iframe>

The iframe tag denotes an inline frame.

 

iFrame Attributes

 

name=””

The name tag is the label of the <frame>

 

src=””

The src tag shows the URL origin of the initial document to embed within the <frame>.

 

srcdoc=””

The srcdoc tag defines HTML matter that is presented inside the <frame> in the existing page.

 

width=””

the width tag defines the width of the <frame>.

 

<param />

the param tag is a customization tag attaching extra parameters to iframe content.

 

<embed>...</embed>

The embed tag actions as a vessel for external an external application or extra plug-in.

 

Embed Attributes

 

height=””

the height tag defines the height of the embedded content.

 

width=””

The width tag defines the width of the embedded content

 

src=””

The src tag is the URL origin of the external file being embedded.

 

type=””

In this instance, the type tag defines what media type of embedded content to incorporate.

 

 

We hope that you find this resource useful. If you have any other HTML cheats to add, particularly relating to HTML5, please add them to the discussion below.

Posted 26 June, 2017

dunjajanjic

Copywriter, Content Writer, Proofreader, Marketer.

Dunja is the Content & Email Manager at Freelancer HQ (Sydney). She is an Oxford graduate, and is the mother of a pet parrot called DJ Bobo.

Next Article

Angular 2 for Beginners: A Tutorial