Scribd
Upload
89 views

HTML and HTML5 Cheat Sheets

Uploaded by

María Belén Cerón
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
89 views

HTML and HTML5 Cheat Sheets

Uploaded by

María Belén Cerón
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML and HTML5 Cheat

sheets
HTML and HTML5 Cheat sheets for tags of Text
formatting, Section Division, Images, Links, Lists,
Frames, Forms, Special Characters and much more

Topics Page No.


Document Summary and Information Tags 1
Document Structuring Tags 3
Text Formatting Tags 4
Anchor and Image Tags 5
List and Form Tags 6
Input Tag 7
Select Tag 8
Table 9
Object and iframe 10
List of HTML5 New Tags 11
List of Character Objects 13

Developed by SnippetNuggets.com
1 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

• Assigning precise yet descriptive title to


webpage is essential and useful for user, search
Document Summary Tags engine as well as web developer.
• While saving a webpage into local disk, the
default name given to file is title.
<!DOCTYPE html>
This tag is not an HTML tag, but a declaration
declares that document is HTML5. It is DTD(Document <body> … </body>
Type Declaration) This tag contains all elements which are intended to
Modern browsers interprets HTML5 without DTD but be displayed on page. It is the parent container for all
still it is best practice to start webpage with <!DOCTYPE contents or elements of the page.
html>. Nuggets:
Nuggets:
• Elements in webpage are rendered in the order
• It is not HTML tag. of their existence inside <body> unless altered
• Case-insensitive. using CSS or JavaScript.
• Helps browser to display webpage correctly. • Modularization of elements inside <body> tag is
an art and differentiates professional web
<html> … <html> developer with others. Modularisation using
This tag is root element/tag for page.
<section>, <header>, <footer> and customized
Nuggets:
containers is good practice.
• Must be used as parent or root tag.
• Presence of <html> … <html> tag confirms that
document is HTML page.
Example
• Must contain <head> … </head>, <title> …
</title> and <body> … </body>. <!DOCTYPE html>
<html>
<head> … </head> <head>
This tag is used to specify meta-data about HTML <title>Document Title</title>
page and dependencies files. Some meta-datas like: <meta name="keywords" content="Tutorial, reference,
description, keywords, author, viewport and http-equiv cheat sheet ">
etc. It also contains tags like link and script for including <link rel="stylesheet" href="./css/libs/font-
awesome/4.6.3/css/font-awesome.min.css">
dependencies files for CSS, JavaScript and font-usages
<script src="./js/libs/jquery.min_3.3.1.js"
etc. type="text/javascript"></script>
Nuggets: </head>
<body>
• Must be first child of HTML tag.
Body of webpage.
• <head> … </head> is the first element loaded </body>
by browser, hence all essential </html>
linking/dependencies and sourcing of JavaScript
must be included inside this tag.

<title> … </title>
This tag contains name/title of the page. It is the
Document Information Tags
name visible at the title’s bar or tab bar of browser.
<base> … </base>
Nuggets:
This tag is used to specify base URL/target of
• Search Engines use title as one of the most webpage for all relative URLs of a webpage. It also acts
important parameter for indexing webpage.
Hence, a relevant and informative title helps
improving ranking of your webpage.
2 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

as default URL and a default target for the links in <head>


webpage in case there is broken link. <link rel="stylesheet" type="text/css" href="theme.css">
Nuggets: </head>

• Using <base> tag will make website design easy


to maintain and lesser prone to link mismatch. <style> … </style>
• Should be inside <head> tag. This tag is used when you don’t want to use <link>
• Presence of <base> tag ensures a default tag to add external resources into your webpage,
landing page for your webpage. instead you want to place CSS inside your HTML page.
Nuggets:
<head>
<base • When there are only few CSS properties
href=http://snippetnuggets.com/cheatsheets/index.html“ target
needed, it is adviced to use in-file CSS using
=”_blank”>
<style> tag instead of maintaining an external
</head>
CSS file and linking it using <link> tag

<meta> … </meta> <head>


This tag is for providing information/data about the <style>
webpage. Modern webpages need some additional h1{ color: blue;}
information which are not rendered in UI, but are useful .paragraph_class{font-color: grey;}
</style>
for Browser and Search Engines to understand webpage
</head>
in a better way.
Nuggets:
<script> … </script>
• Should be inside <head> tag. This tag is used to define a client-side JavaScript.
• Passed as name/value pairs. Webpage either contains JavaScript inside <script> tag
• 5 meta-tags are: ‘keywords’, ‘description’, or uses <script> tag with ‘src’ attribute to point external
author’, ‘viewport’ and ‘http-equiv’. JavaScript file.
• For setting character encoding for webpage we Nuggets:
use <meta charset=”UTF-8”> or <meta http-
equiv="Content-Type" • JavaScript code are used to manipulate
content="text/html;charset=UTF-8"> webpage, form validation and alteration of
element based on User’s choice. It enables us to
<head> access any of the DOM elements of webpage
<meta name="keywords" content="Tutorial, reference, cheat and undertake varieties of actions on them. It is
sheet "> always a good practice to maintain an external
<meta name="description" content="Contains quick reference JavaScript unless webpage contains just few
for HTML tags ">
JavaScript statements which can better be
<meta name="author" content="Prakash Sao">
<meta name="viewport" content="width=device-width,
included using <script> tag in webpage itself.
initial-scale=1.0"> • Better if included inside <head> so that
<meta name="http-equiv " content="30"> JavaScript statements get loaded quickly.
</head>

<head>
<script>
<link> … </link> document.getElementById("demo").innerHTML = "Hello
JavaScript!";
This tag is used to link resources like CSS and fonts
</script>
which are external to the webpage. </head>
Nuggets:
• Using <base> tag will make website design easy <noscript> … </noscript>
to maintain and lesser prone to link mismatch. This tag is used to provide an alternate message or
content for users if the browser doesn’t support client-
side JavaScripts.
3 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

Nuggets: • <div> tag is used to design an efficient layout of


webpage. Assigning an unique id and class to a
• It is advised to include <noscript> messages for
<div> and providing style for it is common
informing user about their browser settings practice.
instead of showing them broken page.
• All browser treats <div> as a block and places it
after line break. However, this behavior can be
<head> changed using desirable CSS.
<script>
document.getElementById("demo").innerHTML = "Hello <span> … </span>
JavaScript!"; Used to group inline-elements in webpage, unlike
</script> <div> tag which by default places line break before it.
<noscript>Your browser does not support
Nuggets:
JavaScript!</noscript>
</head> • <span> tag is mostly used with text data like,
formatting different part of paragraph text in
different format.
• <span> tag doesn’t offer any visual properties in
itself. One has to provide visual properties using
Document Structuring Tags CSS.

<p> … </p>
<h1..h6> … </h1..h6> This tag is used to display plain text as it is.
Nuggets:
HTML supports six levels of headings from
h1(largest) to h6 (smallest). One can further customize • Browsers automatically put some space/margin
their size/color/font through CSS. before and after each <p> element. This
Nuggets: behavior of browser can be modified using CSS
margin-left/right.
• Heading is given importance during indexing of
webpage by Search Engines. Also, headings are <br/>
used to categorize webpage in a better way so This tag inserts a single line break wherever placed.
It is an empty tag with no closing tag. In HTML/HTML5
<div class="myClass"> <br> is sufficient but in XHTML, properly closed <br/> is
<h1>Largest heading</h1> expected. <br/> tag doesn’t display a line, instead use
<h6>Smallest heading</h6> <hr/> tag
<p>This is paragraph displaying fruits color:
<span style="color: red">red apple</span> and <span
style="color: yellow;"> yellow mango </span> <hr/>
</p> This tag displays a single line break wherever placed.
</hr> It is an empty tag with no closing tag.
</br>
</div>
Example
that User find it easy to browse through
<p>
document structure. Hence, Heading should be
Text with different color:
given due importance.
<span style=”color: red”> red apple </span> and <span
style=”color: yellow;”> yellow mango </span>
<div> … </div> </p>
This tag divides webpage into different blocks or
sections by enclosing element(s) inside <div> which has
to be shown as one block.
Nuggets:
4 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

<del > … </del>


Used to define that text has been deleted from a
Text Formatting Tags document. It is opposite of <ins> tag.
Following are phrase or emphasis tags. <ins> … </ins>
Used to define that text is inserted into the
<strong> … </strong> document. It is opposite of <del> tag.
Used to make enclosed text bold. Better output with
effect can be achieved using CSS, hence <strong> is <blockquote> … </blockquote>
rarely used in modern web development. Used to specify a section which is quoted from other
source, reference or documents whose hyperlink is
provided to ‘cite’ attribute in <blockquote> tag. Refer
<small> … </small>
example.
Used to make enclosed text smaller. Better output
with effect can be achieved using CSS, hence <small> is
<q> … </q>
rarely used in modern web development.
Used as one liner short quotation. Browsers insert
double quotes around the quotation text.
<em> … </em>
Displays texts in italic <abbr> … </abbr>
Used to define an abbreviation or an acronym. It is
<code> … </code> used with attribute ‘title’ whose value is shown when
Displays computer code. acronym is mouse-hovered. Refer example.

<samp > … </samp> <address> … </address>


Used to display address/contact of owner/author of
Used to display sample output of computer code.
document/webpage/article.
<kbd > … </kbd> <dfn> … </dfn>
Defines keyboard input. Used to define a term when used for the first time in
document. Nearest parent to <dfn> tag must contain
<var > … </var>
complete definition or explaination for the term inside
Defines a variable.
<dfn> tag. Refer example.
<i> … </i>
Displays text in italic, but doesn’t emphasis text like
<sub> … </sub>
Used for writing a subscript(smaller font of height
<em> does.
half and below the normal line. It is used to write
<b> … </b> chemical formula like H2O )
Displays enclosed text in bold font. It is similar or
same as <strong>.
<sup> … </sup>
Used for writing superscript(smaller font of height
<tt> … </tt> half and above the normal line. It is used to write
Formatting for typewriter-like text. No longer footnotes or references like USA[1])
supported in HTML5.
Example
<strike> … </strike>
Used to strike out a text at the center.

<cite> … </cite >


Used to cite author, reference or document or a
quote.
5 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

<abbr title=”United States of America”> USA </abbr> consists Used for navigate to DOM element having class
of 50 states. name ‘class_name’ when anchor link is clicked.
<blockquote
cite=”https://en.wikipedia.org/wiki/United_States”> USA consists of
50 states and consists of North America and Alaska </blockquote>
Image Tag
<p><dfn>USA</dfn> consists of 50 state</p> <img> … <img/>
Used to insert and display image in webpage with
desired height, width, position. List of attributes:

Anchor Tag 1. src=’url’


URL or physical path of image.
<a href=””> … </a> 2. alt=’text’
Used for define a destination hyperlink, which gets Text which get displayed on mouse-hovering
loaded when anchor text/image or element is clicked. over image. If image link/path is broken, this
Most important attribute of <a> tag is ‘href’. By default, text will be displayed in place of image. Also,
browser displays(unless modified by custom CSS): this alt text is used by Search Engines while
1. An unvisited link as underlined and blue. indexing the webpage for what the image is
2. A visited link as underlined and purple. about.
3. An active or clicked link as underlined and red. 3. height=’’ and width=’’
defines height and width in pixels or
Nuggets: percentage.
4. align=’top|bottom|middle|left|right’
• Following Attributes are supported in <a> tag
defines relative alignment of an image.
only with ‘href’ tag: download, hreflang, media,
5. border=’xxpx’
rel, target and type.
specifies width of border around the image.
• A linked page mentioned in ‘href’ attribute is
Not supported in HTML5
loaded in the same browser tab unless ‘target’
6. longdesc=URL
attribute is specified for other target.
specifies a URL to a detailed description for
• ‘href’ tag can also contain ‘mailto’, ‘tel’ and
image.
‘#name’ as explained below.
7. usemap=#mapname
<a specifies an image as client-side image-map
href=”mailto:[email protected] <map name=””> … </map>
m”> … </a> designs an interactive(clickable and different mouse-
Used initiating the mail sending to specified mail-id hover title for different region) image. Required
when anchor link is clicked. attribute ‘name’ in the <map> element is associated
with <img> element’s ‘usemap’ attribute and creates
<a href=”tel://###,#####”> … </a> relationship between image <img> and map <map>.
Used for initiating a phone call to number specified.
It is useful when webpage is accessed from mobile <area/>
phone and link is clicked. Used for specifying <img>’s image map area.
Following attributes goes with <area> element.
<a name=”name”> … </a>
Used for navigate to different section of webpage 1. shape=’default|rect|poly|circle’
when anchor link is clicked. shape of area.

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


6 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

2. cords=’’ Inside <dl> element we need to provide list items using


specifies coordinates of area in comma <dt> and <dd>.
separated format.
<dt> … </dt>
Defines a term/name in description list. It is used in
<img src="flower.gif" width="125" height="126" alt="Planets"
usemap="#flowermap">
conjunction with <dl> (defines a description list) and
<map name="flowermap"> <dd> (describes each term/name).
<area shape="rect" coords="0,0,82,126" href="petal.htm"
alt="petal"> <dd> … </dd>
<area shape="circle" coords="90,58,3" href="center.htm"
Describes a term/name in description list. It is used
alt="center">
<area shape="circle" coords="124,58,8" href="bud.htm"
alt="bud"> <ol type="1" start="50" reversed>
</map>
<li>Coffee</li>
</img>
<li>Tea</li>
<li>Milk</li>
List Tag </ol>

<ul>
<ul> … </ul> <li>Coffee</li>
Defines an unordered or bulleted/dotted list. <li>Tea</li>
Following attributes are used in <ul> element: <li>Milk</li>
</ul>
1. type=’disc|square|circle’
<dl>
Specifies the kind of marker to use in the list. It
<dt>Coffee</dt>
is not supported in HTML5. Hence, same result <dd>Black hot drink</dd>
is achieved using CSS property ‘list-style-type’ <dt>Milk</dt>
with value: ‘disc|square|circle’ <dd>White cold drink</dd>
</dl>
<ol> … </ol>
in conjunction with <dl> (defines a description list) and
Defines an ordered list. Following attributes are used
<dd> (describes each term/name).
in <ol> element:

1. reversed:
Form Tag
Specifies that list ordering should be in reverse
order of number like(5,4,3,2,1 or e, d, c, b, a).
Example: <ol reversed> … </ol>
<form> … </form>
2. start=’<number>’
Used for creating HTML form for user to input. Form
Specifies start value of numbering.
elements contain several elements(like input box,
3. type=’1|A|a|I|i’
textarea, button, select menu etc) to let user input the
Specifies the kind of marker used in ordered list
data. All such elements for user inputs are enclosed
like numeral, Uppercase alphabetic, Lowercase
inside <form> element.
alphabetic, Uppercase roman and Lowercase
roman Following attributes can be used in <form> element:

<li> … </li> 1. accept-charset=”IS-8859-1|utf-8”


Lists an individual items inside <ul> or <ol> element. Specifies the character encodings when form is
submitted. But if webpage is already
<dl> … </dl> interpreted by browser as being ‘utf-8’, then
Like <ul> and <ol> lists unordered and ordered lists having ‘accept-charset’ attribute is not
respectively. <dl> is description list where it lists item required. Character encoding for webpage can
which has to be displayed with definition/description. be set using <meta charset=”UTF-8”>
7 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

2. action=”URL”
URL where the form data will be submitted
Input Tag
after user fills form and submit. Used to create input elements inside the form.
3. autocomplete=”on|off” Based on the value of ‘type’ attribute, Input element
Specifies whether a form should have changes behavior to button, checkbox, color, data,
autocomplete on or off. datetime-local, file, email, radio, range etc. Given
4. enctype=” application|x-www-form- below are different attributes of <input> element.
urlencoded|multipart|form-data|text|plain”
Specifies how form-data should be encoded 1. accept=”file_extension|audio/*|video/*|image
when submitting it to the server(only for /*|media_type”
method=”post”) Specifies the types of files that server
5. name=”text” accepts(only for type=”file”)
Specifies the name of a form 2. alt=”text”
6. method=”get|post” Specifies an alternate text for images(only when
Specifies HTTP method to use while sending type=”image” is used in <input>). ‘alt’ attribute
form-data over network. is important for Indexing by Search Engines.
7. novalidate 3. autocomplete=”on|off”
Specifies that form should not be validated Specifies, if <input> should have autocomplete
while submitting. enabled or disabled.
8. target=”_blank|_self|_parent|_top” 4. autofocus
Specifies where to display the response which is Specifies if <input> element should get
received after submitting the form. autofocus when page loads.
5. checked
Other child elements of <Form> Specifies the state of <input> element
type=”checkbox” or type=”radio”
<fieldset> … </fieldset> 6. disabled
Used to group related elements inside form as one Specifies that an <input> element should be
entity and enclose them inside box. disabled.
7. form=”form_id”
<legend> … </legend> Specifies the id of <form> element to which
Specifies caption to the <fieldset> element.
<input> element belongs to.
<label> … </label> 8. formaction=”URL”
Used for assigning label to a field in the form. Specifies URL of the file that will process the
input control when form is submitted(only for
Example type=”submit” and type=”image”).
9. formenctype=”application/x-www-form-
urlencoded | multipart/form-data | text/plain”
<form> Specifies how the form data should be encoded
<fieldset> when submitting it to the server(only for
<legend>Personalia:</legend>
type=”submit” and type=”image”).
Name: <input type="text"><br> 10. formmethod=”get|post”
Email: <input type="text"><br> Defines the HTTP method for sending data to
action URL(only for type=”submit” and
Date of birth: <input type="text">
</fieldset>
type=”image”)
</form> 11. formnovalidate
Defines that form elements should not be
<input> … </input> validated when submitted.
8 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

12. formtarget=”_blank|_self|_parent|_top|frame 26. step=”number”


name” Specifies the legal number intervals for an input
Specifies where to display the response that is field.
received after submitting the form(only for
27. type=”<type of input>”
type=”submit” and type=”image”)
Following are the values an type attribute can
13. height=”<in pixels>”
take
Specifies height of an <input> element(only for
type=”image”). For other types of <input> type values
element, modifying height through CSS is • button • • passwor
preferred. • checkbox d
14. list=”datalist_id” • color • radio
Specifies to <datalist> element that contains • data • range
pre-defined options for an <input> element. • datetime-local • reset
15. max=”number|data” • email • search
Specifies the maximum value for an <input> • file • submit
element. • hidden • tel
16. maxlength=”number” • image • text
Specifies the maximum number of characters • month • time
allowed in <input> element. • number • url
17. min==”number|data” • week
Specifies a minimum value for an <input>
element. 28. value=”text”
18. multiple Specifies the value of an <input> element.
Specifies that a user can enter more than one 29. width=”<pixels>”
value in an <input> element. Specifies width of an <input> element(only for
19. name=”text” type=”image”).
Specifies the name of an <input> element.
20. pattern=”<regexp>”
Specifies a regular expression that an <input>
Select Tag
element’s value is checked against before <select> … </select>
accepting input as correct. Used to create drop-down list with several options
21. placeholder=”text” to select. The <option> tags inside <select> element
Specifies a short hint that describes the creates list of options.
expected value of an <input> element.
22. readonly <option> … </option>
Specifies a short hint that describes the Used to create list of options for <select> element.
expected value of an <input> element.
23. required Nuggets:
Specifies that an input field must be filled • The <select> element is a form control and can
before submitting the form. Such elements are be used in a form to collect user input.
shown with an asterisk symbol before it. • <select> and <option> elements also supports
24. size=”number” both global and event attribute.
Specifies the width, in characters, of an <input> • <option> element(s) go inside <select> or
element. <datalist> element
25. src=”URL” • The <option> tag can be used without any
Specifies the URL of the image to use as a attributes, but you usually need the value
submit button(only for type=”image”).
9 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

attribute, which indicates what is sent to the


server.
• If you have a long list of options, you can group Example
and sub-group related options with the
<optgroup> tag.
<form>
<fieldset>
Example <legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
<select>
Date of birth: <input type="date"><br/>
<optgroup label="Swedish Cars">
Occupation:
<option value="volvo">Volvo</option>
<select>
<option value="saab">Saab</option>
<option value="student">Student</option>
</optgroup>
<option value="professional">Professional</option>
<optgroup label="German Cars">
<option value="retired">Retired</option> <option
<option value="mercedes">Mercedes</option>
value="others" disabled>Others</option>
<option value="audi">Audi</option>
</select><br/>
</optgroup>
<textarea name="comments">Comments</textarea><br/>
</select>
<input type="submit" value="Submit">
List of Attributes for <select> element
</fieldset>
1. name=”text” </form>

Specifies name of drop-down list.


2. size=”number” Table Tag
Specifies number of visible options in drop-
down list. <table> … </table>
3. autofocus Used to create table in webpage. Inside <table>
Specifies that, drop-down should get by default element there are one or more <th>(table header),
focus when webpage loads. <tr>(table row) and <td>(table data) elements. A more
4. disabled complex HTML table may also include <caption>, <col>,
Specifies that drop-down list should be <colgroup>, <thead>, <tfoot>, and <tbody> elements.
disabled.
5. form=”form_id” Nuggets:
Defines one or more forms the <select>
• HTML5 specifications have made <table>
element belongs to.
element more precise and suggested to use CSS
6. multiple
Specifies, if multiple options can be selected. structuring instead of using tag’s attributes.
7. required Hence, "align", "bgcolor", "border",
Specifies if user is required to select an option "cellpadding", "cellspacing", "frame", "rules",
before submittimg form. "summary", and "width" attributes are not
supported in HTML5.
List of Attributes for <option> element
1. disabled <caption> … </caption>
Specifies that an option in <select> has to be Used to provide description of table. <caption> tag
disabled. must be inserted immediately after <table> tag.
2. label=”text”
Nuggests:
Specifies shorter label for an option.
3. selected • Only one caption per table is allowed.
Specifies that the option should be pre-selected • By default, a table caption will be center-aligned
on page load. above a table. However, the CSS properties
4. value=”text”
Specifies the value which is sent to server.
10 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

‘text-align’ and ‘caption-side’ can be used to pages using <object> element.


align and place the caption. <table>
<caption>Monthly savings</caption>
<thead> … </thead> <tr>
Used to group header content in HTML table. <td colspan="2">Table containing month savings</td>
</tr>
Nuggets: <tr>
<th>Month</th>
• The <thead> element is used in conjunction <th>Savings</th>
with the <tbody> and <tfoot> elements to </tr>
<tr>
specify each part of a table (header, body, <td>January</td>
footer). The <thead> tag must be used in the <td>$100</td>
following context: As a child of a <table> </tr>
<tr>
element, after any <caption>, and <colgroup>
<td>February</td>
elements, and before any <tbody>, <tfoot>, and <td>$50</td>
<tr> elements. </tr>
</table>
<tbody> … </tbody> Object and iFrame Tags
Used to define the body of table where data is held.
<object> element also supports both global and event
<tfoot> … </tfoot> attributes.
Used to create the footer of the table.
Nuggets:
<tr> … </tr>
Used to create single row of the table. • You can also use the <object> tag to embed
another webpage into your HTML document.
<th> … </th> • You can use the <param> tag to pass
Used to create heading of the table’s column. parameters to plugins that have been
embedded with the <object> tag.
<td> … </td> • An <object> element must appear inside the
Used to create a single cell in table which contains <body> element. The text between the <object>
actual data. Following are the attributes for <td> and </object> is an alternate text, for browsers
element: that do not support this tag.
• colspan=”<integer>” • For images use the <img> tag instead of the
colspan attribute defines the number of <object> tag.
columns a cell should span. • At least one of the "data" or "type" attribute
• rowspan=”<integer>” MUST be defined.
rowspan attribute specifies the number of rows Following attributes are used in <object> element:
a cell should span.
1. data=”URL”
<colgroup> … </colgroup> Specifies the URL of the resource to be used by
Used for grouping column together. the object
2. height=”<pixels value>”
<col> … </col> Specifies the height of object.
Denotes a column inside the table.

<object> … </object> Example


Used to embed object(multimedia) within an HTML
document. Multimedia objects like audio, video, Java 3. form=”form_id”
applets, ActiveX, PDF, and Flash are embedded in web Specifies one or more forms the object belongs
to.
11 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

4. name=”name” Used to embed an external object, like plugins(e.g.


Specifies name of object. flash video). <embed> tag defines a container for an
5. width=”<pixels value>” external application or interactive content (a plug-in).
Specifies the width of object. Attributes of <embed> element:
6. type=”media_type”
1. height=”<in pixels>”
Specifies the media type of data specified in the
Specifies height of embedded item.
data attribute
2. width=”in pixels”
7. usemap=”#mapname”
Specifies width of embedded item.
Specifies the name of a client-side image map
3. type=”media_type”
to be used with the object.
Specifies the media type of content of
<iframe> … </iframe> embedded content.
Used to embed an inline frame. An inline frame is 4. src=”URL/Path”
used to embed another document within current HTML The URL/Path of the embedded item.
document.
Example
Nuggets:
<object width="500" height="500">
• To deal with browsers that do not support </object>
<iframe>, add a text between the opening <iframe src="link_to_other_webpage.html" width="500"
<iframe> tag and the closing </iframe> tag. height="500"> </iframe>
<embed src="some_video.swf" width="250" height="250"></embed>
• Use CSS to style the <iframe> (even to include
scrollbars).
List of HTML5 new Tags
Attributes for <iframe> element:
The W3C HTML5 Specification introduced many new
1. name=”name” tags for purposes like Semantic/Structural elements,
Specifies name of an <iframe> element. Text-formatting, Form elements, input types, Graphics
2. height=”<pixels value>” and Media Elements.
Specifies the height of object.
3. width=”<pixels value>” New Semantic/Structural Elements for better
Specifies the width of object. documenting structure:
4. src=”URL”
Source URL/path of the multimedia object to be
Tags Description
<article> Defines an article in document.
held inside the iFrame.
<aside> Defines content aside of page content
5. srcdoc=”HTML_code”
<bdi> Defines text which has to be displayed
Specifies the HTML content of the page to show
bi-directional
in the <iframe> <details> Defines additional details that the
6. sandbox=”allow-forms | allow-pointer-lock | user can view or hide
allow-popups | allow-same-origin | allow- <dialog> Defines a dialog box or window
scripts | allow-top-navigation” <figcaption> Defines a caption for a <figure>
Enables an extra set of restrictions for the element
content in an <iframe>. <figure> Defines self-contained content
<footer> Defines a footer for a document or
<param/> section
For iFrame customization. This includes additional <header> Defines a header for a document or
parameters to go along with the content. section
<main> Defines main content of document.
<embed> … </embed>
12 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

Tags Description time min and max


<mark> Defines marked/highlighted text url multiple
<meter> Defines a scalar measurement within week pattern(regex)
known range(a gauge) placeholder
<nav> Defines navigation links required
<progress> Represents the progress of a task step
<rp> Defines what to show in browsers
that do not support ruby annotations
New Attributes syntax
<rt> Defines an
explanation/pronunciation of HTML5 allows four different syntaxes for attributes.
characters(for East Asian typography) Example with <input> tag:
<section> Defines a section in a document
<summary> Defines a visible heading for a Type Example
<details> element. Empty <input type="text" value="John"
<time> Defines a date/time disabled>
<wbr> Defines a possible line-break Unquoted <input type="text" value=John>
Double-quoted <input type="text" value="John
Doe">
Single-quoted <input type="text" value='John
Doe'>

In HTML5, all four syntaxes may be used, depending on


what is needed for the attribute.
New HTML5 Graphics Elements
HTML5 allows four different syntaxes for attributes.
Example with <input> tag:
New Form Elements
Type Example
Tags Description <canvas> The <canvas> element is only a
<datalist> Specifies a list of pre-defined options container for graphics. You must use
for input controls JavaScript to actually draw the
<output> Defines the result of a calculation graphics.
Canvas has several methods for
drawing paths, boxes, circles, text, and
New Input types and Attributes
adding images.
New Input Types New Input Attributes <svg> Draw scalable vector graphics. SVG has
several methods for drawing paths,
color autocomplete
boxes, circles, text, and graphic
date autofocus images.
datetime form
datetime-local formaction
email formenctype New Media Elements
month formmethod HTML5 allows four different syntaxes for attributes.
number formnovalidate Example with <input> tag:
range formtarget
search height and width
tel list
13 | HTML and HTML5 Cheat Sheet by www.SnippetNuggets.com

Type Example
<audio> Defines sound content
<embed> Defines a container for an external
(non-HTML) application
<source> Defines multiple media resources
for media elements (<video> and
<audio>)
<track> Defines text tracks for media
elements (<video> and <audio>)
<video> Defines video or movie

List of Character Objects


Many mathematical, technical and currency symbols
are not present in normal keyboard. For
displaying/adding such symbols in webpage we use
HTML entity name. If no entity name exists, you can use
an entity number, a decimal, or hexadecimal reference.

Char Number Entity Description


© &#169; &copy; Copyright symbol
€ &#8364; &euro; Euro symbol
™ &#8482; &trade; Trademark
“ &#34; &quot; Quotation mark
< &#60; &lt; Less than sign
> &#62; &gt; Greater than sign
&#160; &nbsp; Non-breaking space
& &#38; &amp; Ampersand
@ &#64; &Uuml; @ symbol
® &#174; &reg; Registered symbol

You might also like