Scribd
Upload
13 views

HTML Cheat Sheet 1

Uploaded by

Sammy Ay-man
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

HTML Cheat Sheet 1

Uploaded by

Sammy Ay-man
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

The HTML Cheat Sheet brings vital

HTML elements together onto a single


downloadable PDF. And whether you want
to create ordered lists, indicate interactive

Introduction elements with clickable areas, include


metadata, or just bold a specific bit of text,
you should be able to find what you’re
looking for quickly, so you can get on with
your web development project without
losing your momentum.

HTML Ideal for those who are just starting to learn


HTML, established website builders who like
to keep a reference on hand, and every skill
level in between, the HTML cheat sheet will
help you keep your code clean.
HTML Cheat Sheet
Table of Contents

1. Document Summary

2. Document Information

3. Document Structure

4. Text Formatting

5. Links

6. Images

7. Lists

8. Forms

9. Input Type Attributes

10. Option Attributes

11. Tables

12. Objects and iFrames

13. iFrame Attributes

14. Embed Attributes

15. HTML Entities

16. HTML5 Semantic Tags


1. Document Summary
<html> … </html>
This tag is added at the very beginning and the very
end of your HTML document. This is known as the
root element and indicates that the page is written
in HTML. All of the rest of the page markup will occur
between these two tags, making the root element
tag a parent tag for all other tags.

<head> … </head>
This tag allows you to include information about the
page, such as title tags, metadata, fonts, and links to
scripts and styles.

<title> … </title>
This tag allows you to specify a title for your page.
This is important, as it not only shows up in the
browser’s title bar and gives users a clearer idea of
the topic of your page, but also allows search en-
gines to scan and index the page.

<body> … </body>
This tag encompass all of the user-facing content on
your page.
2. Document
Information
<base/>
This tag is used to indicate your page’s base URL
(example: “https://hackbrightacademy.com/”) and
allows you to specify all relative links in your docu-
ment, for cleaner internal linking throughout your
site.

<meta/>
This tag allows you to include metadata for your
page, such as author, publish date, important key-
words, content descriptions, and other information.

<link/>
This tag makes it possible to link to scripts that are
external to your webpage, and is often used for in-
cluding stylesheets.

<style> … </style>
This tag includes document style information. It can
be used as an alternative to an external style sheet.
Unless otherwise specified, it will default to CSS.

<script> … </script>
This tag allows you to include scripting information
as well as links to external scripts. You can also add
code snippets to make the web page more dynamic.
3. Document Structure
<h1..h6> … </h1..h6>
This tag allows you to designate heading levels, with
<h1> being the most important and having the
largest font size, and <h6> being the least important
and having the smallest font size. These elements
help break up content on the page.

<div> … </div>
This tag allows you to divide the page content into
individual blocks.

<span> … </span>
This tag allows you to include inline elements (icons,
images, etc.) without affecting the rest of the page’s
formatting/styling.

<p> … </p>
This tag indicates that the text within is plain text.

<br/>
This tag creates a line break within text, for when
you need to drop down to a new line, such as when
writing an address.

<hr/>
This tag also creates a line break in the text but addi-
tionally adds a horizontal line indicating the end of
the previous section.
<q> … </q>
4. Text Formatting This tag is used for shorter quotations (usually short-
er than three lines), and is often used along with the
<cite> tag.
<strong> … </strong>
<b> … </b> <abbr> … </abbr>
Use either of these tags to bold text. This tag is used to indicate abbreviations, along with
the full forms.
<em> … </em>
<i> … </i> <acronym> … </acronym>
Use either of these tags to italicize text.
This tag is no longer supported in HTML5. It is used
to indicate an acronym.
<tt> … </tt>
This tag is no longer supported in HTML5. It was
<address> … </address>
used to create fixed width text.
This tag is used to indicate author contact details.

<strike> … </strike> <dfn> … </dfn>


This tag is used to create strikethrough text (words
This tag is used to create an inline definition within
with a line through them). This tag is generally no
the body of the text.
longer supported.
<code> … </code>
<cite> … </cite> This tag allows you to display code snippets within
This tag allows you to cite references, such as when
the body of the text.
using quotes.
<sub> … </sub>
<pre> … </pre> This tag allows you to create a subscript (example:
This tag is used to create preformatted, monospace
footnote1).
text that keeps whitespace inside the element intact.
<sup> … </sup>
<del> … </del> This tag allows you to create a superscript (example:
This tag indicates that a section of text was previous-
X3).
ly deleted from the document.
<small> … </small>
<ins> … </ins> This tag allows you to create text of reduced size.
This tag indicates that a section of text has been
In HTML5, it also may refer to invalid, irrelevant, or
inserted into the document.
inaccurate information.

<blockquote> … </blockquote> <bdo> … </bdo>


This tag indicates a longer quote (usually longer
This tag is used to identify which text should be read
than three lines), and is often used along with the
opposite from the text preceding it.
<cite> tag.
5. Links
<a href=””> … </a>
This tag indicates anchor text for a hyperlink.

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


This tag indicates a link used for sending emails.

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


This tag allows you to create clickable links to tele-
phone numbers (indicated here by the # symbols).

<a name=”name”> … </a>


This tag allows for fast navigation around the web-
page itself, taking users to specific document ele-
ments.

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


This tag allows for fast navigation around the web-
page itself, taking users to specific div elements.
6. Images
<img />
This tag allows you to display image files in the web-
page.

src=”url”
This allows you to designate the source URL of an im-
age, indicating where the file is located (either locally
or online).

alt=”text”
This allows you to specify fallback text used if the
image doesn’t load.

height=””
This specifies the height of the image, either in pixels
or percentages.

width=””
This specifies the width of the image, either in pixels
or percentages.

align=””
This indicates the relative alignment of the image,
allowing it to shift in accordance with changes to
other page elements.

border=”” <area />


This allows you to set the border thickness of an im- This is used to specify the image map area.
age. It defaults to zero (0) if the tag is not included.
shape=””
<map> … </map> Use this tag to denote the shape of the interactive
This allows you to include an interactive image with map area.
areas that can be clicked on.
coords=””
<map name=””> … </map> Use this to designate the coordinates of the vital
Use this to denote the name of the map associated information of the shape, such as vertices for rectan-
between the image and the map. gles, or center/radius for circles.
7. Lists
<ol> … </ol>
This tag allows you to designate ordered (numbered)
lists.

<ul> … </ul>
This tag allows you to create unordered (bulleted)
lists.

<li> … </li>
This tag allows you to specify each list item to be
bulleted or numbered.

<dl> … </dl>
This tag is reserved for list items definitions.

<dt> … </dt>
This tag lets you set the definition of a single term
inline with body content.

<dd> … </dd>
Use this tag to set the description for a defined term.
8. Forms
<form> … </form>
This element is the parent tag for an HTML form,
spelling out how the form will operate.

action=”url”
Use this attribute to specify the URL where the data
will be sent once the form has been submitted.

method=””
This specifies the method, either POST or GET, that
will be used to submit the form.

enctype=””
This attribute dictates how the form data is to be
encoded (used only for POST method).

autocomplete
This dictates whether the form will have autocom-
plete on or off.

novalidate
Use this to indicate that the form will not be validat-
ed upon submission.

accept-charsets
This determines the character coding upon form
submission. <label> … </label>
This tag can be used to tell the user what to enter in
target each field.
This designates where to display the form response
upon form submission (generally has one of the fol- <legend> … </legend>
lowing values: _blank, _self, _parent, _top. This tag acts as a caption for the <fieldset> element.

<fieldset> … </fieldset> <input />


This tag identifies the group of all fields on the form. This tag is used to take input from the user, with
input type being determined by a number of attri-
butes.
9. Input Type Attribute
type=”” pattern=””
Use this attribute to specify which type of input is This attribute can be used to look for patterns in user
being requested from the user. text. The <input> element is checked against this
expression to ensure that the user has entered the
name=”” correct information.
This allows you to specify the name of the input field.
min=””
value=”” This allows you to set the minimum value for the
This attribute describes the value/input-field infor- <input> element.
mation.
max=””
size=”” This allows you to set the maximum value for the
This attribute specifies the <input> element width <input> element.
using number of characters.
autofocus
maxlength=”” This attribute forces focus on the <input> element
once the webpage has finished loading.
Use this attribute to designate the maximum num-
ber of input characters allowed. disabled
This attribute disables the <input> element.
required
The attribute allows you to designate which input <textarea> … </textarea>
fields are required, meaning that the form cannot be This tag can be used to designate areas where longer
submitted unless the field is filled. strings of input (multi-sentence) will be allowed.

width=”” <select> … </select>


This attribute specifies the <input> element width This tag creates a list of options which the user can
using pixel values. choose from.

height=”” multiple
This attribute specifies the <input> element height This tag makes it possible for users to select multiple
using pixel values. options at the same time.

placeholder=””
Use this attribute to provide an example of what the
<input> element value might be.
10. Option Attributes
value=””
This attribute allows you to designate what text will
be visible to the user for any specific option.

selected
This attribute determines which option is selected
by default when the form loads.

<button> … </button>
Use this tag when creating a button for form submis-
sion.
11. Tables
<table> … </table>
This tag is used to designate a table in a webpage.

<caption> … </caption>
Use this tag to add a description for the table.

<thead> … </thead>
This tag contains the data/information that will go
into the table.

<tfoot> … </tfoot>
Use this tag to designate the footer of the table.

<tr> … </tr>
This tag contains the data/information to be includ-
ed in a single row of the table.

<th> … </th>
This tag contains the data/information to be includ-
ed in a single header item.

<td> … </td>
This tag contains the data/information to be includ-
ed in a single cell of the table.

<colgroup> … </colgroup>
Use this tag to group one or more columns for for-
matting purposes.

<col />
This tag defines a single column of data/information
within the table.
12. Objects and
iFrames
<object> … </object>
This tag is used to embed multimedia into a web-
page. This can include video, audio, PDFs, or others.

height=””
This attribute specifies the <object> element height
using pixel values.

width=””
This attribute specifies the <object> element width
using pixel values.

type=””
Use this attribute to designate the type/format of
the object’s contents.

<iframe> … </iframe>
This tag allows you to create an inline frame that
lets you embed external multimedia content into
an existing document. This frame floats within the
webpage relative to other webpage items.
13. iFrame Attributes
name=””
This attribute allows you to create a name for the
<iframe>.

src=””
This attribute designates the source URL/path of the
multimedia object held inside the <iframe>.

srcdoc=””
This attribute designates the HTML content to be
displayed inside the <iframe>.

height=””
This attribute determines the height of the <iframe>.

width=””
This attribute determines the width of the <iframe>.

<param />
This tag allows you to further customize your iFrame
content by appending extra parameters.

<embed> … </embed>
This tag is used to embed external objects into the
iFrame, such as flash videos.
14. Embed Attributes
height=””
This attribute determines the height of the embed-
ded content you’re including.

width=””
This attribute determines the width of the embed-
ded content.

src=””
This attribute designates the source URL/path of the
external file you’re embedding.

type=””
Use this attribute to designate the media type of the
embedded content.
15. HTML Entities
&#34; &quot;
Quotation Marks - “

&#38; &amp;
Ampersand - &

&#60; &lt;
Less than sign - <

&#62; &gt;
Greater than sign - >

&#160; &nbsp;
Non-breaking space

&#169; &copy;
Copyright symbol - ©

&#64; &Uuml;
@ Symbol - @

&#149; &ouml;
Small bullet - •

&#153; &ucirc;
Trademark symbol - ™
<mark> … </mark>
16. HTML5 Semantic This tag displays a portion of highlighted text on the

Tags
page.

<nav> … </nav>
<header> … </header> This tag allows you to create navigation links within
This tag defines the header block for a document or the document.
for an individual section.
<menuitem> … </menuitem>
<footer> … </footer> Use this tag to designate a specific menu item that a
This tag identifies the footer block for the document user can raise from a popup menu.
or for an individual section.
<meter> … </meter>
<main> … </main> This tag describes the scalar measurement within a
Use this tag to describe the main content of a docu- known array.
ment.
<progress> … </progress>
<article> … </article> This tag displays the progress of a task, usually within
This tag is used to identify an article inside a docu- a progress bar.
ment.
<rp> … </rp>
<aside> … </aside> This tag displays text within browsers that do not sup-
This tag specifies content contained in a document port ruby annotations.
sidebar.
<rt> … </rt>
<section> … </section> This tag displays East Asian typography character details.
Use this tag to create a section block in the document.
<ruby> … </ruby>
<details> … </details> Use this tag to describe a Ruby annotation for East
This tag allows you to include additional facts or Asian typography.
information that the user can then view or hide.
<summary> … </summary>
<dialog> … </dialog> This tag allows you to create a visible heading for a
Use this tag to create a dialog box or window. <details> element.

<figcaption> … </figcaption> <bdi> … </bdi>


Use the <figure> element caption to describe the This tag allows you to format part of text in a different
figure. direction from other text.

<figure> … </figure> <time> … </time>


This tag denotes an independent content block fea- Use this tag to identify the time and date.
turing diagrams, photos, illustrations, etc.
<wbr>
This tag is used to create a line-break within the content.

You might also like