Scribd
Upload
7 views

HTML Quick Overview

The document provides an overview of basic HTML tags for formatting text, links, lists, tables, and forms. It describes tags for headings, paragraphs, bold, italics, links, images, lists, tables, forms, and inputs.

Uploaded by

Betty JS
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

HTML Quick Overview

The document provides an overview of basic HTML tags for formatting text, links, lists, tables, and forms. It describes tags for headings, paragraphs, bold, italics, links, images, lists, tables, forms, and inputs.

Uploaded by

Betty JS
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

HTML Quick Overview

Basic Tags
<html> </html>
Creates an HTML document
<head> </head>
Sets off the title & other info that isn't displayed
<body> </body>
Sets off the visible portion of the document <title> </title>
Puts name of the document in the title bar; when bookmarking pages, this is what is bookmarked

Body attributes (only used in email newsletters)


<body bgcolor=?>
Sets background color, using name or hex value
<body text=?>
Sets text color, using name or hex value
<body link=?>
Sets color of links, using name or hex value
<body vlink=?>
Sets color of visited links, using name or hex value
<body alink=?>
Sets color of active links (while mouse-clicking)

Text Tags
<pre> </pre>
Creates preformatted text
<h1> </h1> --> <h6> </h6>
Creates headlines -- H1=largest, H6=smallest
<b> </b>
Creates bold text (should use <strong> instead)
<i> </i>
Creates italicized text (should use <em> instead)
<tt> </tt>
Creates typewriter-style text
<code> </code>
Used to define source code, usually monospace
<cite> </cite>
Creates a citation, usually processed in italics
<address> </address>
Creates address section, usually processed in italics
<em> </em>
Emphasizes a word (usually processed in italics)
<strong> </strong>
Emphasizes a word (usually processed in bold)
<font size=?> </font>
Sets size of font - 1 to 7 (should use CSS instead)
<font color=?> </font>
Sets font color (should use CSS instead)
<font face=?> </font>
Defines the font used (should use CSS instead)

Links
<a href="URL">clickable text</a>
Creates a hyperlink to a Uniform Resource Locator
<a href="mailto:EMAIL _ADDRESS">clickable text</a> Creates a hyperlink to an email address
<a name="NAME">
Creates a target location within a document
<a href="#NAME">clickable text</a> Creates a link to that target location
Formatting
<p> </p>
Creates a new paragraph
<br>
AInserts a line break (carriage return)
<blockquote> </blockquote>
Puts content in a quote - indents text from both sides
<div> </div>
Used to format block content with CSS
<span> </span>
Used to format inline content with CSS

Lists
<ul> </ul>
Creates an unordered list
<ol start=?> </ol>
Creates an ordered list (start=xx,
where xx is a counting number)
<li> </li>
Encompasses each list item
<dl> </dl>
Creates a definition list
<dt>
Precedes each defintion term
<dd>
Precedes each defintion

Graphical elements
<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of horizontal rule
<hr width=?>
Sets width of rule (as a % or absolute pixel length)
<hr noshade>
Creates a horizontal rule without a shadow
<img src="URL" />
Adds image; it is a separate file located at the URL
<img src="URL" align=?>
Aligns image left/right/center/bottom/top/middle (use CSS)
<img src="URL" border=?>
Sets size of border surrounding image (use CSS)
<img src="URL" height=?>
Sets height of image, in pixels
<img src="URL" width=?>
Sets width of image, in pixels
<img src="URL" alt=?>
Sets the alternate text for browsers that can't process images

Tables (use only for data layout - use CSS for page layout)

<table> </table>
Creates a table
<tr> </tr>
Sets off each row in a table
<td> </td>
Sets off each cell in a row
<th> </th>
Sets off the table header (a normal cell with bold, centered text)
Table attributes (only use for email newsletters)

<table border=?>
Sets the width of the border around table cells
<table cellspacing=?>
Sets amount of space between table cells <table cellpadding=?>
Sets amount of space between a cell's border and its contents
<table width=?>
Sets width of the table in pixels or as a percentage
<tr align=?>
Sets alignment for cells within the row (left/center/right)
<td align=?>
Sets alignment for cells (left/center/right)
<tr valign=?>
Sets vertical alignment for cells within the row (top/middle/bottom)
<td valign=?>
Sets vertical alignment for cell (top/middle/bottom)
<td rowspan=?>
Sets number of rows a cell should span (default=1)
<td colspan=?>
Sets number of columns a cell should span
<td nowrap>
Prevents lines within a cell from being broken to fit

HTML5 input tag attributes

<input type="email" name=?>

Sets a single-line textbox for email addresses


<input type="url" name=?>

Sets a single-line textbox for URLs


<input type="number" name=?>

Sets a single-line textbox for a number

<input type="range" name=?>

Sets a single-line text box for a range of numbers

<input type="date/month/week/time" name=?>

Sets a single-line text box with a calendar

showing the date/month/week/time

<input type="search" name=?>

Sets a single-line text box for searching

<input type="color" name=?>


Sets a single-line text box for picking a color
Forms

<form> </form>
Defines a form
<select multiple name=? size=?> </select>
Creates a scrolling menu. Size sets the number of
menu items visible before user needs to scroll.
<select name=?> </select>
Creates a pulldown menu
<option>
Sets off each menu item
<textarea name=? cols="x" rows="y"></textarea>
Creates a text box area. Columns set the width;
rows set the height.
<input type="checkbox" name=? value=?>
Creates a checkbox.
<input type="checkbox" name=? value=? checked>
Creates a checkbox which is pre-checked.
<input type="radio" name=? value=?>
Creates a radio button.

<input type="radio" name=? value=? checked>


Creates a radio button which is pre-checked.
<input type="text" name=? size=?>
Creates a one-line text area. Size sets length, in
characters.

<input type="submit" value=?>


Creates a submit button. Value sets the text in the
submit button.
<input type="image" name=? src=? border=?
alt=?> Creates a submit button using an image.
<input type="reset">
Creates a reset button
Comprehensive HTML Tags List

Tag Description

<!--...--> Specifies a comment

<!DOCTYPE> Specifies the document type

<a> Specifies an anchor

<abbr> Specifies an abbreviation

<acronym> Deprecated:Specifies an acronym

<address> Specifies an address element

<applet> Deprecated: Specifies an applet

<area> Specifies an area inside an image map

<article> New Tag: Specifies an independent piece of content of a


document, such as a blog entry or newspaper article

<aside> New Tag:Specifies a piece of content that is only slightly


related to the rest of the page.

<audio> New Tag:Specifies an audio file.

<base> Specifies a base URL for all the links in a page

<basefont> Deprecated: Specifies a base font


<bdo> Specifies the direction of text display

<bgsound> Specifies the background music

<blink> Specifies a text which blinks

<blockquote> Specifies a long quotation

<body> Specifies the body element

<br> Inserts a single line break

<button> Specifies a push button

<canvas> New Tag:This is used for rendering dynamic bitmap


graphics on the fly, such as graphs or games.

<caption> Specifies a table caption

<center> Deprecated: Specifies centered text

<col> Specifies attributes for table columns

<colgroup> Specifies groups of table columns

<command> New Tag:Specifies a command the user can invoke.

<comment> Puts a comment in the document

<datalist> New Tag:Together with the a new list attribute for input can
be used to make comboboxes

<dd> Specifies a definition description


<del> Specifies deleted text

<details> New Tag:Specifies additional information or controls which


the user can obtain on demand.

<dir> Deprecated: Specifies a directory list

<div> Specifies a section in a document

<dl> Specifies a definition list

<dt> Specifies a definition term

<embed> New Tag:Defines external interactive content or plugin.

<fieldset> Specifies a fieldset

<figure> New Tag:Specifies a piece of self-contained flow content,


typically referenced as a single unit from the main flow of
the document.

<b> Specifies bold text

<big> Deprecated:Specifies big text

<i> Specifies italic text

<small> Specifies small text

<tt> Deprecated:Specifies teletype text

<font> Deprecated: Specifies text font, size, and color


<footer> New Tag:Specifies a footer for a section and can contain
information about the author, copyright information, et
cetera.

<form> Specifies a form

<frame> Deprecated:Specifies a sub window (a frame)

<frameset> Deprecated:Specifies a set of frames

<head> Specifies information about the document

<header> New Tag:Specifies a group of introductory or navigational


aids.

<hgroup> New Tag:Specifies the header of a section.

<h1> to <h6> Specifies header 1 to header 6

<hr> Specifies a horizontal rule

<html> Specifies an html document

<isindex> Deprecated: Specifies a single-line input field

<iframe> Specifies an inline sub window (frame)

<ilayer> Specifies an inline layer

<img> Specifies an image

<input> Specifies an input field


<ins> Specifies inserted text

<keygen> New Tag:Specifies control for key pair generation.

<keygen> Generate key information in a form

<label> Specifies a label for a form control

<layer> Specifies a layer

<legend> Specifies a title in a fieldset

<li> Specifies a list item

<link> Specifies a resource reference

<map> Specifies an image map

<mark> New Tag:Specifies a run of text in one document marked


or highlighted for reference purposes, due to its relevance
in another context.

<marquee> Create a scrolling-text marquee

<menu> Deprecated: Specifies a menu list

<meta> Specifies meta information

<meter> New Tag:Specifies a measurement, such as disk usage.

<multicol> Specifies a multicolumn text flow


<nav> New Tag:Specifies a section of the document intended for
navigation.

<nobr> No breaks allowed in the enclosed text

<noembed> Specifies content to be presented by browsers that do not


support the <embed>tag

<noframes> Deprecated:Specifies a noframe section

<noscript> Specifies a noscript section

<object> Specifies an embedded object

<ol> Specifies an ordered list

<optgroup> Specifies an option group

<option> Specifies an option in a drop-down list

<output> New Tag:Specifies some type of output, such as from a


calculation done through scripting.

<p> Specifies a paragraph

<param> Specifies a parameter for an object

<cite> Specifies a citation

<code> Specifies computer code text

<dfn> Specifies a definition term


<em> Specifies emphasized text

<kbd> Specifies keyboard text

<samp> Specifies sample computer code

<strong> Specifies strong text

<var> Specifies a variable

<plaintext> Deprecated: Render the raminder of the document as


preformatted plain text

<pre> Specifies preformatted text

<progress> New Tag:Specifies a completion of a task, such as


downloading or when performing a series of expensive
operations.

<q> Specifies a short quotation

<ruby> New Tag:Together with <rt> and <rp> allow for marking up
ruby annotations.

<script> Specifies a script

<section> New Tag:Represents a generic document or application


section.

<select> Specifies a selectable list

<spacer> Specifies a white space

<span> Specifies a section in a document


<s> Deprecated: Specifies strikethrough text

<strike> Deprecated: Specifies strikethrough text

<style> Specifies a style definition

<sub> Specifies subscripted text

<sup> Specifies superscripted text

<table> Specifies a table

<tbody> Specifies a table body

<td> Specifies a table cell

<textarea> Specifies a text area

<tfoot> Specifies a table footer

<th> Specifies a table header

<thead> Specifies a table header

<time> New Tag:Specifies a date and/or time.

<title> Specifies the document title

<tr> Specifies a table row

<u> Deprecated: Specifies underlined text


<ul> Specifies an unordered list

<video> New Tag:Specifies a video file.

<wbr> New Tag:Specifies a line break opportunity.

<wbr> Indicate a potential word break point within a <nobr>


section

<xmp> Deprecated: Specifies preformatted text

Deprecated Tags
The following elements are not available in HTML5 anymore and their function is
better handled by CSS −

Tags (Elements) Description

<acronym> Defines an acronym

<applet> Defines an applet

<basefont> Defines an base font for the page.

<big> Defines big text

<center> Defines centered text

<dir> Defines a directory list

<font> Defines text font, size, and color


<frame> Defines a frame

<frameset> Defines a set of frames

<isindex> Defines a single-line input field

<noframes> Defines a noframe section

<s> Defines strikethrough text

<strike> Defines strikethrough text

<tt> Defines teletype text

<u> Defines underlined text

<article> Represents an independent piece of content of a


document, such as a blog entry or newspaper article

<aside > Represents a piece of content that is only slightly related to


the rest of the page.

<audio> Defines an audio file.

<canvas> This is used for rendering dynamic bitmap graphics on the


fly, such as graphs or games.

<command> Represents a command the user can invoke.

<datalist> Together with the a new list attribute for input can be used
to make comboboxes

<details> Represents additional information or controls which the


user can obtain on demand
<embed> Defines external interactive content or plugin.

<figure> Represents a piece of self-contained flow content, typically


referenced as a single unit from the main flow of the
document.

<footer> Represents a footer for a section and can contain


information about the author, copyright information, et
cetera.

<header> Represents a group of introductory or navigational aids.

<hgroup> Represents the header of a section.

<keygen> Represents control for key pair generation.

<mark> Represents a run of text in one document marked or


highlighted for reference purposes, due to its relevance in
another context.

<meter> Represents a measurement, such as disk usage.

<nav> Represents a section of the document intended for


navigation.

<output> Represents some type of output, such as from a calculation


done through scripting.

<progress> Represents a completion of a task, such as downloading or


when performing a series of expensive operations.

<ruby> Together with <rt> and <rp> allow for marking up ruby
annotations.

<section> Represents a generic document or application section


<time> Represents a date and/or time.

<video> Defines a video file.

<wbr> Represents a line break opportunity.

New types for <input> tag


The input element's type attribute now has the following new values −

Type Description

color Color selector, which could be represented by a wheel or


swatch picker

date Selector for calendar date

datetime-local Date and time display, with no setting or indication for time
zones

datetime Full date and time display, including a time zone.

email Input type should be an email.

month Selector for a month within a given year

number A field containing a numeric value only

range Numeric selector within a range of values, typically


visualized as a slider

search Term to supply to a search engine. For example, the


search bar atop a browser.
tel Input type should be telephone number.

time Time indicator and selector, with no time zone information

url Input type should be URL type.

week Selector for a week within a given year

You might also like