Scribd
Upload
13 views9 pages

Wa0007.

This document is a Quick Reference Guide for HTML5, detailing various HTML tags, their purposes, and associated attributes. It includes information on the validity of tags across different HTML versions and categorizes them by functionality, such as links, lists, and multimedia elements. The guide serves as a concise resource for developers to understand and implement HTML5 elements effectively.

Uploaded by

aman.sharma.sot2428
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
13 views9 pages

Wa0007.

This document is a Quick Reference Guide for HTML5, detailing various HTML tags, their purposes, and associated attributes. It includes information on the validity of tags across different HTML versions and categorizes them by functionality, such as links, lists, and multimedia elements. The guide serves as a concise resource for developers to understand and implement HTML5 elements effectively.

Uploaded by

aman.sharma.sot2428
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/ 9

Page 1 of 4 Quick Reference Guide FREE

HTML 5
Tag Info V Attributes* Tag Info V Attributes* Tag Info V Attributes*

<!-- --> comment 4/5 none <embed> external inter- 5 height | src | type | <ol> ordered list 4/5 start | reversed
active content width
<!DOCTYPE> document type 4/5 none or plugin <optgroup> option group 4/5 disabled | label

<a> hyperlink 4/5 href | hreflang | media | <fieldset> fieldset 4/5 disabled | form | name <option> option in a 4/5 disabled | label |
ping | rel | target | type drop-down list selected | value
<figure> group of media 5 global attributes**
<abbr> abbreviation 4/5 global attributes** content, and <output> some types of 5 form
their caption output
<acronym> acronym 4 -
<font> text font, size, 4 - <p> paragraph 4/5 global attributes**
<address> address ele- 4/5 global attributes** and color
<param> parameter for 4/5 name | value
ment
<footer> footer for a 5 global attributes** an object
<applet> applet 4 - section or page
<pre> preformatted 4/5 global attributes**
<area> area inside an 4/5 alt | coords | href | text
<form> form 4/5 action | data | replace |
image map hreflang | media | ping | accept | accept-charset
<progress> progress of a 5 max | value
rel | shape | target | | enctype | method |
task of any kind
type target
<q> short quotation 4/5 cite
<article> article 5 global attributes** <frame> sub window 4 -
<ruby> ruby annota- 5 global attributes**
<aside> outside the 5 global attributes** <frameset> set of frames 4 - tions
main flow of
the narrative <h1> to <h6> header 1 to 4/5 global attributes** <rp> provide paren- 5 global attributes**
header 6 theses around a
<audio> sound content 5 autobuffer | autoplay | ruby text
controls | loop | src <head> information 4/5 none
about the <rt> ruby text 5 global attributes**
<b> bold text 4/5 global attributes** document component
<base> base URL for all 4/5 href | target <header> header for a 5 global attributes** <s> strikethrough 4 -
the page links section or page text
<basefont> Base font for 4 - <hgroup> heading section 5 global attributes** <samp> sample com- 4/5 global attributes**
the document puter code
<hr> horizontal rule 4/5 global attributes**
<bb> invoked user 5 type <script> script 4/5 async | type | defer |
agent com- <html> html document 4/5 manifest src | charset

<i> italic text 4/5 global attributes** <section> section 5 cite


<bdo> direction of text 4/5 dir
display <iframe> inline sub 4/5 src | name | sandbox | <select> selectable list 4/5 autofocus | data |
window (frame) seamless | width | disabled | form |
<big> big text 4 - height multiple | name

<blockquote> long quotation 4/5 cite <img> image 4/5 alt | src | height | <small> small text 4/5 global attributes**
ismap | usemap | width
<body> body element 4/5 global attributes** <source> media re- 5 media | src | type
<input> input field 4/5 accept | alt | auto- sources
<br> inserts a single 4/5 global attributes** complete | autofocus |
line break checked | disabled | <span> inline section 4/5 global attributes**
form | formaction |
<button> push button 4/5 autofocus | disabled | formenctype | formme- <strike> strikethrough 4 -
form | formaction | thod | formnovalidate | text
formenctype | formme- formtarget | height |
thod | formnovalidate | list | max | maxlength | <strong> strong text 4/5 global attributes**
formtarget | name | min | multiple | name |
type | value pattern | placeholder | <style> style definition 4/5 media | type | scoped
readonly | required |
<canvas> Graphic area 5 height | width size | src | step | type | <sub> subscripted text 4/5 global attributes**
value | width
<caption> table caption 4/5 global attributes** <sup> superscripted 4/5 global attributes**
text
<ins> inserted text 4/5 cite | datetime
<center> centered text 4 -
<table> table 4/5 global attributes**
<isindex> single-line input 4 -
<cite> citation 4/5 global attributes**
field <tbody> table body 4/5 global attributes**
<code> computer code 4/5 global attributes**
<kbd> keyboard text 4/5 global attributes** <td> table cell 4/5 colspan | rowspan |
text
headers
<col> attributes for 4/5 span
<label> label for a form 4/5 for <textarea> text area 4/5 autofocus | cols |
table columns
control disabled | form | name
<colgroup> groups of table 4/5 span | readonly | required |
<legend> fieldset title 4/5 global attributes** rows | maxlength |
columns
placeholder | wrap
<command> command 5 checked | default | <li> list item 4/5 value
button disabled | hidden | icon <tfoot> table footer 4/5 global attributes**
| label | radiogroup | <link> resource 4/5 href | rel | media |
type reference hreflang | type | sizes <th> table header 4/5 colspan | rowspan |
scope
<datagrid> data in a tree, 5 disabled <mark> marked text 5 global attributes**
list or tabular <thead> table header 4/5 global attributes**
<map> image map 4/5 id
<datalist> dropdown list 5 global attributes** <time> date/time 5 datetime
<menu> menu list 4/5 label | type
definition <title> document title 4/5 none
<dd> 4/5 global attributes**
description
<meta> meta informa- 4/5 charset | content | http- <tr> table row 4/5 global attributes**
<del> deleted text 4/5 cite | datetime tion equiv | name
<tt> teletype text 4 -
<details> details of an 5 open <meter> measurement 5 high | low | max | min |
within a prede- optimum | value <u> underlined text 4 -
element
fined range
<ul> unordered list 4/5 global attributes**
<dialog> dialog 5 global attributes**
(conversation) <nav> navigation links 5 global attributes**
<var> variable 4/5 global attributes**
<dir> directory list 4 - <noframes> noframe section 4 - <video> video 5 src | poster | autobuffer
| autoplay | loop |
<div> section in a 4/5 global attributes** <noscript> noscript section 4/5 none controls | width | height
document
<object> embedded 4/5 data | height | type | <xmp> preformatted 4 -
<dfn> definition term 4/5 title object usemap | width | object text

<dl> definition list 4/5 global attributes**


* Attributes: Lists attributes specific to that tag. Deprecated (html4
<dt> definition term 4/5 global attributes**
only) attributes are not listed
<em> emphasized 4/5 global attributes** ** Global Attributes: class | contenteditable | contextmenu | dir |
text draggable | id | irrelevant | lang | ref | registrationmark | tabindex |
template | title V = Which version of HTML is this tag valid for

http://www.veign.com Part Number: QRG0009 ©2009 Veign, All Rights Reserved


Page 2 of 4 Quick Reference Guide FREE

HTML 5 - extended
Tag Info Attributes Tag Info Attributes
<!-- --> comment: comments are <button> button: a button page element autofocus: indicate that a control is to be focused
displayed in code only. Tag as soon as the page is loaded [autofocus]
none
contents are not rendered in disabled: prevents the button from being pressed
the browser [disabled]
form: used to explicitly associate the button ele-
<!DOCTYPE> document type: defines ment with its form owner
which specification the docu- none formaction: URL that specifies a form processing
ment follows agent
formenctype: specifies the content type used to
<a> anchor: used to provide a link href: destination resource of the hyperlink submit the form to the server [application/x-www-
to another web resource hreflang: gives the language of the linked resource form-urlencoded
media: describes for which media the target docu- | multipart/form-data | text/plain]
ment was designed formmethod: which HTTP method will be used to
ping: gives the URLs of the resources that are submit the forms data [get | post | put | delete]
interested in being notified if the user follows the formnovalidate: indicate whether the form is to be
hyperlink validated during submission [formnovalidate]
rel: relationship between the document containing formtarget: gives the target when the form is
the hyperlink and the destination resource [alternate submitted [_blank | _parent | _self | _top]
| archives | author | bookmark | contact | external | name: elements name
feed | first | help | icon | index | last | license | next type: controls the behavior of the button when it is
| nofollow | noreferrer | pingback | prefetch | prev | activated [submit | reset | button]
search | stylesheet | sidebar | tag | up] value: gives the element's value for the purposes of
target: gives the name of the browsing context that form submission
will be used [_blank | _parent | _self | _top]
type: gives the MIME type of the linked resource <canvas> canvas element: a resolution- height: height of the canvas in pixels - default is
dependent bitmap canvas, which 150
<abbr> abbreviation: an abbreviation global attributes** can be used for rendering width: width of the canvas in pixels - default is 300
or acronym, optionally with its graphs, game graphics, or other
expansion visual images on the fly

<address> address element: represents global attributes** <caption> table caption: the title of the global attributes**
the contact information for its table that is its parent, if it has a
nearest article or body element parent and that is a table ele-
ancestor ment.

<area> area: either a hyperlink with alt: alternate text for the area <cite> citation: represents the title of global attributes**
some text and a corresponding cords: coordinates for the clickable area a work
area on an image map, or a href: destination resource of the hyperlink
dead area on an image map hreflang: gives the language of the linked resource <code> computer code text: repre- global attributes**
media: describes for which media the target docu- sents a fragment of computer
ment was designed code. This could be an XML
ping: gives the URLs of the resources that are element name, a filename, a
interested in being notified if the user follows the computer program, or any other
hyperlink string that a computer would
rel: relationship between the document containing recognize.
the hyperlink and the destination resource [alternate
| archives | author | bookmark | contact | external | <col> column: defines the attribute span: number of columns the tag should span
feed | first | help | icon | index | last | license | next values for one or more columns
| nofollow | noreferrer | pingback | prefetch | prev | in a table. Used inside of a table
search | stylesheet | sidebar | tag | up] or colgroup
shape: defines the shape of the area [default | rect
| rectangle | circ | circle | poly | polygon] <colgroup> column group: a group of one span: number of columns the tag should span
target: gives the name of the browsing context that or more columns in the table
will be used [_blank | _parent | _self | _top] that is its parent, if it has a
type: gives the MIME type of the linked resource parent and that is a table ele-
ment
<article> article element: a section of global attributes**
a page that consists of a <command> command button: a command type: Specifies the type of command [checkbox |
composition that forms an that the user can invoke (like command | radio]
independent part of a docu- radio button or checkbox) label: gives the name of the command, as shown to
ment, page, or site the user
icon: a URL to a picture that represents the com-
<aside> aside element: a section of a global attributes** mand
page that consists of content disabled: prevents the command from being
that is tangentially related to executed [disabled]
the content around the aside checked: Determines if the command is checked by
element, and which could be default [checked]
considered separate from that radiogroup: gives the name of the group of com-
content mands that will be toggled when the command itself
is toggled
<audio> sound content: represents a autobuffer: determines if the audio will be buffered title: gives a hint describing the command, which
sound or audio stream [autobuffer] might be shown to the user to help them
autoplay: determine if the audio will automatically
play [autoplay] <datagrid> datagrid element: an interac- disabled: defines whether the list is selectable
controls: indicates that the author has not provided tive representation of tree, list, [disabled]
a scripted controller and would like the user agent to
provide its own set of controls [controls]
loop: sets whether the audio will start once the end <datalist> dropdown list: a set of option global attributes**
is reached [loop] elements that represent prede-
src: URL of the audio to play fined options for other controls

<b> bold text: creates text that global attributes** <dd> definition description: descrip- global attributes**
will be made bold tion, definition, or value, part of
a term-description group in a
<base> base element: base URL for href: URL to use as the base URL for links in the description list (dl element), and
all the page links page the discourse, or quote, part in a
target: sets the base target for links in the page conversation (dialog element)
[_blank | _parent | _self | _top]
<del> deleted text: represents a cite: a URL used to specify the address of a docu-
<bb> browser button: a user agent type: indicates the kind of command [makeapp] removal from the document ment that explains the change
command that the user can datetime: used to specify the time and date of the
invoke change

<bdo> bdo element: represents dir: direction override [ltr | rtl] <details> details element: represents open: indicates whether the details are to be shown
explicit text directionality additional information or controls to the user [open]
formatting control for its which the user can obtain on
children demand

<blockquote> block quote element: a cite: URL of the origin of the quote <dialog> dialog element: represents a global attributes**
section that is quoted from conversation, meeting minutes, a
another source chat transcript, a dialog in a
screenplay, an instant message
<body> body element: main content global attributes** log, or some other construct in
of the document which different players take
turns
<br> break: inserts a single line global attributes**
break <div> document block: creates a global attributes**
block level element with no
special meaning

attributes - values in [] are the accepted values


http://www.veign.com Part Number: QRG0009 ©2009 Veign, All Rights Reserved
Page 3 of 4 Quick Reference Guide FREE

HTML 5 - extended
Tag Info Attributes Tag Info Attributes

<dfn> definition term: the defining title: the exact value of the term being defined <input> input field: a typed data field, Attributes are dependant upon input type
instance of a term usually with a form control to accept: specified to provide user agents with a hint
allow the user to edit the data of what file types the server will be able to accept
<dl> definition list: an association global attributes** alt: provides the textual label for the alternative
list consisting of zero or more button for users and user agents who cannot use
name-value groups (a descrip- the image
tion list). Each group must autocomplete: determines if the data is considered
consist of one or more names sensitive and if autocomplete will be used [on | off |
(dt elements) followed by one default]
or more values (dd elements) autofocus: determines if the input will get focus
when a page loads [autofocus]
<dt> definition term: the term, or global attributes** checked: determines if the input will be checked by
name, part of a term- default [checked]
description group in a descrip- disabled: prevents the input from being pressed
tion list (dl element), and the [disabled]
talker, or speaker, part of a form: used to explicitly associate the button ele-
talker-discourse pair in a ment with its form owner
conversation (dialog element) formaction: URL that specifies a form processing
agent
<em> emphasized text: represents global attributes** formenctype: specifies the content type used to
stress emphasis of its contents. submit the form to the server [application/x-www-
form-urlencoded
<embed> embed element: an external src: URL of the resource being embedded | multipart/form-data | text/plain]
(typically non-HTML) applica- type: gives the MIME type of the plugin to instanti- formmethod: which HTTP method will be used to
tion or interactive content ate submit the forms data [get | post | put | delete]
height: height of the embedded content in pixels formnovalidate: indicate whether the form is to be
width: width of the embedded content in pixels validated during submission [formnovalidate]
formtarget: gives the target when the form is
<fieldset> fieldset element: a set of disabled: controls whether all the form control submitted [_blank | _parent | _self | _top]
form controls grouped under a descendants are disabled [disabled] height: height of the input in pixels
common name form: used to explicitly associate the fieldset list: used to identify an element that lists prede-
element with its form owner fined options suggested to the user
name: gives the name of the form control max and max: indicate the allowed range of values
for the element
<figure> figure element: some flow global attributes** maxlength: controls the maxlength of the input to
content, optionally with a a control
caption, that is self-contained multiple: indicates whether the user is to be
and is typically referenced as a allowed to specify more than one value [multiple]
single unit from the main flow name: elements name
of the document pattern: specifies a regular expression against
which the control's value is to be checked
<footer> footer element: represents a global attributes** placeholder: a short hint intended to aid the user
footer for the section it applies with data entry
to readonly: determines if the control is readonly
[readonly]
<form> form element: represents a accept-charset: gives the character encodings that
required: determines if the input is required before
collection of form-associated are to be used for the submission
the form submits [required]
elements, some of which can action: URL that specifies a form processing agent
size: gives the number of characters that, in a
represent editable values that autocomplete: determines if form elements will
visual rendering, the user agent is to allow the user
can be submitted to a server have their autocomplete turned on or off by default
to see while editing
for processing [on | off]
src: URL to an image (image button)
enctype: specifies the content type used to submit
step: indicates the granularity that is expected (and
the form to the server [application/x-www-form-
required) of the value
urlencoded
type: controls the data type (and associated con-
| multipart/form-data | text/plain]
trol) of the element [hidden | text | search | tel | url
method: which HTTP method will be used to submit
| email | password | datetime | date | month | week
the forms data [get | post | put | delete]
| time | datetime-local | number | range | color |
name: elements name
checkbox | radio | file | submit | image | reset |
novalidate: indicate whether the form is to be
button]
validated during submission [novalidate]
value: sets the element's value
target: gives the target when the form is submitted
width: width of the input in pixels
[_blank | _parent | _self | _top]
<ins> inserted text: an addition to cite: a URL used to specify the address of a docu-
<h1> to <h6> headers (1-6): represent global attributes** the document ment that explains the change
headings for their sections. datetime: used to specify the time and date of the
elements have a rank given by change
the number in their name
<kbd> keyboard text: user input global attributes**
<head> head element: contains
(typically keyboard input, al-
information about the docu- none
though it may also be used to
ment represent other input, such as
voice commands)
<header> header element: represents a global attributes**
group of introductory or for: specified to indicate a form control with which
<label> label: caption in a user interface
navigational aids
the caption is to be associated
<hgroup> heading group: used to group global attributes** fieldset title: sets the title of a global attributes**
<legend>
a set of h1–h6 elements when fieldset element
the heading has multiple
levels, such as subheadings, <li> list item: represents a list item value: used in an Ordered List (OL) to set the
alternative titles, or taglines of an Ordered (OL) or Unordered display value
list (UL)
<hr> horizontal rule: creates a global attributes**
horizontal rule (line) <link> resource link: allows authors to href: destination resource of the hyperlink
link their document to other rel: relationship between the document containing
<html> html document: root of an manifest: a URL to the address of the document's
resources the hyperlink and the destination resource [alternate
HTML document. application cache manifest | archives | author | bookmark | contact | external |
feed | first | help | icon | index | last | license | next
<i> italic text: indicates the text global attributes**
| nofollow | noreferrer | pingback | prefetch | prev |
is to be rendered with empha-
search | stylesheet | sidebar | tag | up]
sis
media: describes for which media the target docu-
ment was designed
<iframe> inline frame: represents a src: URL of a page that the nested browsing context
hreflang: gives the language of the linked resource
nested browsing window is to contain
type: gives the MIME type of the linked resource
name: elements name
sizes: gives the sizes of icons for visual media.
sandbox: enables a set of extra restrictions on any
content hosted by the iframe [allow-same-origin |
<mark> marked text: a run of text in global attributes**
allow-forms | allow-scripts]
one document marked or high-
seamless: indicates whether the iframe element's
lighted for reference purposes,
browsing context is to be rendered in a manner that
due to its relevance in another
makes it appear to be part of the containing docu-
context.
ment [seamless]
height: height of the frame in pixels <map> image map: in conjunction with name: gives the map a name so that it can be
width: width of the frame in pixels any area element descendants, referenced
defines an image map
<img> image: represents an image alt: text to display if the image can not
src: a URL to the image file <menu> menu list: a list of commands label: sets a visible label for the menu
usemap: name of the map to use for the image type: indicates the kind of menu being declared
ismap: provides access to a server-side image map [context | toolbar | list]
height: height of the image in pixels
width: width of the image in pixels

attributes - values in [] are the accepted values


http://www.veign.com Part Number: QRG0009 ©2009 Veign, All Rights Reserved
Page 4 of 4 Quick Reference Guide FREE

HTML 5 - extended
Tag Info Attributes Tag Info Attributes

<meta> meta information: sets meta charset: specifies the character encoding used by <select> selectable list: a control for autofocus: determines if the controls gets focus
information for the page (like the document selecting amongst a set of when the page loads [autofocus]
title, description) content: sets the value of the document metadata options disabled: prevent the selection of an item
http-equiv: sets a pragma directive [content- [disabled]
language | content-type | default-style | refresh] form: form to associate the select with
name: set the name of the meta information multiple: allows the selection of multiple items
[multiple]
<meter> meter element: scalar meas- high: specifies the range that is considered to be size: gives the number of options to show to the
urement within a known range, the "high" part user
or a fractional value low: specifies the range that is considered to be the
"low" part <small> small text: small print or other global attributes**
min: specifies the lower boundary side comments
max: specifies the upper boundary
optimum: specifies the range that is considered to <source> source element: allows authors media: gives the intended media type of the media
be the "optimum" part to specify multiple media re- resource
value: current location within the range sources for media elements. src: URL of the media resource
type: gives the MIME type of the source
<nav> navigation element: section of global attributes**
a page that links to other pages <span> span: used for an inline element global attributes**
or to parts within the page: a
section with navigation links <strong> strong: represents strong global attributes**
importance for its contents
<noscript> noscript section: represents global attributes**
nothing if scripting is enabled, <style> style definition: allows authors media: says which media the styles apply to
and represents its children if to embed style information in type: gives the MIME type (default: text/css)
scripting is disabled their documents scoped: indicates that the styles are intended just
for the subtree rooted at the style element's parent
<object> embedded object: an external data: specifies the address of the resource element [scoped]
resource, which, depending on name: valid browsing context name
<sub> subscript: subscript text global attributes**
the type of the resource, will usemap: name of the map to use for the image
either be treated as an image, as form: form to associate the object with
<sup> superscript: superscript text global attributes**
a nested browsing context, or as type: gives the MIME type of the plugin to instanti-
an external resource to be ate <table> table element: represents data global attributes**
processed by a plugin height: height of the embedded content in pixels with more than one dimension,
width: width of the embedded content in pixels
in the form of a table
<ol> ordered list: list of items, start: the ordinal value of the first list item
<tbody> table body: represents a block global attributes**
where the items have been reversed: indicates that the list is a descending list
of rows that consist of a body of
intentionally ordered [reversed]
data for a table
<optgroup> option group: a group of option disabled: disables all options in the group <td> table cell: represents a data cell colspan: sets how many columns a cell will span
elements with a common label [disabled] in a table rowspan: sets how many rows a cell will span
label: gives the name of the group, as shown to the headers: space separated list of ids corresponding
user to the th ids and give header information for the cell
<option> option element: an option in a disabled: prevent any clicks on an option item text area: a multiline plain text autofocus: determines if the textarea gets focus
<textarea>
select element or as part of a list [disabled] edit control for the element's raw when the page loads [autofocus]
of suggestions in a datalist label: provides a label for element value cols: specifies the expected maximum number of
element selected: determines if the option is selected by characters per line
default [selected] disabled: prevents entry of text [disabled]
value: provides a value for element form: form to associate the textarea with
readonly: control whether the text can be edited by
<output> output element: the result of a form: used to explicitly associate the output ele-
the user or not [readonly]
calculation ment with its form owner
required: will be required to enter a value before
for: allows an explicit relationship to be made
submitting the form [required]
between the result of a calculation and the elements
rows: specifies the number of lines to show
that represent the values that went into the calcula-
maxlength: controls the maximum amount of
tion or that influenced the calculation
characters which can be entered
global attributes** placeholder: a hint intended to aid the user with
<p> paragraph: creates a paragraph
data entry
<param> parameter element: defines name: gives the name of the parameter. wrap: defines how text is wrapped [soft | hard]
parameters for plugins invoked value: gives the value of the parameter.
<tfoot> table footer: the block of rows global attributes**
by object elements. It does not
that consist of the column
represent anything on its own
summaries (footers) for a table
<pre> preformatted text: represents global attributes**
<th> table header: represents a colspan: determines how many columns a cell will
a block of preformatted text
header cell in a table span
progress element: represents max: specifies how much work the task requires in rowspan: determines how many rows a cell will
<progress>
span
the completion progress of a total
headers: space separated list of ids corresponding
task. value: specifies how much of the task has been
completed to the th ids and give header information for the cell
scope: determines where the cell provides its header
<q> short quotation: phrasing cite: a URL of a page where the quote was taken information [col | colgroup | row | rowgroup]
content quoted from another from
<thead> table header: the block of rows global attributes**
source
that consist of the column labels
<ruby> ruby annotations: allows one global attributes** (headers) for a table
or more spans of phrasing
<time> date/time: a precise date and/ datetime: date/time using the Gregorian calendar
content to be marked with ruby
or a time in the Gregorian
annotations
calendar
<rp> ruby text parentheses: can be global attributes**
<title> title element: sets the title of
used to provide parentheses none
the document
around a ruby text component of
a ruby annotation table row: a row of cells in a global attributes**
<tr>
table
<rt> ruby text component: marks global attributes**
the ruby text component of a
<ul> unordered list: a list of items, global attributes**
ruby annotation
where the order of the items is
not important
<samp> sample: sample output from a global attributes**
program or computing system.
<var> variable: this could be an actual global attributes**
variable in a mathematical
<script> script element: allows authors async: the script will be executed asynchronously,
expression or programming
to include dynamic script and as soon as it is available [async]
context
data blocks in their documents type: gives the MIME type of the script or format of
the data
<video> video element: a video or poster: URL of an image file that the user agent
defer: the script is executed when the page has
movie can show while no video data is available
finished parsing [defer]
autobuffer: determines if the audio will be buffered
src: gives the address of the external script re- [autobuffer]
source to use
autoplay: determine if the audio will automatically
charset: specifies the character encoding of the play [autoplay]
external script resource
controls: indicates that the author has not provided
a scripted controller and would like the user agent to
<section> section element: represents a cite: a URL of a page where the section was taken
provide its own set of controls [controls]
generic document or application from
loop: sets whether the audio will start once the end
section
is reached [loop]
src: URL of the audio to play
width: width of the video in pixels
height: height of the video in pixels
attributes - values in [] are the accepted values
http://www.veign.com Part Number: QRG0009 ©2009 Veign, All Rights Reserved
Page 1 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)


BACKGROUND BORDER BOX MODEL

background background-image border-top border-top-width float left | right | none


background-position border-style
background-size border-color height auto
background-repeat length
background-attachment border-top-color border-color %
background-origin
border-top-style border-style max-height none
background-clip
length
background-color border-top-width thin | medium | thick %
length
background-attachment scroll | fixed
max-width none
border-width thin | medium | thick length
background-break bounding-box | each-box |
length %
continuous
border-radius border-top-right-radius min-height none | inherit
background-clip length
border-bottom-right-radius length
%
border-bottom-left-radius %
border-box | padding-box |
border-top-left-radius
content-box | no-clip
min-width none | inherit
border-top-right-radius length length
background-color color
transparent %
border-bottom-right-radius length
background-image url width auto
border-bottom-left-radius length %
none
length
background-origin border-box | padding-box | border-top-left-radius length
content-box margin margin-top
box-shadow inset || [ length, length, margin-right
background-position top left | top center | top length, length || <color> ] margin-bottom
right | center left | center none margin-left
center | center right |
border-style none | hidden | dotted | margin-bottom auto
bottom left | bottom center
dashed | solid | double | length
| bottom right
groove | ridge | inset | %
x-% y-%
outset
x-pos y-pos
margin-left auto
FONT length
background-repeat repeat | repeat-x | repeat-
y | no-repeat %
font font-style
font-variant margin-right auto
background-size length
font-weight length
%
font-size/line-height %
auto | cover | contain
font-family
caption | icon | menu | margin-top auto
BORDER
message-box | small- length
border border-width caption | status-bar %
border-style
font-family family-name padding padding-top
border-color
generic-family padding-right
border-break border-width inherit padding-bottom
border-style padding-left
color font-size xx-small | x-small | small |
medium | large | x-large | padding-bottom length
close
xx-large | smaller | larger | %
border-bottom border-bottom-width inherit
length padding-left length
border-style
border-color % %

font-size-adjust none| inherit padding-right length


border-bottom-color border-color
number %
border-bottom-style border-style padding-top length
font-stretch normal | wider | narrower |
ultra-condensed | extra- %
border-bottom-width thin | medium | thick
condensed | condensed |
length marquee-direction forward | reverse
semi-condensed | semi-
border-collapse collapse | separate expanded | expanded | marquee-loop infinite
extra-expanded | ultra- number
border-color color expanded | inherit
marquee-play-count infinite
border-image image font-style normal | italic | oblique | integer
[ number / % inherit
border-width marquee-speed slow | normal | fast
stretch | repeat | round ] font-variant normal | small-caps | inherit
none marquee-style scroll | slide | alternate
font-weight normal | bold | bolder |
border-left border-left-width lighter | 100 | 200 | 300 | overflow visible | hidden | scroll |
border-style 400 | 500 | 600 | 700 | 800 auto | no-display | no-
border-color | 900 | inherit content
overflow-x
border-left-color border-color BOX MODEL overflow-y

border-left-style border-style clear left | right | both | none overflow-style auto | marquee-line | mar-
quee-block
border-left-width thin | medium | thick display none | inline | block | inline-
length block | list-item | run-in | overflow-x visible | hidden | scroll |
compact | table | inline- auto | no-display | no-
border-right border-right-width table | table-row-group | content
border-style table-header-group | table-
border-color footer-group | table-row | overflow-y visible | hidden | scroll |
table-column-group | table- auto | no-display | no-
border-right-color border-color column | table-cell | table- content
caption | ruby | ruby-base |
border-right-style border-style rotation angle
ruby-text | ruby-base-group
border-right-width thin | medium | thick | ruby-text-group
rotation-point position (paired value off-
length set)

visibility visible | hidden | collapse

http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved


Page 2 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)


TEXT TEMPLATE LAYOUT SPEECH
direction ltr | rtl | inherit box-align start | end | center | base- voice-family inherit | [ <specific-voice,
age, generic-voice, num-
hanging-punctuation none | [ start | end | end- ber> ]
edge ] box-direction normal | reverse
voice-rate x-slow | slow | medium |
letter-spacing normal box-flex number fast | x-fast | inherit
length %
% box-flex-group integer
voice-pitch x-low | low | medium | high
punctuation-trim none | [start | end | adja- box-lines single | multiple
| x-high | inherit
cent] number
box-orient horizontal | vertical | inline-
text-align start | end | left | right | axis | block-axis %
center | justify voice-pitch-range x-low | low | medium | high
box-pack start | end | center | justify
text-align-last start | end | left | right | | x-high | inherit
center | justify box-sizing content-box | padding-box | number
border-box | margin-box
text-decoration none | underline | overline | voice-stress strong | moderate | none |
line-through | blink tab-side top | bottom | left | right reduced | inherit

text-emphasis none | [ [ accent | dot | circle TABLE voice-volume silent | x-soft | soft | me-
| disc] [ before | after ]? ] dium | loud | x-loud | inherit
border-collapse collapse | separate number
text-indent length %
% border-spacing length length
LIST & MARKERS
text-justify auto | inter-word | inter- caption-side top | bottom | left | right
ideograph | inter-cluster | list-style list-style-type
distribute | kashida | tibetan empty-cells show | hide list-style-position
list-style-image
text-outline none table-layout auto | fixed
color list-style-image none
length SPEECH url

text-shadow none cue cue-before list-style-position Inside | outside


color cue-after
length list-style-type none | asterisks | box |
cue-before uri [ silent | x-soft | soft | check | circle | diamond |
text-transform none | capitalize | uppercase medium | loud | x-loud] | disc | hyphen | square |
| lowercase none | inherit ] decimal | decimal-leading-
number zero | lower-roman | upper-
text-wrap normal | unrestricted | none % roman | lower-alpha | up-
| suppress per-alpha | lower-greek |
cue-after uri [ silent | x-soft | soft | lower-latin | upper-latin |
unicode-bidi normal | embed | bidi- medium | loud | x-loud] | hebrew | armenian | geor-
override none | inherit ] gian | cjk-ideographic |
number hiragana | katakana | hira-
white-space normal | pre | nowrap | pre-
% gana-iroha | katakana-iroha
wrap | pre-line
| footnotes
mark mark-before
white-space-collapse preserve | collapse | pre-
mark-after marker-offset auto
serve-breaks | discard
length
mark-before string
word-break normal | keep-all | loose |
break-strict | break-all ANIMATIONS
mark-after string
word-spacing normal animation animation-name
length pause pause-before animation-duration
% pause-after animation-timing-function
animation-delay
word-wrap normal | break-word pause-before none | x-weak | weak | animation-iteration-count
medium | strong | x-strong animation-direction
COLUMN | inherit
time animation-delay time
column-count auto
number pause-after none | x-weak | weak | animation-direction normal | alternate
medium | strong | x-strong
column-fill auto | balance | inherit animation-duration time
time
column-gap normal animation-iteration-count inherit
length phonemes string number

column-rule column-rule-width rest rest-before animation-name none | IDENT


column-rule-style rest-after
column-rule-color animation-play-state running | paused
rest-before none | x-weak | weak |
column-rule-color color medium | strong | x-strong animation-timing-function ease | linear | ease-in |
| inherit ease-out | ease-in-out |
column-rule-style border-style time cubic-Bezier (number, num-
ber, number, number)
column-rule-width thin | medium | thick rest-after none | x-weak | weak |
length medium | strong | x-strong TRANSITIONS
| inherit
columns column-width transition transition-property
time
column-count transition-duration
speak none | normal | spell-out | transition-timing-function
column-span 1 | all transition-delay
digits | literal-punctuation |
column-width auto no-punctuation | inherit
transition-delay time
length
voice-balance left | center | right | left-
transition-duration time
COLOR wards | rightwards | inherit
number transition-property none | all
color inherit
color voice-duration time transition-timing-function ease | linear | ease-in |
ease-out | ease-in-out |
opacity inherit cubic-Bezier (number, num-
number ber, number, number)

http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved


Page 3 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)


GRID POSITIONING GENERATED CONTENT LINE BOX
grid-columns none | inherit hyphenate-after auto line-height normal
[ length percentage relative integer number
length ] length
hyphenate-before auto %
grid-rows none | inherit integer
[ length percentage relative line-stacking line-stacking-strategy
length ] hyphenate-character auto line-stacking-ruby
string line-stacking-shift
OUTLINE
hyphenate-lines no-limit line-stacking-strategy inline-line-height | block-
outline outline-color integer line-height | max-height |
outline-style grid-height
outline-width hyphenate-resource none
uri line-stacking-ruby exclude-ruby | include-ruby
outline-color color
invert hyphens none | manual | auto line-stacking-shift consider-shifts | disregard-
image-resolution normal | auto shifts
outline-offset inherit
length dpi text-height auto | font-size | text-size |
marks [ crop || cross ] | none max-size
outline-style None | dotted | dashed |
solid | double | groove | vertical-align Baseline | sub | super | top
move-to normal | here
ridge | inset | outset | text-top | middle | bottom
identifier
| text-bottom
outline-width thin | medium | thick length
page-policy start | first | last
length %
quotes none
3D / 2D TRANSFORM HYPERLINK
string string string string
backface-visibility visible | hidden target target-name
string-set identifier
content-list target-new
perspective none
target-position
number
text-replace none
[<string> <string>]+ target-name current | root | parent | new
perspective-origin [ [ [ percentage> |
| modal
<length> | left | center |
LINE BOX string
right ] [ <percentage> |
<length> | top | center | target-new window | tab | none
bottom ]? ] <length> ] | alignment-adjust auto | baseline | before-
[ [ [ left | center | right ] || edge | text-before-edge | target-position above | behind | front |
[ top | center | bottom ] ] middle | central | after-edge back
<length> ] | text-after-edge | ideo-
graphic | alphabetic | hang- POSITIONING
transform none | matrix | matrix3d | ing | mathematical
translate3d | translateX | length bottom auto
translateY | translateZ | % %
scale | scale3d | scaleX | length
scaleY | scaleZ | rotate | alignment-baseline baseline | use-script | be-
rotate3d | rotateX | rotateY fore-edge | text-before- clip shape
| rotateZ | skewX | skewY | edge | after-edge | text- auto
skew | perspective after-edge | central | middle
| ideographic | alphabetic | left auto
transform-origin [ [ [ <percentage> | hanging | mathematical %
<length> | left | center | length
right ] [ <percentage> | baseline-shift baseline | sub | super
length position static | relative | absolute |
<length> | top | center | fixed
bottom ]? ] <length> ] | %
[ [ [ left | center | right ] || right auto
dominant-baseline auto | use-script | no-
[ top | center | bottom ] ] %
change | reset-size | alpha-
<length> ] length
betic | hanging | ideo-
transform-style flat | preserve-3d graphic | mathematical |
top auto
central | middle | text-after-
%
GENERATED CONTENT edge | text-before-edge length
bookmark-label content drop-initial-after-align alignment-baseline
z-index auto
attr number
drop-initial-after-adjust central | middle | after-edge
string
| text-after-edge | ideo-
RUBY
bookmark-level none graphic | alphabetic |
integer mathematical ruby-align auto | start | left | center |
length end | right | distribute-letter
bookmark-target self % | distribute-space | line-
uri edge
attr drop-initial-before-align caps-height
alignment-baseline ruby-overhang auto | start | end | none
border-length auto
length drop-initial-before-adjust before-edge | text-before- ruby-position before | after | right | inline
edge | central | middle |
content normal | none | inhibit hanging | mathematical ruby-span attr(x) | none
uri length
%
counter-increment none
identifier number drop-initial-value initial
integer
counter-reset none
identifier number drop-initial-size auto
integer
crop auto %
shape line
display normal | none | list-item inline-box-align initial | last
integer
float-offset length length

http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved


Page 4 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)


PAGED MEDIA

fit fill | hidden | meet | slice

fit-position [top | center | bottom] ||


[left | center | right]
length
%

image-orientation auto
angle

orphans integer

page auto
identifier

page-break-after auto | always | avoid | left |


right

page-break-before auto | always | avoid | left |


right

page-break-inside auto | avoid

size auto | landscape | portrait


length

windows integer

UI

appearance normal | inherit | [icon |


window | desktop | work-
space | document | tooltip |
dialog | button | push-
button | hyperlink | radio-
button | checkbox | menu-
item | tab | menu |
menubar | pull-down-menu
| pop-up-menu | list-menu |
radio-group | checkbox-
group | outline-tree | range
| field | combo-box | signa-
ture | password]

cursor auto | crosshair | default |


pointer | move | e-resize |
ne-resize | nw-resize | n-
resize | se-resize | sw-resize
| s-resize | w-resize | text |
wait | help
url

icon auto | inherit


url

nav-index auto | inherit


number

nav-up auto | inherit


<id> [ current | root |
<target-name> ]

nav-right auto | inherit


<id> [ current | root |
<target-name> ]

nav-down auto | inherit


<id> [ current | root |
<target-name> ]

nav-left auto | inherit


<id> [ current | root |
<target-name> ]

resize none | both | horizontal |


vertical | inherit

• Values in italics are place holders for an actual value (like 1px,
1em, 1%), values in normal text are values that can be used as
the actual value
• CSS Properties in Dark Red are shorthand properties and each
value must be defined. The exception is where the property can
define from one to four of the sides of a box element property
(Top-Right-Bottom-Left) - i.e. border-width

http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved


Page 5 of 5 Quick Reference Guide FREE

Cascading Style Sheets (CSS 3)


PSEUDO-CLASS UNITS SELECTOR TYPES

:active an activated element ABSOLUTE MEASUREMENT Name Info Example

:focus an element while the % percentage Universal Any element * { font: 10px Arial; }
element has focus
cm centimeter Type Any element of h1 { text-decoration:
:visited a visited link that type underline; }
in inch
:hover an element when you mouse Grouping Multiple h1, h2, h3 { font-family:
over it mm millimeter elements of Verdana; }
different types
:link an unvisited link
pc pica (1p = 12 points)
Class Multiple .sampleclass { text-
:disabled an element while the elements of decoration: underline; }
element is disabled pt point (1pt = 1/72 inch)
different types
RELATIVE MEASUREMENT when you don’t
:enabled an element while the want to affect
element is enabled all instances of
ch width of the "0" glyph found in
:checked an element (form element the font for the font size used to that type
control) that is checked render
Id A single #sampleid { text-
:selection an element that is currently em 1em = current font size of element type decoration: underline; }
selected of highlighted by current element when you don’t
the user want to affect
ex x-height of the element's font all instances of
:lang Allows the author to specify that type
gd the grid defined by 'layout-grid'
a language to use in a
specified element Descendant An element that #gallery h1 { text-
px pixel of the viewing device is below (in the decoration: underline; }
:nth-child(n) an element that is the n-th rem the font size of the root element document tree)
sibling another
vh the viewport's height element—no
:nth-last-child(n) an element that is the n-th matter how
sibling counting from the vw the viewport's width many levels
last sibling below
vm viewport's height or width,
:first-child an element that is the first whichever is smaller of the two Child An element that #title > p { font-weight:
sibling is directly below bold; }
ANGLES (in the
:last-child an element that is the last document tree)
sibling deg degrees
another
grad grads element
:only-child an element that is the only
child Adjacent All elements h1 + p { font-style:
rad radians
Sibling that share the italic; }
:nth-of-type(n) an element that is the n-th
turn turns same parent
sibling of its type.
and elements
TIME are in the same
:nth-last-of-type(n) an element that is the n-th
sibling of its type counting immediate
ms milli-seconds
from the last sibling sequence
s seconds
:last-of-type an element that is the first General All elements h1 ~ p { font-style:
sibling of its type FREQUENCY Sibling that share the italic; }
same parent
:first-of-type an element that is the last Hz hertz and elements
sibling of its type are in the same
kHz kilo-hertz sequence (not
:only-of-type an element that is the only necessarily
child of that type COLORS
immediate)
:empty an element that has no color name red, blue, green, dark green
Attribute An element with E[selected] - att whatever
children that matches the value
rgb(x,y,z) red = rgb(255,0,0)
the attribute E[att="val"] - att with a
:root root element within the
rgb(x%,y%,z%) red = rgb(100%,0,0) listed specific value
document
E[rel~="next"] - att with
:not(x) an element not represented rgba(x,y,z, alpha) red = rgba(255,0,0) a value is a whitespace
by the argument ‘x’ separated list
#rrggbb red = #ff0000 (or shorthand = *[lang|="en"] - att value
:target a target element as specified #f00) either being exactly "val"
by a target in a URI or beginning with "val"
hsl(hue, saturation, red = hsl(0, 100%, 50%) immediately followed by
PSEUDO-ELEMENT lightness) "-"
E[att^="val"] - att value
::first-letter Adds special style to the first hsla(hue, saturation, red = hsl(0, 100%, 50%)
that begins with the prefix
letter of a text lightness, alpha)
"val"
::first-line Adds special style to the first flavor An accent color (typically chosen E[att$="val"] - att value
line of a text by the user) to customize the that end with the suffix
user interface of the user agent "val"
::before Inserts some content before itsel E[att*="val"] - att value
an element contains at least one
currentColor computed value of the instance of the substring
::after Inserts some content after an 'currentColor' keyword is the "val"
element computed value of the 'color'
property

http://www.veign.com Part Number: QRG0008 ©2009 Veign, All Rights Reserved

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy