Scribd
Upload
256 views5 pages

(New) The Complete HTML Cheat Sheet PDF

Uploaded by

Dany Nazare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
256 views5 pages

(New) The Complete HTML Cheat Sheet PDF

Uploaded by

Dany Nazare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

<page> 1

Document Summary
Document Information

<page> 2
Document Structure
Text Formatting

<page> 3
Links
Images

<page> 4
Lists
Forms
Input Type Attributes

<page> 5
Select Attributes
Option Attributes

<page> 6
Table Formatting
Objects and iFrames
iFrame Attributes

<page> 7
Embed Attributes
HTML5 New Tags
Collective Character Objects

www.hostinger.com
www.hostinger.com
<tt> … </tt>
Formatting for typewriter-like text. No longer
supported in HTML5.

<h1..h6> … </h1..h6> <strike> … </strike>


Six different variations of writing a heading. Another old tag, this is used to draw a line at
<h1> has the largest font size, while <h6> has the center of the text, so as to make it appear
the smallest. unimportant or no longer useful.

<div> … </div> <cite> … </cite>


A webpage’s content is usually divided into Tag for citing author of a quote.
blocks, specified by the div tag.
Let us see how we can break the code up <base/> <del> … </del>
in different components: Used to specify the base URL of your site, <span> … </span> Pre-formatted, ‘monospace’ text laid out with
this tag makes linking to internal links on your This tag injects inline elements, like an image, whitespace inside the element intact.
<html> … </html> site cleaner. icon, emoticon without ruining the formatting
This tag specifies that the webpage is written / styling of the page. <ins> … </ins>
in HTML. It appears at the very first and last line <meta/> Denotes text that has been inserted into
of the webpage. It is mainly used to show that This is the meta data tag for the webpage. <p> … </p> the webpage.
the page uses HTML5 – the latest version of Can be useful for mentioning the page’s author, Plain text is placed inside this tag.
the language. Also known as the root element, keywords, original published date etc. <blockquote> … </blockquote>
this tag can be thought of as a parent tag for <br/> Quotes often go into this tag. Is used in tandem with
every other tag used in the page. <link/> A line break for webpages. Is used when the <cite> tag.
This is used to link to scripts external to wanting to write a new line.
<head> … </head> the webpage. Typically utilized for including <q> … </q>
This tag is used to specify meta data about stylesheets. <hr/> Similar to the above tag, but for shorter quotes.
the webpage. It includes the webpage’s name, Similar to the above tag. But in addition to
its dependencies (JS and CSS scripts), font usage etc. <style> … </style> switching to the next line, this tag also draws <abbr> … </abbr>
The style tag can be used as an alternative to a horizontal bar to indicate the end Denotes abbreviations, along with the full forms.
<title> … </title> an external style sheet, or complement it. of the section.
As the name suggests, this tag contains Includes the webpage’s appearance information. <acronym> … </acronym>
the title/name of the webpage. You can see this Example Tag for acronyms. No HTML5 support.
in your browser’s title bar for every webpage open <script> … </script>
in the browser. Search engines use this tag to Used to add code snippets, typically in JavaScript, <div> <address> … </address>
extract the topic of the webpage, which is quite to make webpage dynamic. It can also be used to <h1>Top 5 Greatest Films</h1> Tag for specifying author’s contact details.
convenient when ranking relevant search results. just link to an external script. <p>These are considered the greatest
<span>reel-icon</span> of all time </p> <dfn> … </dfn>
Tag dedicated for definitions.
<body> … </body> Example <hr/>
Everything the user sees on a webpage is written <h2>1. The Godfather</h2>
inside this tag. It is a container for all the contents <html> <p>This 1972 classic stars Marlon Brando and <code> … </code>
of the webpage. <head> Al Pacino.</p> This is used to display code snippets within
<meta charset="utf-8"> </div> a paragraph.
Example <base href="http://myfirstwebsite.com"
<sub> … </sub>
target="_blank" />
<title>My Beautiful Website</title> Used for writing a subscript (smaller font just
<html>
<link rel="stylesheet" href="/css/master.css"> below the mid-point of normal font). Example: ax
<head>
<script type="text/javascript">
<title>My First Website</title>
var dummy = 0; <sup> … </sup>
</head> <strong> … </strong>
</script> Similar to the above tag, but for superscripting.
<body> Makes text bold. Used to emphasize a point
</head>
<body> <small> … </small>
</body> <b> … </b>
Reduces text size. In HTML5, it often refers to
</html> </body> Alternative to the above tag, also creates bold text.
redundant or invalid information.
</html>
<em> … </em>
Another emphasis tag, but this displays text
in italics.

<i> … </i>
Also used to display text in italics, but does not
emphasize it like the above tag.

www.hostinger.com www.hostinger.com
Example width=”” enctype=””
Specifies image width in pixels or percentages. Only for POST method, this dictates the data
<p><strong>Bold text</strong> Regular text encoding scheme to be used when form
<em>some words in italics</em> regular text align=”” is submitted.
The relative alignment of the image. Can change <ol> … </ol>
once again.</p>
with changes to other elements in the webpage. Tag for ordered or numbered list of items.
autocomplete
<blockquote> Determines if the form has auto-complete enabled.
border=”” <ul> … </ul>
Anyone who has never made a mistake has never
Specifies border thickness of the image. If not Contrary to the above tag, used for unordered
tried anything new.<cite>- Albert Einstein</cite> novalidate
mentioned, defaults to 0. list of items.
</blockquote> Determines whether the form should be validated
before submission.
<map> … </map> <li> … </li>
<pre>
Denotes an interactive (clickable) image. Individual item as part of a list.
Some pre-formatted text accept-charsets
</pre> Determines character encodings when form
<map name=””> … </map> <dl> … </dl>
<p>A code snippet: <code>some code</code></p> is submitted.
Name of the map associated between the image Tag for list of items with definitions.
and the map. target
<dt> … </dt>
After submission, the form response is displayed
<area /> The definition of a single term inline with
wherever this refers to, usually has the following
Specifies image map area. body content.
values: _blank, _self, _parent, _top

<a href=””> … </a> shape=”” <dd> … </dd>


<fieldset> … </fieldset>
Anchor tag. Primarily used for including Shape of the area. The description for the defined term.
Identifies the group of all fields on the form.
hyperlinks.
coords=”” Example <label> … </label>
<a href=”mailto:”> … </a> Coordinates of the vital information of the shape. This is used to label a field in the form.
Tag dedicated to sending emails. Example: vertices for rectangles, center/radius <ol>
for circles. <li>Monday</li> <legend> … </legend>
<a href=”tel://###-###”> … </a> <li>Tuesday</li> This operates as a caption for the <fieldset>
Anchor tag for mentioning contact numbers.
As the numbers are clickable, this can be
Example <li>Wednesday</li> element.
</ol>
particularly beneficial for mobile users. <ul> <input />
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap"> <li>France</li> This tag is used to take input from the user.
<a name=”name”> … </a> <li>Germany</li> Input type is determined by a number of attributes.
<map name="planetmap">
This tag can be used to quickly navigate to <li>Italy</li>
<area shape="rect" coords="0,0,60,100"
a different part of the webpage. </ul>
href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" <dl>
<a href=”#name”> … </a> <dt>Toyota</dt>
href="mercur.htm" alt="Mercury">
A variation of the above tag, this is only meant <dd>Japanese car brand</dd>
<area shape="circle" coords="124,58,8"
to navigate to a div section of the webpage. <dt>Armani</dt>
href="venus.htm" alt="Venus">
</map> <dd>Italian fashion brand</dd> type=””
</dl> Determines which type of input (text, dates,
password) is requested from the user.

name=””
Specifies the name of the input field.
<img />
A tag to display images in the webpage. value=””
<form> … </form> Specifies the value contained currently in
src=”url” The parent tag for an HTML form. the input field.
The URL or path where the image is located on
your drive or on the web. action=”url” size=””
The URL listed here is where the form data Determines the input element width
alt=”text” will be submitted once user fills it. (number of characters).
The text written here is displayed when user
hovers mouse over the image. Can be used to method=””
give additional details of the image. It specifies which HTTP method (POST or GET)
would be used to submit the form.
height=””
Specifies image height in pixels or percentages.

www.hostinger.com www.hostinger.com
maxlength=”” required
Specifies the most input field characters allowed. Specifies whether choosing an option/s is
necessary for form submission.
required
Makes an input field compulsory to be filled by autofocus <table> … </table> <object> … </object>
the user. The form cannot be submitted if a required Specifies that a drop-down list automatically Marks a table in a webpage. This tag is used to embed additional multimedia into
field is left empty. comes into focus after a page loads. a webpage. Can be audio, video, document (pdf) etc.
<caption> … </caption>
width=”” <option> … </option> Description of the table is placed inside this tag. height=””
Determines the width of the input element, Tag for listing individual items in the list Determines object height in pixel values.
in pixel values. <thead> … </thead>
of options.
Specifies information pertaining to specific width=””
height=”” columns of the table. Determines object width in pixel values.
Determines the height of the input element,
in pixel values. <tbody> … </tbody> type=””
The body of a table, where the data is held. The type/format of the object’s contents.
placeholder=””
Can be used to give hints to the user about the nature value=”” <iframe> … </iframe>
<tfoot> … </tfoot>
of the requested data. The text visible to the user for any given option. Determines the footer of the table. An inline block of content, this is used as a container
for multimedia in a flexible manner. It floats inside
pattern=”” selected <tr> … </tr> a webpage, meaning it is placed relative to other
Specifies a regular expression, which can be used to Determines which option is selected by default
look for patterns in the user’s text. Denotes a single row in a table. webpage items.
when the form loads.
min=”” <th> … </th>
<button> … </button> The value of a heading of a table’s column.
The minimum value allowed for an <input> element.
Tag for creating a button for form submission.
max=”” <td> … </td>
The maximum value allowed for an <input> element. Example A single cell of a table. Contains the actual
value/data. name=””
autofocus <form action="form_submit.php" method="post"> The name of the iFrame.
Forces focus on the input element when webpage <fieldset> <colgroup> … </colgroup>
loads completely. <legend>Bio:</legend> Used for grouping columns together. src=””
First name:<br> The source URL/path of the multimedia object
disabled <input type="text" name="first-name" <col> to be held inside the iFrame.
Disables the input element. User can no longer value="John" placeholder="Please Denotes a column inside a table.
enter data. enter your first name here"><br> srcdoc=””
Any HTML content to be displayed inside
<textarea> … </textarea>
Last name:<br> Example the iFrame.
<input type="text" name="last-name"
For longer strings of input. Can be used to get value="Doe" placeholder="Please
multi-sentence text from the user. <table>
enter your last name here"><br><br> height=””
<colgroup>
Favorite sport:<br> Determines the height of the iFrame.
<select> … </select> <col span="2">
<select> <col>
This tag specifies a list of options which the user width=” ”
can choose from. <option value="soccer">Soccer </colgroup>
</option> Determines the width of the iFrame.
<tr>
<option value="tennis">Tennis <th>Name</th>
</option> <param />
<th>Major</th>
<option value="golf">Golf For iFrame customization. This includes
<th>GPA</th>
</option> additional parameters to go along with
</tr>
</select> the content.
<tr>
<textarea name="description"> <td>Bob</td>
</textarea> <embed> … </embed>
name=”” <td>Law</td>
<input type="submit" value="Submit"> This is used to embed external objects, like
The name of a particular list of options. <td>3.55</td>
</fieldset> plugins (e.g. a flash video).
</tr>
size=”” </form> <tr>
Total number of options given to the user. <td>Alice</td>
<td>Medicine</td>
multiple <td>3.61</td>
States whether the user can choose multiple </tr>
options from the list. </table>

www.hostinger.com www.hostinger.com
<figure>…</figure>
A tag reserved for figures (diagrams, charts) in HTML5.

<figcaption> … </figcaption>
height=”“ A description of the figure is placed inside these.
Determines the height of the embedded item.
<mark>…</mark>
width=”“ Used to highlight a particular portion of the text.
Determines the width of the embedded item.
<nav>…</nav>
type=”” Navigation links for the user in a webpage.
The type or format of the embedded content.
<menuitem>…</menuitem>
src=”” A particular item from a list or a menu.
The URL/path of the embedded item.
<meter>…</meter>
Example Measures data within a given range.

<object width="1000" height="1000"></object> <progress>…</progress>


<iframe src="some_other_webpage.html" Typically used as a progress bar, this is used to
width="500" height="500"></iframe> track progress.
<embed src="some_video.swf" width="500"
height=“500"></embed> <rp>…</rp>
This tag is meant for showing text for browsers
without ruby annotation support.

<rt>…</rt>
Displays East Asian typography character details.
<header> … </header>
Specifies the webpage header. Could also be used <ruby>…</ruby>
for objects inside the webpage. Describes a Ruby annotation for East Asian
typography
<footer> … </footer>
Specifies the webpage footer. Could also be used <time>…</time>
for objects inside the webpage. Tag for formatting date and time.

<main>…</main> <wbr>
Marks the main content of the webpage. A line-break within the content.

<article>…</article>
Denotes an article.

<aside> … </aside>
Denotes content displayed in a sidebar of
&#34; &quot; &#38; &amp;
the webpage.
Quotation Marks - “ Ampersand - &
<section>…</section>
Specifies a particular section in the webpage. &#60; &lt; &#64; &Uuml;
Less than sign - < @ Symbol - @
<details> … </details>
Used for additional information. User has &#62; &gt; &#149; &ouml;
the option to view or hide this. Greater than sign - > Small bullet - •

<summary> … </summary> &#160; &nbsp; &#153; &ucirc;


Used as a heading for the above tag. Is always Non-breaking space Trademark
visible to the user. symbol - ™
&#169; &copy;
<dialog>…</dialog> Copyright symbol - ©
Used to create a dialog box.

www.hostinger.com

You might also like