appendix html5 reference -...

A P P E N D I X AHTML5 Reference

This appendix provides the following information:

Alphabetical HTML5 reference

Obsolete elements

Global attributes

Event attributes

Numeric and character entities

9781133086642, Principles of Web Design, Fifth Edition, Sklar - © Cengage Learning. All rights reserved. No distribution allowed without express authorization.

Th is appendix includes element descriptions sorted alphabetically. Th e elements listed in this appendix are the ones you will use most often, including a list of the global attributes allowed with the majority of HTML5 elements and a complete list of character entities. Some elements are obsolete in HTML5 but are still in common use in many Web sites. If you are creating HTML5-compliant Web pages, you should not use these obsolete elements. For more detailed information, visit the World Wide Web Consortium Web site at www.w3.org.

Th e HTML5 draft specifi cation was published as a First Public Working Draft on January 23, 2008 and several updated Working Drafts of the specifi cation have subsequently been published by the W3C HTML5 working group. Information about HTML5 elements may continue to change as the draft evolves until it becomes a complete W3C recommendation.

Alphabetical HTML5 ReferenceAll elements support the global and event attributes described in Tables A-3 and A-4. Table A-2 contains a list of the obsolete elements.

For more information on HTML5 elements, see: W3C Working

Draft 9 November 2010 www.w3.org/TR/html-markup

Element New in HTML5

Description Attributes



Insert a comment in your code

Browsers do not display

comments in the Web page

Place the comment within the

tag, for example:



None

<a> Create a clickable hypertext

anchor in a document; can be

text or an image

Global attributes plus:

href Target destination of the hyperlink

name Name of a fragment of the

document

target Window or frame in which the linked

document is displayed

hrefl ang Language of the destination of

the hyperlink

rel Defi nes the relationship between the

document and the destination

media Valid media-query type

type MIME type

Table A-1 Common HTML5 Elements (continues)

594

A P P E N D I X A HTML5 Reference



<abbr> Abbreviation or acronym Global attributes

<address> Contact information Global attributes

<area> Clickable area in an image

map


alt Specify an alternate string of text if the

image cannot be displayed by the browser

href Target destination of the hyperlink

hrefl ang Language of the destination of

the hyperlink

target Window or frame in which the linked

document is displayed

rel Defi nes the relationship between the

document and the destination


type MIME type

shape Determines the shape of the

clickable area, circle or poly and

coordinates

<article> √ A section of content that

forms an independent part of

a document or Web site

Global attributes

<aside> √ Content that is tangentially

related to the main content

Global attributes

<audio> √ Contains an audio stream src URL of the radio stream content

autoplay When set to autoplay, the video

starts playing as soon as possible

preload Indicates whether preloading is

necessary

controls When set to controls, displays

playback controls

loop When set to loop, the video plays

repeatedly


(continued)

595

Alphabetical HTML5 Reference




<b> Boldface text

This element is redefi ned

in HTML5 to have semantic

meaning: “Bold text is offset

from its surrounding content

without conveying any extra

emphasis or importance, and

for which the conventional

typographic presentation is

bold text”

Global attributes

<base> Sets the base URL or target

for a page

This is an empty element


href Absolute or relative original URL for

the current document

target Default window or frame in which links

contained in the document are displayed

<blockquote> Indents text on both the left

and right margins

<body> Identifi es the body section of

the Web page

<br > Inserts a line break, forcing

text to the next line


<button> Creates a button outside of a

form


type Values are button, reset, or submit

name Name for the button

value Initial value for the button; this can

be changed by a script

disabled When value is disabled, the

button is not displayed

form Value of the id attribute associated

with the form

canvas √ Used with scripting

applications to dynamically

render graphics, animations,

or other visual images


height Height of the canvas, in pixels

width Width of the canvas, in pixels

<caption> Indicates that the text appears

as the caption of a table

Global attributes


(continued)

596





<cite> Title of a cited work Global attributes

<code> Fragment of computer code Global attributes

<col> One or more columns in

a column group within the

<colgroup> element



span Number of columns spanned

<colgroup> Group of columns within a

table


span Number of columns spanned

<command> √ Defi nes a command button

within a <menu> element



type Command, checkbox, or radio

<datalist> √ Defi nes a list of option values

for a form input element

The results of this element are

not displayed in the browser

window

Global attributes

<dd> Defi nition for a term within a

defi nition list <dl> element

Global attributes

<del> Text that has been deleted

from a document

Global attributes

<details> √ Represents a control from

which a user can request

more information


open Specifi es the contents should be

shown to the user, value is open or null

<div> Indicates a division within the

document

Global attributes

<dt> Term or name within a

defi nition list <dl> element

<em> Emphasizes text, usually as

italic; browser determines the

text style

Global attributes

<embed> √ Contains content from an

external source


src Address of the content being embedded

type MIME type of the embedded content

height Height of the embedded content,

in pixels

width Width of the embedded content, in

pixels


(continued)

597





<fi eldset> Container for form controls

grouped under a heading

Global attributes

<fi gcaption> √ Caption or legend for a fi gure Global attributes

<fi gure> √ Self-contained set of graphical

or related content

Global attributes

<footer> √ Contains footer content Global attributes

<form> Contains user-submittable

form

action URL of the application that

processes the form data; this URL points

to a script fi le or a e-mail address

enctype Content type used to submit the

form to the server (when the value of the

method is “post”); most forms do not

need this attribute

method Specifi es the HTTP method used to

submit the form data; the default value is get

• get Form data is appended to the URL

specifi ed in the action attribute

• post Form data is sent to the server as

a separate message

accept Comma-separated list of content

types that a server processing this form

can handle correctly; most forms do not

need this attribute

accept-charset List of allowed character

sets for input data that is accepted by the

server processing this form; most forms

do not need this attribute

name Name of this form for data processing

<h1> to <h6> Defi nes headings for six

levels of content

Global attributes

<head> Identifi es the head section

of the Web page, which

is re served for metadata

(information about the

document)

Global attributes

<header> √ Header of a section Global attributes


(continued)

598





<hgroup> √ Group of headings <h1>

through <h6>

Global attributes

<hr> Inserts a horizontal rule on

the page indicating thematic

break in the content


Global attributes

<html> Root element of an HTML fi le Global attributes

<i> Italicize text

This element is redefi ned

in HTML5 to have semantic

meaning: “Italic text is offset

from its surrounding content

without conveying any extra

emphasis or importance, and

for which the conventional

typographic presentation is

italic text”

Global attributes

<iframe> Creates an inline frame that

contains a new content page


src Address of a page that the nested

frame contains

name Content name

width Width of the iframe, in pixels

height Height of the iframe, in pixels

<img> Inserts an image into a Web

page



width Width of the image, in pixels

height Height of the image, in pixels

src URL that points to the image fi le; this

attribute is required

alt Specify an alternate string of text if the

image cannot be displayed by the browser

<input> Used in a <form> element

to create a variety of input

controls


text Text entry fi eld where the user entry is

masked by asterisks

checkbox Provides on/off toggles that the

user selects


(continued)

599





radio Lets a user choose one value from a

range of values

submit Sends the form data to the server

reset Clears the form of any user-entered

data and returns it to its original state

hidden Adds a control that is not displayed

in the browser

image Adds a graphic button to the form,

rather than the default button

button Creates a button that has no

default behavior

file Lets the user select a fi le that is

submitted with the form

datetime Global date and time

datetime-local Local date and time

date Calendar date

month Calendar month

time Time value

week Calendar week

number Number value

range Range of values

email Email address

url URL value

search Search term

tel Telephone number

color Color name

<ins> Text that has been added to a

document


cite URL of a text citation for the

document

datetime Date and time when the text was

added

<kbd> Represents user input Global attributes


(continued)

600





<keygen> √ Defi nes a key for secure

communications


challenge Challenge text string that is

submitted along with the key

keytype Type of key, such as rsa

autofocus Focuses on the textarea when

the page loads

name Name of this element for form

processing


with the form


textarea is not displayed

<label> Caption for a form control Global attributes plus:

for Reference the id of a form control to

associate the label


with the form

<legend> A title or explanatory caption for

the parent element’s content

Global attributes

<li> Marks an individual list item

This is an empty tag

Global attributes

<link> Defi nes a relationship between

the document and external

resources, such as a style

sheet


type Type of external resource

href URL of the external resource

rel Describes the relationship between

the current document and the anchor

specifi ed by the href attribute

hrefl ang Language of the destination link


<map> Defi nes an image map Global attributes plus:

name Name for the map

<mark> Text marked or highlighted for

reference purposes

Global attributes

<menu> Redefi ned in HTML5 to defi ne

a menu


type Type of menu to display; values are

context, toolbar, or list, list is the default


(continued)

601





<p> Marks the beginning of a new

block of text

Global attributes

<param> Defi nes parameters for plug-

ins in <object> elements


name Name of the parameter

value Value of the parameter

<pre> Preserves the formatting and

spacing of text as typed in the

source code; displays the text

in a monospace font, different

from the standard browser text

Global attributes

<progress> √ Indicates the completion

progress of a task

Used with a scripting language


max Total value at completion.

value How much of the task has been

completed

<q> Quoted text from another

source


cite Contains the address of the source of

the quoted text

<rp> √ Inserts ruby parentheses to

hide ruby text <rt> content

from browsers that do not

support the <ruby> element

Global attributes

<rt> √ Marks ruby text Global attributes

<ruby> √ Marks spans of content as

ruby annotations

Ruby text is used to provide

a short annotation of the

associated base text

Ruby annotations are used

frequently in Japan in many

kinds of publications, including

books and magazines

Ruby is also used in China,

especially in schoolbooks

Global attributes

<samp> Sample computer code Global attributes


(continued)

603





<sub> Subscripted text Global attributes

<summary> Summary, caption, or legend

for a <details> element

Global attributes

<sup> Superscripted text Global attributes

<table> Marks the beginning and end

of a table


summary Description of the table

<tbody> Block of rows in a table that

contains the body content

Global attributes

<td> Marks a data cell in a table Global attributes plus:

colspan Number of adjacent columns

spanned by the <td> element

rowspan Number of following rows

spanned by the <td> element

<textarea> Form control that lets users

enter multiple lines of text

content


autofocus Focuses on the textarea when

the page loads

cols Number of characters visible

horizontally



form ID value defi nes the form the

textarea belongs

maxlength Defi nes the maximum number

of characters

required Element is a required part of the

form submission

placeholder Short text hint to aid the user

when entering data

rows Number of lines of text to display

wrap When set to hard, the text wraps

based on the cols value

<tfoot> Block of rows in a table that

contains the footer content

Global attributes

<th> Forces the contents of a cell to be

displayed as bold and centered

Global attributes


(continued)

605





<thead> Block of rows in a table that

contains the header content

Global attributes

<time> √ Contains a date or time value Global attributes plus:

datetime Specifi es the date or time the

element represents

pubdate Indicates that the date or time

given is a publication date or time

<title> Specifi es the title of the Web

page; title text appears in the

browser title bar and as the

bookmark or favorites text

Global attributes

<tr> Marks a row of cells in a table Global attributes

<tt> Specifi es monospace text,

usually Courier

Global attributes

<ul> Creates a bulleted indented list Global attributes

<var> Variable in a mathematical

expression

<video> √ Video or movie content Global attributes plus:

autoplay When set to autoplay, the video

starts playing as soon as possible

preload Indicates whether preloading is

necessary.

controls When set to controls, displays

playback controls

loop When set to loop, the video plays

repeatedly

poster URL for an image displayrf when

the video is loading

height Height of the video, in pixels

width Width of the video, in pixels

<wbr> √ Represents an approved line-

break location

Global attributes

Table A-1 Common HTML5 Elements

(continued)

606



Obsolete ElementsTable A-2 lists the elements that are no longer supported in HTML5.

Element HTML5 Replacement

<acronym> <abbr>

<applet> <object>

<basefont> Use CSS

<big> Use CSS

<center> Use CSS

<dir> <ul>

<font> Use CSS

<frame> No replacement

<frameset> No replacement

<noframes> No replacement

<s> Use CSS

<strike> Use CSS

<tt> Use CSS

<u> Use CSS

<xmp> <pre>

Table A-2 Obsolete Elements

Global AttributesTable A-3 lists the global attributes, which are allowed within all of the elements listed in the element tables.

Attribute New in HTML5 Defi nition

accesskey Key label or list of key labels with which to

associate the element; each key label represents

a keyboard shortcut which browsers can use to

activate the element or give focus to the element

class Specifi es a class name for an element; the class

name can be used to specify style sheet rules

contenteditable √ Specifi es whether the contents of the element are

editable

Values are true, false, or empty

Table A-3 HTML5 Global Attributes (continues)

607

Global Attributes


Attribute New in HTML5 Defi nition

contextmenu √ Use with the <menu> element to indicate that the

element is part of a context menu

dir Specifi es the element’s text directionality

Values are ltr, (left to right) or rtl (right to left)

draggable √ Specifi es whether the element is draggable

Values are true or false

hidden √ Specifi es that the element represents an element

that is not yet, or is no longer, relevant

id Specifi es a document-wide unique identifi er for an

element

Multiple elements in the document cannot have the

same id value

lang Specifi es the primary language for the contents of

the element and for any of the element’s attributes

that contain text

spellcheck √ Specifi es whether the element represents an

element whose contents are subject to spell

checking and grammar checking

Values are true, false, or empty

style Specifi es a style sheet rule for the element

tabindex Specifi es whether the element represents an

element that is focusable (that is, an element which

is part of the sequence of focusable elements

in the document), and the relative order of the

element in the sequence of focusable elements in

the document

title Specifi es a title for the element; the content of the

title is displayed in the browser as a pop-up window

or tooltip

Table A-3 HTML5 Global Attributes

(continued)

608



Event AttributesTable A-4 lists the event attributes, which are used with a scripting language to trigger events.

Attribute Script is Triggered

onafterprintNew After the document is printed

onbeforeonloadNew Before the document loads

onbeforeprintNew Before the document is printed

onblur When the window loses focus

onerrorNew When an error occurs

onfocus When the window gets focus

onhaschangeNew When the document has change

onload When the document loads

onmessageNew When the message is triggered

onoffl ineNew When the document goes offl ine

ononlineNew When the document comes online

onpagehideNew When the window is hidden

onpageshowNew When the window becomes visible

onpopstateNew When the window’s history changes

onredoNew When the document performs a redo

onresizeNew When the window is resized

onstorageNew When a document loads

onundoNew When a document performs an undo

onunloadNew When the user leaves the document

Table A-4 HTML5 Event Attributes

Numeric and Character EntitiesTable A-5 lists the event attributes, which are used with a scripting language to trigger events.

Character Character Entity Numeric Entity Description

“ { " Quotation mark

# # Number sign

$ $ Dollar sign

% % Percent sign

& & & Ampersand

Table A-5 Numeric and Character Entities (continues)

609

Numeric and Character Entities



‘ ' Apostrophe

( ( Left parenthesis

) ) Right parenthesis

* * Asterisk

+ + Plus sign

, , Comma

- - Hyphen

. . Period (full stop)

/ / Solidus (slash)

0 0 Digit 0

1 1 Digit 1

2 2 Digit 2

3 3 Digit 3

4 4 Digit 4

5 5 Digit 5

6 6 Digit 6

7 7 Digit 7

8 8 Digit 8

9 9 Digit 9

: : Colon

; ; Semicolon

< < < Less than sign

= Equals sign

> > > Greater than sign

? ? Question mark

@ @ Commercial at

A Z A - Z Uppercase letters A Z

[ [ Left square bracket

\ \ Reverse solidus (backslash)

] ] Right square bracket

ˆ ^ Caret

_ _ Horizontal bar (underscore)

` ` Grave accent

a z a - &#122 Lowercase letters a z


(continued)

610




{ { Left curly brace

| | Vertical bar

} } Right curly brace

˜ ~ Tilde

Nonbreaking space

¡ ¡ ¡ Inverted exclamation mark

¢ ¢ ¢ Cent sign

£ £ £ British Pound sign

$ ¤ ¤ Currency sign

¥ ¥ ¥ Yen sign

|| ¦ ¦ Broken vertical bar

§ § § Section sign

¨ ¨ ¨ Spacing diaeresis

© © © Copyright sign

a ª ª Feminine ordinal indicator

« « « Left-pointing double angle quotation

mark

¬ ¬ ¬ Not sign

_ Soft hyphen

® ® ® Registered trademark sign

¯ ¯ ¯ Macron overline

° ° ° Degree sign

± ± ± Plus-or-minus sign

2 ² ² Superscript digit 2

3 ³ ³ Superscript digit 3

´ ´ ´ Acute accent

μ µ µ Micron sign

¶ ¶ ¶ Paragraph sign

· · · Middle dot

¸ ¸ ¸ Cedilla

1 ¹ ¹ Superscript digit 1

o º º Masculine ordinal indicator

» » » Right-pointing double angle quotation mark

¼ ¼ ¼ Fraction one-quarter

½ ½ ½ Fraction one-half


(continued)

611




¾ ¾ ¾ Fraction three-quarters

¿ ¿ ¿ Inverted question mark

À À À Capital letter A with grave

Á Á Á Capital letter A with acute

Â Â Â Capital letter A with circumfl ex

Ã Ã Ã Capital letter A with tilde

Ä Ä Ä Capital letter A with diaeresis

Å Å Å Capital letter A with ring above

Æ Æ &Aelig; Capital letter AE

Ç Ç Ç Capital letter C with cedilla

È È È Capital letter E with grave

É É É Capital letter E with acute

Ê Ê Ê Capital letter E with circumfl ex

Ë Ë Ë Capital letter E with diaeresis

Ì Ì Ì Capital letter I with grave

Í Í Í Capital letter I with acute

Î Î Î Capital letter I with circumfl ex

Ï Ï Ï Capital letter I with diaeresis

D Ð Ð Capital letter ETH

Ñ Ñ Ñ Capital letter N with tilde

Ò Ò Ò Capital letter O with grave

Ó Ó Ó Capital letter O with acute

Ô Ô Ô Capital letter O with circumfl ex

Õ Õ Õ Capital letter O with tilde

Ö Ö Ö Capital letter O with diaeresis

x × × Multiplication sign

Ø Ø Ø Capital letter O with stroke

Ù Ù Ù Capital letter U with grave

Ú Ú Ú Capital letter U with acute

Û Û Û Capital letter U with circumfl ex

Ü Ü Ü Capital letter U with diaeresis

Ý Ý Ý Capital letter Y with acute

P Þ Þ Capital letter THORN

ß ß ß Sz ligature


(continued)

612




à à à Small letter a with grave

á á á Small letter a with acute

â â â Small letter a with circumfl ex

ã ã ã Small letter a with tilde

ä ä ä Small letter a with diaeresis

å å å Small letter a with ring above

æ æ æ Small letter ae

ç ç ç Small letter c with cedilla

è è è Small letter e with grave

é é é Small letter e with acute

ê ê ê Small letter e with circumfl ex

ë ë ë Small letter e with diaeresis

ì ì ì Small letter i with grave

í í í Small letter i with acute

î î î Small letter i with circumfl ex

ï ï ï Small letter i with diaeresis

d ð ð Small letter eth

ñ ñ ñ Small letter n with tilde

ò ò ò Small letter o with grave

ó ó ó Small letter o with acute

ô ô ô Small letter o with circumfl ex

õ õ õ Small letter o with tilde

ö ö ö Small letter o with diaeresis

÷ ÷ ÷ Division sign

o/ ø ø Small letter o with stroke

ù ù ù Small letter u with grave

ú ú ú Small letter u with acute

û û û Small letter u with circumfl ex

ü ü ü Small letter u with diaeresis

ý ý ý Small letter y with acute

þ þ þ Small letter thorn

ÿ ÿ ÿ Small letter y with diaeresis

Table A-5 Numeric and Character Entities

(continued)

613



appendix html5 reference -...

Documents