Scribd
Upload
21 views

CSE102 CheatSheetHTML

Uploaded by

student
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

CSE102 CheatSheetHTML

Uploaded by

student
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

www.hostinger.

com
<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
Let us see how we can break the code up
<base/>
in different components:
Used to specify the base URL of your site,
this tag makes linking to internal links on
<html> … </html>
your site cleaner.
This tag specifies that the webpage is written
in HTML. It appears at the very first and last
<meta/>
line of the webpage. It is mainly used to show
This is the meta data tag for the webpage.
that the page uses HTML5 – the latest version
Can be useful for mentioning the page’s author,
of the language. Also known as the root
keywords, original published date etc.
element, this tag can be thought of as a
parent tag for every other tag used in the
<link/>
page.
This is used to link to scripts external to
the webpage. Typically utilized for
<head> … </head>
including stylesheets.
This tag is used to specify meta data about
the webpage. It includes the webpage’s
<style> … </style>
name,
The style tag can be used as an alternative to
its dependencies (JS and CSS scripts), font usage
an external style sheet, or complement it.
etc.
Includes the webpage’s appearance information.
<title> … </title>
<script> … </script>
As the name suggests, this tag contains
Used to add code snippets, typically in
the title/name of the webpage. You can see this
JavaScript, to make webpage dynamic. It can
in your browser’s title bar for every webpage open
also be used to just link to an external script.
in the browser. Search engines use this tag to
extract the topic of the webpage, which is quite
convenient when ranking relevant search results. Example
<body> … </body> <html>
Everything the user sees on a webpage is written <head>
inside this tag. It is a container for all the contents <meta charset="utf-8">
of the webpage. <base href="http://myfirstwebsite.com"
target="_blank" />
<title>My Beautiful Website</title>
Example <link rel="stylesheet" href="/css/master.css">
<script type="text/javascript">
<html> var dummy = 0;
<head> </script>
<title>My First Website</title> </head>
</head> <body>
<body>
</body>
</body> </html>
</html>
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
the smallest. appear 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.
<del> … </del>
<span> … </span> Pre-formatted, ‘monospace’ text laid out with
This tag injects inline elements, like an image, whitespace inside the element intact.
icon, emoticon without ruining the formatting
/ styling of the page. <ins> … </ins>
Denotes text that has been inserted into
<p> … </p> the webpage.
Plain text is placed inside this tag.
<blockquote> … </blockquote>
<br/> Quotes often go into this tag. Is used in tandem with
A line break for webpages. Is used when the <cite> tag.
wanting to write a new line.
<q> … </q>
<hr/> Similar to the above tag, but for shorter quotes.
Similar to the above tag. But in addition to
switching to the next line, this tag also <abbr> … </abbr>
draws a horizontal bar to indicate the end Denotes abbreviations, along with the full forms.
of the section.
<acronym> … </acronym>
Example Tag for acronyms. No HTML5 support.

<div> <address> … </address>


<h1>Top 5 Greatest Films</h1> Tag for specifying author’s contact details.
<p>These are considered the greatest
<span>reel-icon</span> of all time </p> <dfn> … </dfn>
<hr/> Tag dedicated for definitions.
<h2>1. The Godfather</h2>
<p>This 1972 classic stars Marlon Brando and <code> … </code>
Al Pacino.</p> This is used to display code snippets
</div> within a paragraph.

<sub> … </sub>
Used for writing a subscript (smaller font just
below the mid-point of normal font). Example: ax

<strong> … </strong> <sup> … </sup>


Makes text bold. Used to emphasize a point Similar to the above tag, but for superscripting.

<b> … </b> <small> … </small>


Alternative to the above tag, also creates bold Reduces text size. In HTML5, it often refers to
text. redundant or invalid information.

<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
Example width=””
Specifies image width in pixels or percentages.
<p><strong>Bold text</strong> Regular text
<em>some words in italics</em> regular text align=””
once again.</p> The relative alignment of the image. Can change
with changes to other elements in the webpage.
<blockquote>
Anyone who has never made a mistake has never border=””
tried anything new.<cite>- Albert Einstein</cite> Specifies border thickness of the image. If not
</blockquote> mentioned, defaults to 0.

<pre> <map> … </map>


Some pre-formatted text Denotes an interactive (clickable) image.
</pre>
<p>A code snippet: <code>some <map name=””> … </map>
code</code></p> Name of the map associated between the image
and the map.

<area />
Specifies image map area.

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


Shape of the area.
Anchor tag. Primarily used for including
hyperlinks.
coords=””
<a href=”mailto:”> … </a> Coordinates of the vital information of the
Tag dedicated to sending emails. shape. Example: vertices for rectangles,
center/radius for circles.
<a href=”tel://###-###”> … </a>
Anchor tag for mentioning contact numbers. Example
As the numbers are clickable, this can be
particularly beneficial for mobile users. <img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap">
<a name=”name”> … </a> <map name="planetmap">
This tag can be used to quickly navigate <area shape="rect" coords="0,0,60,100"
to a different part of the webpage. href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3"
<a href=”#name”> … </a> href="mercur.htm" alt="Mercury">
A variation of the above tag, this is only <area shape="circle" coords="124,58,8"
meant to navigate to a div section of the href="venus.htm" alt="Venus">
webpage. </map>

<img />
A tag to display images in the webpage.

src=”url”
The URL or path where the image is located on
your drive or on the web.

alt=”text”
The text written here is displayed when user
hovers mouse over the image. Can be used to
give additional details of the image.

height=””
Specifies image height in pixels or percentages.

www.hostinger.com
enctype=””
Only for POST method, this dictates the data
encoding scheme to be used when form
is submitted.
<ol> … </ol>
Tag for ordered or numbered list of items.
autocomplete
Determines if the form has auto-complete enabled.
<ul> … </ul>
Contrary to the above tag, used for unordered
novalidate
list of items.
Determines whether the form should be validated
before submission.
<li> … </li>
Individual item as part of a list.
accept-charsets
Determines character encodings when form
<dl> … </dl>
is submitted.
Tag for list of items with definitions.
target
<dt> … </dt>
After submission, the form response is displayed
The definition of a single term inline with
wherever this refers to, usually has the
body content.
following values: _blank, _self, _parent, _top
<dd> … </dd>
<fieldset> … </fieldset>
The description for the defined term.
Identifies the group of all fields on the form.

Example <label> … </label>


This is used to label a field in the form.
<ol>
<li>Monday</li> <legend> … </legend>
<li>Tuesday</li> This operates as a caption for the <fieldset>
<li>Wednesday</li> element.
</ol>
<ul> <input />
<li>France</li> This tag is used to take input from the user.
<li>Germany</li> Input type is determined by a number of attributes.
<li>Italy</li>
</ul>
<dl>
<dt>Toyota</dt>
<dd>Japanese car brand</dd>
<dt>Armani</dt>
<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.

value=””
<form> … </form> Specifies the value contained currently in
The parent tag for an HTML form. the input field.

action=”url” size=””
The URL listed here is where the form data Determines the input element width
will be submitted once user fills it. (number of characters).

method=””
It specifies which HTTP method (POST or
GET) would be used to submit the form.

www.hostinger.com
maxlength=””
Specifies the most input field characters allowed. required
Specifies whether choosing an option/s is
required necessary for form submission.
Makes an input field compulsory to be filled by
the user. The form cannot be submitted if a required autofocus
field is left empty. Specifies that a drop-down list automatically
comes into focus after a page loads.
width=””
Determines the width of the input element, <option> … </option>
in pixel values. Tag for listing individual items in the list
of options.
height=””
Determines the height of the input element,
in pixel values.

placeholder=””
Can be used to give hints to the user about the
nature of the requested data. value=””
The text visible to the user for any given option.
pattern=””
Specifies a regular expression, which can be used to selected
look for patterns in the user’s text. Determines which option is selected by default
when the form loads.
min=””
The minimum value allowed for an <input> element. <button> … </button>
Tag for creating a button for form submission.
max=””
The maximum value allowed for an <input> element.
Example
autofocus
Forces focus on the input element when webpage <form action="form_submit.php" method="post">
loads completely. <fieldset>
<legend>Bio:</legend>
disabled First name:<br>
Disables the input element. User can no longer <input type="text" name="first-name"
enter data. value="John" placeholder="Please
enter your first name here"><br>
<textarea> … </textarea> Last name:<br>
For longer strings of input. Can be used to <input type="text" name="last-name"
get multi-sentence text from the user. value="Doe" placeholder="Please
enter your last name here"><br><br>
<select> … </select> Favorite sport:<br>
This tag specifies a list of options which the user <select>
can choose from. <option value="soccer">Soccer
</option>
<option value="tennis">Tennis
</option>
<option value="golf">Golf
</option>
</select>
<textarea name="description">
name=”” </textarea>
The name of a particular list of options. <input type="submit" value="Submit">
</fieldset>
size=”” </form>
Total number of options given to the user.

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

www.hostinger.com
<table> … </table> <object> … </object>
Marks a table in a webpage. This tag is used to embed additional multimedia into
a webpage. Can be audio, video, document (pdf)
<caption> … </caption> etc.
Description of the table is placed inside this
tag. height=””
Determines object height in pixel values.
<thead> … </thead>
Specifies information pertaining to specific width=””
columns of the table. Determines object width in pixel values.

<tbody> … </tbody> type=””


The body of a table, where the data is held. The type/format of the object’s contents.

<tfoot> … </tfoot> <iframe> … </iframe>


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
<tr> … </tr> a webpage, meaning it is placed relative to other
Denotes a single row in a table. webpage items.

<th> … </th>
The value of a heading of a table’s column.

<td> … </td>
A single cell of a table. Contains the
actual value/data. name=””
The name of the iFrame.
<colgroup> … </colgroup>
Used for grouping columns together. src=””
The source URL/path of the multimedia object
<col> to be held inside the iFrame.
Denotes a column inside a table.
srcdoc=””
Any HTML content to be displayed inside
Example the iFrame.
<table>
height=””
<colgroup>
Determines the height of the iFrame.
<col span="2">
<col>
width=” ”
</colgroup>
Determines the width of the iFrame.
<tr>
<th>Name</th>
<param />
<th>Major</th>
For iFrame customization. This includes
<th>GPA</th>
additional parameters to go along with
</tr>
the content.
<tr>
<td>Bob</td>
<embed> … </embed>
<td>Law</td>
This is used to embed external objects, like
<td>3.55</td>
plugins (e.g. a flash video).
</tr>
<tr>
<td>Alice</td>
<td>Medicine</td>
<td>3.61</td>
</tr>
</table>

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
the webpage. &#34; &quot; &#38; &amp;
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 Non-breaking space Trademark
always visible to the user. symbol - ™
&#169; &copy;
<dialog>…</dialog> Copyright symbol - ©
Used to create a dialog box.

www.hostinger.com

You might also like