You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1987 lines
128 KiB
1987 lines
128 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html lang="en-US-x-Hixie" ><head><title>4 The elements of HTML — HTML5 </title><style type="text/css">
|
|
pre { margin-left: 2em; white-space: pre-wrap; }
|
|
h2 { margin: 3em 0 1em 0; }
|
|
h3 { margin: 2.5em 0 1em 0; }
|
|
h4 { margin: 2.5em 0 0.75em 0; }
|
|
h5, h6 { margin: 2.5em 0 1em; }
|
|
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
|
|
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
|
|
p { margin: 1em 0; }
|
|
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
|
|
dl, dd { margin-top: 0; margin-bottom: 0; }
|
|
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
|
|
dt + dt { margin-top: 0; }
|
|
dd dt { margin-top: 0.25em; margin-bottom: 0; }
|
|
dd p { margin-top: 0; }
|
|
dd dl + p { margin-top: 1em; }
|
|
dd table + p { margin-top: 1em; }
|
|
p + * > li, dd li { margin: 1em 0; }
|
|
dt, dfn { font-weight: bold; font-style: normal; }
|
|
dt dfn { font-style: italic; }
|
|
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
|
|
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
|
|
pre em { font-weight: bolder; font-style: normal; }
|
|
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
|
|
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
|
|
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
|
|
table thead, table tbody { border-bottom: solid; }
|
|
table tbody th:first-child { border-left: solid; }
|
|
table tbody th { text-align: left; }
|
|
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
|
|
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
|
|
|
|
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
|
|
.matrix, .matrix td { border: none; text-align: right; }
|
|
.matrix { margin-left: 2em; }
|
|
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
|
|
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
|
|
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
|
|
|
|
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
|
|
img.extra { float: right; }
|
|
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
|
|
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
|
|
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
|
|
pre.css:first-line { color: #AAAA50; }
|
|
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
|
|
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
|
|
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
|
|
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
|
|
dl.domintro dd p { margin: 0.5em 0; }
|
|
dl.switch { padding-left: 2em; }
|
|
dl.switch > dt { text-indent: -1.5em; }
|
|
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
|
|
dl.triple { padding: 0 0 0 1em; }
|
|
dl.triple dt, dl.triple dd { margin: 0; display: inline }
|
|
dl.triple dt:after { content: ':'; }
|
|
dl.triple dd:after { content: '\A'; white-space: pre; }
|
|
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
|
|
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
|
|
a .diff-new { border-bottom: 1px blue solid; }
|
|
|
|
h2 { page-break-before: always; }
|
|
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
|
|
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
|
|
|
|
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
|
|
li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }
|
|
|
|
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
|
|
div.head p { margin: 0; }
|
|
div.head h1 { margin: 0; }
|
|
div.head .logo { float: right; margin: 0 1em; }
|
|
div.head .logo img { border: none } /* remove border from top image */
|
|
div.head dl { margin: 1em 0; }
|
|
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
|
|
|
|
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
|
|
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
|
|
body > .toc > li > * { margin-bottom: 0.5em; }
|
|
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
|
|
.toc, .toc li { list-style: none; }
|
|
|
|
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
|
|
.brief li { margin: 0; padding: 0; }
|
|
.brief li p { margin: 0; padding: 0; }
|
|
|
|
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
|
|
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
|
|
.category-list li { display: inline; }
|
|
.category-list li:not(:last-child)::after { content: ', '; }
|
|
.category-list li > span, .category-list li > a { text-transform: lowercase; }
|
|
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
|
|
|
|
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
|
|
.XXX > :first-child { margin-top: 0; }
|
|
p .XXX { line-height: 3em; }
|
|
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
|
|
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
|
|
.annotation :link, .annotation :visited { color: inherit; }
|
|
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
|
|
.annotation span { border: none ! important; }
|
|
.note { color: green; background: transparent; font-family: sans-serif; }
|
|
.warning { color: red; background: transparent; }
|
|
.note, .warning { font-weight: bolder; font-style: italic; }
|
|
p.note, div.note { padding: 0.5em 2em; }
|
|
span.note { padding: 0 2em; }
|
|
.note p:first-child, .warning p:first-child { margin-top: 0; }
|
|
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
|
|
.warning:before { font-style: normal; }
|
|
p.note:before { content: 'Note: '; }
|
|
p.warning:before { content: '\26A0 Warning! '; }
|
|
|
|
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
|
|
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
|
|
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
|
|
.bookkeeping dt { margin: 0.5em 2em 0; }
|
|
.bookkeeping dd { margin: 0 3em 0.5em; }
|
|
|
|
h4 { position: relative; z-index: 3; }
|
|
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
|
|
.element {
|
|
background: #EEEEFF;
|
|
color: black;
|
|
margin: 0 0 1em 0.15em;
|
|
padding: 0 1em 0.25em 0.75em;
|
|
border-left: solid #9999FF 0.25em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.element:before {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: -1.15em;
|
|
height: 2em;
|
|
width: 0.9em;
|
|
background: #EEEEFF;
|
|
content: ' ';
|
|
border-style: none none solid solid;
|
|
border-color: #9999FF;
|
|
border-width: 0.25em;
|
|
}
|
|
|
|
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
|
|
td > .example:only-child { margin: 0 0 0 0.1em; }
|
|
|
|
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
|
|
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
|
|
ul.domTree li li { list-style: none; }
|
|
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
|
|
ul.domTree span { font-style: italic; font-family: serif; }
|
|
ul.domTree .t1 code { color: purple; font-weight: bold; }
|
|
ul.domTree .t2 { font-style: normal; font-family: monospace; }
|
|
ul.domTree .t2 .name { color: black; font-weight: bold; }
|
|
ul.domTree .t2 .value { color: blue; font-weight: normal; }
|
|
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
|
|
ul.domTree .t7 code, .domTree .t8 code { color: green; }
|
|
ul.domTree .t10 code { color: teal; }
|
|
|
|
body.dfnEnabled dfn { cursor: pointer; }
|
|
.dfnPanel {
|
|
display: inline;
|
|
position: absolute;
|
|
z-index: 10;
|
|
height: auto;
|
|
width: auto;
|
|
padding: 0.5em 0.75em;
|
|
font: small sans-serif, Droid Sans Fallback;
|
|
background: #DDDDDD;
|
|
color: black;
|
|
border: outset 0.2em;
|
|
}
|
|
.dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
|
|
.dfnPanel :link, .dfnPanel :visited { color: black; }
|
|
.dfnPanel p { font-weight: bolder; }
|
|
.dfnPanel * + p { margin-top: 0.25em; }
|
|
.dfnPanel li { list-style-position: inside; }
|
|
|
|
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
|
|
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
|
|
#configUI p label { display: block; }
|
|
#configUI #updateUI, #configUI .loginUI { text-align: center; }
|
|
#configUI input[type=button] { display: block; margin: auto; }
|
|
|
|
fieldset { margin: 1em; padding: 0.5em 1em; }
|
|
fieldset > legend + * { margin-top: 0; }
|
|
fieldset > :last-child { margin-bottom: 0; }
|
|
fieldset p { margin: 0.5em 0; }
|
|
|
|
.stability {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0; right: 0;
|
|
margin: 0 auto 0 auto !important;
|
|
z-index: 1000;
|
|
width: 50%;
|
|
background: maroon; color: yellow;
|
|
-webkit-border-radius: 1em 1em 0 0;
|
|
-moz-border-radius: 1em 1em 0 0;
|
|
border-radius: 1em 1em 0 0;
|
|
-moz-box-shadow: 0 0 1em #500;
|
|
-webkit-box-shadow: 0 0 1em #500;
|
|
box-shadow: 0 0 1em red;
|
|
padding: 0.5em 1em;
|
|
text-align: center;
|
|
}
|
|
.stability strong {
|
|
display: block;
|
|
}
|
|
.stability input {
|
|
appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
|
|
position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
|
|
}
|
|
.stability input:hover {
|
|
color: white;
|
|
text-shadow: 0 0 2px black;
|
|
}
|
|
.stability input:active {
|
|
padding: 0.3em 0.45em 0.2em 0.55em;
|
|
}
|
|
.stability :link, .stability :visited,
|
|
.stability :link:hover, .stability :visited:hover {
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
|
|
</style><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation
|
|
requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><style type="text/css">
|
|
|
|
.applies thead th > * { display: block; }
|
|
.applies thead code { display: block; }
|
|
.applies tbody th { whitespace: nowrap; }
|
|
.applies td { text-align: center; }
|
|
.applies .yes { background: yellow; }
|
|
|
|
.matrix, .matrix td { border: hidden; text-align: right; }
|
|
.matrix { margin-left: 2em; }
|
|
|
|
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
|
|
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
|
|
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
|
|
|
|
td.eg { border-width: thin; text-align: center; }
|
|
|
|
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
|
|
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
|
|
#table-example-1 caption { padding-bottom: 0.5em; }
|
|
#table-example-1 thead, #table-example-1 tbody { border: none; }
|
|
#table-example-1 th, #table-example-1 td { border: solid thin; }
|
|
#table-example-1 th { font-weight: normal; }
|
|
#table-example-1 td { border-style: none solid; vertical-align: top; }
|
|
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
|
|
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
|
|
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
|
|
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
|
|
#table-example-1 tbody td:first-child::after { content: leader(". "); }
|
|
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
|
|
#table-example-1 tbody td:first-child + td { width: 10em; }
|
|
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
|
|
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
|
|
|
|
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
|
|
.apple-table-examples * { font-family: "Times", serif; }
|
|
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
|
|
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
|
|
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
|
|
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
|
|
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
|
|
.apple-table-examples td { text-align: right; vertical-align: top; }
|
|
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
|
|
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
|
|
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
|
|
.apple-table-examples sup { line-height: 0; }
|
|
|
|
.details-example img { vertical-align: top; }
|
|
|
|
#base64-table {
|
|
white-space: nowrap;
|
|
font-size: 0.6em;
|
|
column-width: 6em;
|
|
column-count: 5;
|
|
column-gap: 1em;
|
|
-moz-column-width: 6em;
|
|
-moz-column-count: 5;
|
|
-moz-column-gap: 1em;
|
|
-webkit-column-width: 6em;
|
|
-webkit-column-count: 5;
|
|
-webkit-column-gap: 1em;
|
|
}
|
|
#base64-table thead { display: none; }
|
|
#base64-table * { border: none; }
|
|
#base64-table tbody td:first-child:after { content: ':'; }
|
|
#base64-table tbody td:last-child { text-align: right; }
|
|
|
|
#named-character-references-table {
|
|
white-space: nowrap;
|
|
font-size: 0.6em;
|
|
column-width: 30em;
|
|
column-gap: 1em;
|
|
-moz-column-width: 30em;
|
|
-moz-column-gap: 1em;
|
|
-webkit-column-width: 30em;
|
|
-webkit-column-gap: 1em;
|
|
}
|
|
#named-character-references-table > table > tbody > tr > td:first-child + td,
|
|
#named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
|
|
#named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
|
|
#named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }
|
|
|
|
.glyph.control { color: red; }
|
|
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-weight: bold;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-style: italic;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'Essays1743';
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
|
|
}
|
|
|
|
</style><style type="text/css">
|
|
.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
|
|
</style><script type="text/javascript">
|
|
function getCookie(name) {
|
|
var params = location.search.substr(1).split("&");
|
|
for (var index = 0; index < params.length; index++) {
|
|
if (params[index] == name)
|
|
return "1";
|
|
var data = params[index].split("=");
|
|
if (data[0] == name)
|
|
return unescape(data[1]);
|
|
}
|
|
var cookies = document.cookie.split("; ");
|
|
for (var index = 0; index < cookies.length; index++) {
|
|
var data = cookies[index].split("=");
|
|
if (data[0] == name)
|
|
return unescape(data[1]);
|
|
}
|
|
return null;
|
|
}
|
|
</script>
|
|
<script src="link-fixup.js" type="text/javascript"></script>
|
|
<link href="style.css" rel="stylesheet"><link href="apis-in-html-documents.html" title="3.3 APIs in HTML documents" rel="prev">
|
|
<link href="spec.html#contents" title="Table of contents" rel="index">
|
|
<link href="scripting-1.html" title="4.3 Scripting" rel="next">
|
|
</head><body><div class="head" id="head">
|
|
<div id="multipage-common">
|
|
<p class="stability" id="wip"><strong>This is a work in
|
|
progress!</strong> For the latest updates from the HTML WG, possibly
|
|
including important bug fixes, please look at the <a href="http://dev.w3.org/html5/spec/Overview.html">editor's draft</a> instead.
|
|
There may also be a more
|
|
<a href="http://www.w3.org/TR/html5">up-to-date Working Draft</a>
|
|
with changes based on resolution of Last Call issues.
|
|
<input onclick="closeWarning(this.parentNode)" type="button" value="╳⃝"></p>
|
|
<script type="text/javascript">
|
|
function closeWarning(element) {
|
|
element.parentNode.removeChild(element);
|
|
var date = new Date();
|
|
date.setDate(date.getDate()+4);
|
|
document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
|
|
}
|
|
if (getCookie('hide-obsolescence-warning') == '1')
|
|
setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
|
|
</script></div>
|
|
|
|
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
|
|
|
|
<h1>HTML5</h1>
|
|
</div><div>
|
|
<a href="apis-in-html-documents.html" class="prev">3.3 APIs in HTML documents</a> –
|
|
<a href="spec.html#contents">Table of contents</a> –
|
|
<a href="scripting-1.html" class="next">4.3 Scripting</a>
|
|
<ol class="toc"><li><a href="semantics.html#semantics"><span class="secno">4 </span>The elements of HTML</a>
|
|
<ol><li><a href="semantics.html#the-root-element"><span class="secno">4.1 </span>The root element</a>
|
|
<ol><li><a href="semantics.html#the-html-element"><span class="secno">4.1.1 </span>The <code>html</code> element</a></li></ol></li><li><a href="semantics.html#document-metadata"><span class="secno">4.2 </span>Document metadata</a>
|
|
<ol><li><a href="semantics.html#the-head-element"><span class="secno">4.2.1 </span>The <code>head</code> element</a></li><li><a href="semantics.html#the-title-element"><span class="secno">4.2.2 </span>The <code>title</code> element</a></li><li><a href="semantics.html#the-base-element"><span class="secno">4.2.3 </span>The <code>base</code> element</a></li><li><a href="semantics.html#the-link-element"><span class="secno">4.2.4 </span>The <code>link</code> element</a></li><li><a href="semantics.html#the-meta-element"><span class="secno">4.2.5 </span>The <code>meta</code> element</a>
|
|
<ol><li><a href="semantics.html#standard-metadata-names"><span class="secno">4.2.5.1 </span>Standard metadata names</a></li><li><a href="semantics.html#other-metadata-names"><span class="secno">4.2.5.2 </span>Other metadata names</a></li><li><a href="semantics.html#pragma-directives"><span class="secno">4.2.5.3 </span>Pragma directives</a></li><li><a href="semantics.html#other-pragma-directives"><span class="secno">4.2.5.4 </span>Other pragma directives</a></li><li><a href="semantics.html#charset"><span class="secno">4.2.5.5 </span>Specifying the document's character encoding</a></li></ol></li><li><a href="semantics.html#the-style-element"><span class="secno">4.2.6 </span>The <code>style</code> element</a></li><li><a href="semantics.html#styling"><span class="secno">4.2.7 </span>Styling</a></li></ol></li></ol></li></ol></div>
|
|
|
|
<h2 id="semantics"><span class="secno">4 </span>The elements of HTML</h2><h3 id="the-root-element"><span class="secno">4.1 </span>The root element</h3><h4 id="the-html-element"><span class="secno">4.1.1 </span>The <dfn><code>html</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd>None.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>As the root element of a document.</dd>
|
|
<dd>Wherever a subdocument fragment is allowed in a compound document.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd>A <code><a href="#the-head-element">head</a></code> element followed by a <code><a href="sections.html#the-body-element">body</a></code> element.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd><code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>
|
|
<pre class="idl">interface <dfn id="htmlhtmlelement">HTMLHtmlElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
|
|
</dd>
|
|
</dl><p>The <code><a href="#the-html-element">html</a></code> element <a href="rendering.html#represents">represents</a> the root of
|
|
an HTML document.</p><p>The <dfn id="attr-html-manifest" title="attr-html-manifest"><code>manifest</code></dfn>
|
|
attribute gives the address of the document's <a href="offline.html#application-cache">application
|
|
cache</a> <a href="offline.html#concept-appcache-manifest" title="concept-appcache-manifest">manifest</a>, if there is
|
|
one. If the attribute is present, the attribute's value must be a
|
|
<a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
|
|
spaces</a>.</p><p>The <code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code> attribute
|
|
only <a href="offline.html#concept-appcache-init" title="concept-appcache-init">has an effect</a> during
|
|
the early stages of document load. Changing the attribute
|
|
dynamically thus has no effect (and thus, no DOM API is provided for
|
|
this attribute).</p><p class="note">For the purposes of <a href="offline.html#concept-appcache-init" title="concept-appcache-init">application cache selection</a>,
|
|
later <code><a href="#the-base-element">base</a></code> elements cannot affect the <a href="urls.html#resolve-a-url" title="resolve a url">resolving of relative URLs</a> in <code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code> attributes, as the
|
|
attributes are processed before those elements are seen.</p><p class="note">The <code title="dom-applicationCache"><a href="offline.html#dom-applicationcache">window.applicationCache</a></code> IDL
|
|
attribute provides scripted access to the offline <a href="offline.html#application-cache">application
|
|
cache</a> mechanism.</p><div class="example">
|
|
|
|
<p>The <code><a href="#the-html-element">html</a></code> element in the following example declares
|
|
that the document's language is English.</p>
|
|
|
|
<pre><!DOCTYPE html>
|
|
<strong><html lang="en"></strong>
|
|
<head>
|
|
<title>Swapping Songs</title>
|
|
</head>
|
|
<body>
|
|
<h1>Swapping Songs</h1>
|
|
<p>Tonight I swapped some of the songs I wrote with some friends, who
|
|
gave me some of the songs they wrote. I love sharing my music.</p>
|
|
</body>
|
|
<strong></html></strong></pre>
|
|
|
|
</div><h3 id="document-metadata"><span class="secno">4.2 </span>Document metadata</h3><h4 id="the-head-element"><span class="secno">4.2.1 </span>The <dfn><code>head</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd>None.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>As the first element in an <code><a href="#the-html-element">html</a></code> element.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd>If the document is <a href="the-iframe-element.html#an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a> or if title information is available from a higher-level protocol: Zero or more elements of <a href="content-models.html#metadata-content">metadata content</a>.</dd>
|
|
<dd>Otherwise: One or more elements of <a href="content-models.html#metadata-content">metadata content</a>, of which exactly one is a <code><a href="#the-title-element">title</a></code> element.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>
|
|
<pre class="idl">interface <dfn id="htmlheadelement">HTMLHeadElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
|
|
</dd>
|
|
</dl><p>The <code><a href="#the-head-element">head</a></code> element <a href="rendering.html#represents">represents</a> a
|
|
collection of metadata for the <code><a href="infrastructure.html#document">Document</a></code>.</p><div class="example">
|
|
|
|
<p>The collection of metadata in a <code><a href="#the-head-element">head</a></code> element can be
|
|
large or small. Here is an example of a very short one:</p>
|
|
|
|
<pre><!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>A document with a short head</title>
|
|
</head>
|
|
<body>
|
|
...</pre>
|
|
|
|
<p>Here is an example of a longer one:</p>
|
|
|
|
<pre><!DOCTYPE HTML>
|
|
<HTML>
|
|
<HEAD>
|
|
<META CHARSET="UTF-8">
|
|
<BASE HREF="http://www.example.com/">
|
|
<TITLE>An application with a long head</TITLE>
|
|
<LINK REL="STYLESHEET" HREF="default.css">
|
|
<LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
|
|
<SCRIPT SRC="support.js"></SCRIPT>
|
|
<META NAME="APPLICATION-NAME" CONTENT="Long headed application">
|
|
</HEAD>
|
|
<BODY>
|
|
...</pre>
|
|
|
|
</div><p class="note">The <code><a href="#the-title-element">title</a></code> element is a required child
|
|
in most situations, but when a higher-level protocol provides title
|
|
information, e.g. in the Subject line of an e-mail when HTML is used
|
|
as an e-mail authoring format, the <code><a href="#the-title-element">title</a></code> element can be
|
|
omitted.</p><h4 id="the-title-element"><span class="secno">4.2.2 </span>The <dfn><code>title</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>In a <code><a href="#the-head-element">head</a></code> element containing no other <code><a href="#the-title-element">title</a></code> elements.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd><a href="content-models.html#text-content" title="text content">Text</a>.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>
|
|
<pre class="idl">interface <dfn id="htmltitleelement">HTMLTitleElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
|
|
attribute DOMString <a href="#dom-title-text" title="dom-title-text">text</a>;
|
|
};</pre>
|
|
</dd>
|
|
</dl><p>The <code><a href="#the-title-element">title</a></code> element <a href="rendering.html#represents">represents</a> the
|
|
document's title or name. Authors should use titles that identify
|
|
their documents even when they are used out of context, for example
|
|
in a user's history or bookmarks, or in search results. The
|
|
document's title is often different from its first heading, since the
|
|
first heading does not have to stand alone when taken out of
|
|
context.</p><p>There must be no more than one <code><a href="#the-title-element">title</a></code> element per
|
|
document.</p><dl class="domintro"><dt><var title="">title</var> . <code title="dom-title-text"><a href="#dom-title-text">text</a></code> [ = <var title="">value</var> ]</dt>
|
|
|
|
<dd>
|
|
|
|
<p>Returns the contents of the element, ignoring child nodes that
|
|
aren't <a href="infrastructure.html#text-node" title="text node">text nodes</a>.</p>
|
|
|
|
<p>Can be set, to replace the element's children with the given
|
|
value.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>The IDL attribute <dfn id="dom-title-text" title="dom-title-text"><code>text</code></dfn> must return a
|
|
concatenation of the contents of all the <a href="infrastructure.html#text-node" title="text
|
|
node">text nodes</a> that are direct children of the
|
|
<code><a href="#the-title-element">title</a></code> element (ignoring any other nodes such as
|
|
comments or elements), in tree order. On setting, it must act the
|
|
same way as the <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute.</p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>Here are some examples of appropriate titles, contrasted with
|
|
the top-level headings that might be used on those same pages.</p>
|
|
|
|
<pre> <title>Introduction to The Mating Rituals of Bees</title>
|
|
...
|
|
<h1>Introduction</h1>
|
|
<p>This companion guide to the highly successful
|
|
<cite>Introduction to Medieval Bee-Keeping</cite> book is...</pre>
|
|
|
|
<p>The next page might be a part of the same site. Note how the
|
|
title describes the subject matter unambiguously, while the first
|
|
heading assumes the reader knows what the context is and therefore
|
|
won't wonder if the dances are Salsa or Waltz:</p>
|
|
|
|
<pre> <title>Dances used during bee mating rituals</title>
|
|
...
|
|
<h1>The Dances</h1></pre>
|
|
|
|
</div><p>The string to use as the document's title is given by the <code title="dom-document-title"><a href="dom.html#document.title">document.title</a></code> IDL attribute.</p><div class="impl">
|
|
|
|
<p>User agents should use the document's title when referring to the
|
|
document in their user interface. When the contents of a
|
|
<code><a href="#the-title-element">title</a></code> element are used in this way, <a href="elements.html#the-directionality">the
|
|
directionality</a> of that <code><a href="#the-title-element">title</a></code> element should be
|
|
used to set the directionality of the document's title in the user
|
|
interface.</p>
|
|
|
|
</div><h4 id="the-base-element"><span class="secno">4.2.3 </span>The <dfn><code>base</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>In a <code><a href="#the-head-element">head</a></code> element containing no other <code><a href="#the-base-element">base</a></code> elements.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd>Empty.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd><code title="attr-base-href"><a href="#attr-base-href">href</a></code></dd>
|
|
<dd><code title="attr-base-target"><a href="#attr-base-target">target</a></code></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>
|
|
<pre class="idl">interface <dfn id="htmlbaseelement">HTMLBaseElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
|
|
attribute DOMString <a href="#dom-base-href" title="dom-base-href">href</a>;
|
|
attribute DOMString <a href="#dom-base-target" title="dom-base-target">target</a>;
|
|
};</pre>
|
|
</dd>
|
|
</dl><p>The <code><a href="#the-base-element">base</a></code> element allows authors to specify the
|
|
<a href="urls.html#document-base-url">document base URL</a> for the purposes of <a href="urls.html#resolve-a-url" title="resolve a url">resolving relative URLs</a>, and the name
|
|
of the default <a href="browsers.html#browsing-context">browsing context</a> for the purposes of
|
|
<a href="links.html#following-hyperlinks">following hyperlinks</a>. The element does not <a href="rendering.html#represents" title="represents">represent</a> any content beyond this
|
|
information.</p><p>There must be no more than one <code><a href="#the-base-element">base</a></code> element per
|
|
document.</p><p>A <code><a href="#the-base-element">base</a></code> element must have either an <code title="attr-base-href"><a href="#attr-base-href">href</a></code> attribute, a <code title="attr-base-target"><a href="#attr-base-target">target</a></code> attribute, or both.</p><p>The <dfn id="attr-base-href" title="attr-base-href"><code>href</code></dfn> content
|
|
attribute, if specified, must contain a <a href="urls.html#valid-url-potentially-surrounded-by-spaces">valid URL potentially
|
|
surrounded by spaces</a>.</p><p>A <code><a href="#the-base-element">base</a></code> element, if it has an <code title="attr-base-href"><a href="#attr-base-href">href</a></code> attribute, must come before any
|
|
other elements in the tree that have attributes defined as taking
|
|
<a href="urls.html#url" title="URL">URLs</a>, except the <code><a href="#the-html-element">html</a></code> element
|
|
(its <code title="attr-html-manifest"><a href="#attr-html-manifest">manifest</a></code> attribute
|
|
isn't affected by <code><a href="#the-base-element">base</a></code> elements).</p><div class="impl">
|
|
|
|
<p class="note">If there are multiple <code><a href="#the-base-element">base</a></code> elements
|
|
with <code title="attr-base-href"><a href="#attr-base-href">href</a></code> attributes, all but the
|
|
first are ignored.</p>
|
|
|
|
</div><p>The <dfn id="attr-base-target" title="attr-base-target"><code>target</code></dfn>
|
|
attribute, if specified, must contain a <a href="browsers.html#valid-browsing-context-name-or-keyword">valid browsing context
|
|
name or keyword</a>, which specifies which <a href="browsers.html#browsing-context">browsing
|
|
context</a> is to be used as the default when <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a> and <a href="forms.html#the-form-element" title="form">forms</a> in the <code><a href="infrastructure.html#document">Document</a></code> cause <a href="history.html#navigate" title="navigate">navigation</a>.</p><p>A <code><a href="#the-base-element">base</a></code> element, if it has a <code title="attr-base-target"><a href="#attr-base-target">target</a></code> attribute, must come before
|
|
any elements in the tree that represent <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a>.</p><div class="impl">
|
|
|
|
<p class="note">If there are multiple <code><a href="#the-base-element">base</a></code> elements
|
|
with <code title="attr-base-target"><a href="#attr-base-target">target</a></code> attributes, all but
|
|
the first are ignored.</p>
|
|
|
|
<p>The <dfn id="dom-base-href" title="dom-base-href"><code>href</code></dfn> IDL
|
|
attribute, on getting, must return the page's <a href="urls.html#document-base-url">document base
|
|
URL</a>, and on setting, it must set the <code title="attr-base-href"><a href="#attr-base-href">href</a></code> content attribute to the given
|
|
new value.</p>
|
|
|
|
<p>The <dfn id="dom-base-target" title="dom-base-target"><code>target</code></dfn> IDL
|
|
attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
|
|
same name.</p>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>In this example, a <code><a href="#the-base-element">base</a></code> element is used to set the
|
|
<a href="urls.html#document-base-url">document base URL</a>:</p>
|
|
|
|
<pre><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>This is an example for the &lt;base&gt; element</title>
|
|
<base href="http://www.example.com/news/index.html">
|
|
</head>
|
|
<body>
|
|
<p>Visit the <a href="archives.html">archives</a>.</p>
|
|
</body>
|
|
</html></pre>
|
|
|
|
<p>The link in the above example would be a link to "<code title="">http://www.example.com/news/archives.html</code>".</p>
|
|
|
|
</div><h4 id="the-link-element"><span class="secno">4.2.4 </span>The <dfn><code>link</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>Where <a href="content-models.html#metadata-content">metadata content</a> is expected.</dd>
|
|
<dd>In a <code><a href="scripting-1.html#the-noscript-element">noscript</a></code> element that is a child of a <code><a href="#the-head-element">head</a></code> element.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd>Empty.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd><code title="attr-link-href"><a href="#attr-link-href">href</a></code></dd>
|
|
<dd><code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code></dd>
|
|
<dd><code title="attr-link-media"><a href="#attr-link-media">media</a></code></dd>
|
|
<dd><code title="attr-link-hreflang"><a href="#attr-link-hreflang">hreflang</a></code></dd>
|
|
<dd><code title="attr-link-type"><a href="#attr-link-type">type</a></code></dd>
|
|
<dd><code title="attr-link-sizes"><a href="links.html#attr-link-sizes">sizes</a></code></dd>
|
|
<dd>Also, the <code title="attr-link-title"><a href="#attr-link-title">title</a></code> attribute has special semantics on this element.</dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>
|
|
<pre class="idl">interface <dfn id="htmllinkelement">HTMLLinkElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
|
|
attribute boolean <a href="#dom-link-disabled" title="dom-link-disabled">disabled</a>;
|
|
attribute DOMString <a href="#dom-link-href" title="dom-link-href">href</a>;
|
|
attribute DOMString <a href="#dom-link-rel" title="dom-link-rel">rel</a>;
|
|
readonly attribute <a href="common-dom-interfaces.html#domtokenlist">DOMTokenList</a> <a href="#dom-link-rellist" title="dom-link-relList">relList</a>;
|
|
attribute DOMString <a href="#dom-link-media" title="dom-link-media">media</a>;
|
|
attribute DOMString <a href="#dom-link-hreflang" title="dom-link-hreflang">hreflang</a>;
|
|
attribute DOMString <a href="#dom-link-type" title="dom-link-type">type</a>;
|
|
[PutForwards=<a href="common-dom-interfaces.html#dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value">value</a>] readonly attribute <a href="common-dom-interfaces.html#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-link-sizes" title="dom-link-sizes">sizes</a>;
|
|
};
|
|
<a href="#htmllinkelement">HTMLLinkElement</a> implements <span>LinkStyle</span>;</pre>
|
|
</dd>
|
|
</dl><p>The <code><a href="#the-link-element">link</a></code> element allows authors to link their
|
|
document to other resources.</p><p>The destination of the link(s) is given by the <dfn id="attr-link-href" title="attr-link-href"><code>href</code></dfn> attribute, which must
|
|
be present and must contain a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially
|
|
surrounded by spaces</a>. <span class="impl">If the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute is absent, then the
|
|
element does not define a link.</span></p><p>A <code><a href="#the-link-element">link</a></code> element must have <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute.</p><p>The types of link indicated (the relationships) are given by the
|
|
value of the <dfn id="attr-link-rel" title="attr-link-rel"><code>rel</code></dfn>
|
|
attribute, which, if present, must have a value that is a <a href="common-microsyntaxes.html#set-of-space-separated-tokens">set
|
|
of space-separated tokens</a>. The <a href="links.html#linkTypes">allowed
|
|
keywords and their meanings</a> are defined in a later
|
|
section. <span class="impl">If the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute is absent, has no
|
|
keywords, or if none of the keywords used are allowed according to
|
|
the definitions in this specification, then the element does not
|
|
create any links.</span></p><p>Two categories of links can be created using the
|
|
<code><a href="#the-link-element">link</a></code> element: <a href="links.html#external-resource-link" title="external resource
|
|
link">Links to external resources</a> and <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a>. The <a href="links.html#linkTypes">link
|
|
types section</a> defines whether a particular link type is an
|
|
external resource or a hyperlink. One <code><a href="#the-link-element">link</a></code> element can
|
|
create multiple links (of which some might be external resource
|
|
links and some might be hyperlinks); exactly which and how many
|
|
links are created depends on the keywords given in the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute. User agents must process
|
|
the links on a per-link basis, not a per-element basis.</p><p class="note">Each link created for a <code><a href="#the-link-element">link</a></code> element is
|
|
handled separately. For instance, if there are two <code><a href="#the-link-element">link</a></code>
|
|
elements with <code title="">rel="stylesheet"</code>, they each
|
|
count as a separate external resource, and each is affected by its
|
|
own attributes independently. Similarly, if a single
|
|
<code><a href="#the-link-element">link</a></code> element has a <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute with the value <code title="">next stylesheet</code>, it creates both a
|
|
<a href="links.html#hyperlink">hyperlink</a> (for the <code title="rel-next"><a href="links.html#link-type-next">next</a></code>
|
|
keyword) and an <a href="links.html#external-resource-link">external resource link</a> (for the <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code> keyword), and they are
|
|
affected by other attributes (such as <code title="attr-link-media"><a href="#attr-link-media">media</a></code> or <code title="attr-link-title"><a href="#attr-link-title">title</a></code>) differently.</p><p>The exact behavior for links to external resources depends on the
|
|
exact relationship, as defined for the relevant link type. Some of
|
|
the attributes control whether or not the external resource is to be
|
|
applied (as defined below).</p><div class="impl">
|
|
|
|
<p>For external resources that are represented in the
|
|
DOM (for example, style sheets), the DOM representation must be made
|
|
available even if the resource is not applied. To <dfn id="concept-link-obtain" title="concept-link-obtain">obtain the resource</dfn>, the user
|
|
agent must run the following steps:</p>
|
|
|
|
<ol><li><p>If the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute's
|
|
value is the empty string, then abort these steps.</p></li>
|
|
|
|
<li><p><a href="urls.html#resolve-a-url" title="resolve a url">Resolve</a> the
|
|
<a href="urls.html#url">URL</a> given by the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute, relative to the
|
|
element.</p></li>
|
|
|
|
<li><p>If the previous step fails, then abort these steps.</p></li>
|
|
|
|
<li><p><a href="fetching-resources.html#fetch">Fetch</a> the resulting <a href="urls.html#absolute-url">absolute
|
|
URL</a>.</p></li>
|
|
|
|
</ol><p>User agents may opt to only try to obtain such resources when
|
|
they are needed, instead of pro-actively <a href="fetching-resources.html#fetch" title="fetch">fetching</a> all the external resources that are
|
|
not applied.</p>
|
|
|
|
<p>The semantics of the protocol used (e.g. HTTP) must be followed
|
|
when fetching external resources. (For example, redirects will be
|
|
followed and 404 responses will cause the external resource to not
|
|
be applied.)</p>
|
|
|
|
|
|
<p>Once the attempts to obtain the resource and its <a href="infrastructure.html#critical-subresources">critical
|
|
subresources</a> are complete, the user agent must, if the loads
|
|
were successful, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple
|
|
event</a> named <code title="event-load">load</code> at the
|
|
<code><a href="#the-link-element">link</a></code> element, or, if the resource or one of its
|
|
<a href="infrastructure.html#critical-subresources">critical subresources</a> failed to completely load for any
|
|
reason (e.g. DNS error, HTTP 404 response, a connection being
|
|
prematurely closed, unsupported Content-Type), <a href="webappapis.html#queue-a-task">queue a
|
|
task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-error">error</code> at the <code><a href="#the-link-element">link</a></code>
|
|
element. Non-network errors in processing the resource or its
|
|
subresources (e.g. CSS parse errors, PNG decoding errors) are not
|
|
failures for the purposes of this paragraph.</p>
|
|
|
|
<p>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <a href="webappapis.html#dom-manipulation-task-source">DOM manipulation task
|
|
source</a>.</p>
|
|
|
|
<p>The element must <a href="the-end.html#delay-the-load-event">delay the load event</a> of the
|
|
element's document until all the attempts to obtain the resource and
|
|
its <a href="infrastructure.html#critical-subresources">critical subresources</a> are complete. (Resources that
|
|
the user agent has not yet attempted to obtain, e.g. because it is
|
|
waiting for the resource to be needed, do not <a href="the-end.html#delay-the-load-event">delay the load
|
|
event</a>.)</p>
|
|
|
|
<hr><p id="linkui">Interactive user agents may provide users with a
|
|
means to <a href="links.html#following-hyperlinks" title="following hyperlinks">follow the
|
|
hyperlinks</a> created using the <code><a href="#the-link-element">link</a></code> element,
|
|
somewhere within their user interface. The exact interface is not
|
|
defined by this specification, but it could include the following
|
|
information (obtained from the element's attributes, again as
|
|
defined below), in some form or another (possibly simplified), for
|
|
each hyperlink created with each <code><a href="#the-link-element">link</a></code> element in the
|
|
document:</p>
|
|
|
|
<ul><li>The relationship between this document and the resource (given
|
|
by the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute)</li>
|
|
|
|
<li>The title of the resource (given by the <code title="attr-link-title"><a href="#attr-link-title">title</a></code> attribute).</li>
|
|
|
|
<li>The address of the resource (given by the <code title="attr-link-href"><a href="#attr-link-href">href</a></code> attribute).</li>
|
|
|
|
<li>The language of the resource (given by the <code title="attr-link-hreflang"><a href="#attr-link-hreflang">hreflang</a></code> attribute).</li>
|
|
|
|
<li>The optimum media for the resource (given by the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute).</li>
|
|
|
|
</ul><p>User agents could also include other information, such as the
|
|
type of the resource (as given by the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute).</p>
|
|
|
|
</div><p class="note">Hyperlinks created with the <code><a href="#the-link-element">link</a></code>
|
|
element and its <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute
|
|
apply to the whole page. This contrasts with the <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code> attribute of <code><a href="text-level-semantics.html#the-a-element">a</a></code>
|
|
and <code><a href="the-map-element.html#the-area-element">area</a></code> elements, which indicates the type of a link
|
|
whose context is given by the link's location within the
|
|
document.</p><p>The <dfn id="attr-link-media" title="attr-link-media"><code>media</code></dfn>
|
|
attribute says which media the resource applies to. The value must
|
|
be a <a href="common-microsyntaxes.html#valid-media-query">valid media query</a>.</p><div class="impl">
|
|
|
|
<p>If the link is a <a href="links.html#hyperlink">hyperlink</a> then the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute is purely advisory,
|
|
and describes for which media the document in question was
|
|
designed.</p>
|
|
|
|
<p>However, if the link is an <a href="links.html#external-resource-link">external resource link</a>,
|
|
then the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute is
|
|
prescriptive. The user agent must apply the external resource when
|
|
the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute's value
|
|
<a href="common-microsyntaxes.html#matches-the-environment">matches the environment</a> and the other relevant
|
|
conditions apply, and must not apply it otherwise.</p>
|
|
<p class="note">The external resource might have further
|
|
restrictions defined within that limit its applicability. For
|
|
example, a CSS style sheet might have some <code title="">@media</code> blocks. This specification does not override
|
|
such further restrictions or requirements.</p>
|
|
</div><p id="default-media">The default, if the <code title="attr-link-media"><a href="#attr-link-media">media</a></code> attribute is omitted, is "<code title="">all</code>", meaning that by default links apply to all
|
|
media.</p><p>The <dfn id="attr-link-hreflang" title="attr-link-hreflang"><code>hreflang</code></dfn>
|
|
attribute on the <code><a href="#the-link-element">link</a></code> element has the same semantics as
|
|
the <a href="links.html#attr-hyperlink-hreflang" title="attr-hyperlink-hreflang"><code>hreflang</code>
|
|
attribute on <code>a</code> and <code>area</code>
|
|
elements</a>.</p><p>The <dfn id="attr-link-type" title="attr-link-type"><code>type</code></dfn> attribute
|
|
gives the <a href="infrastructure.html#mime-type">MIME type</a> of the linked resource. It is
|
|
purely advisory. The value must be a <a href="infrastructure.html#valid-mime-type">valid MIME
|
|
type</a>.</p><p>For <a href="links.html#external-resource-link" title="external resource link">external resource
|
|
links</a>, the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute
|
|
is used as a hint to user agents so that they can avoid fetching
|
|
resources they do not support. <span class="impl">If the attribute
|
|
is present, then the user agent must assume that the resource is of
|
|
the given type (even if that is not a <a href="infrastructure.html#valid-mime-type">valid MIME type</a>,
|
|
e.g. the empty string). If the attribute is omitted, but the
|
|
external resource link type has a default type defined, then the
|
|
user agent must assume that the resource is of that type. If the UA
|
|
does not support the given <a href="infrastructure.html#mime-type">MIME type</a> for the given link
|
|
relationship, then the UA should not <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource; if the UA
|
|
does support the given <a href="infrastructure.html#mime-type">MIME type</a> for the given link
|
|
relationship, then the UA should <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource at the
|
|
appropriate time as specified for the <a href="links.html#external-resource-link">external resource
|
|
link</a>'s particular type. If the attribute is omitted, and the
|
|
external resource link type does not have a default type defined,
|
|
but the user agent would <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource if the type
|
|
was known and supported, then the user agent should <a href="#concept-link-obtain" title="concept-link-obtain">obtain</a> the resource under the
|
|
assumption that it will be supported.</span></p><div class="impl">
|
|
|
|
<p>User agents must not consider the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute authoritative —
|
|
upon fetching the resource, user agents must not use the <code title="attr-link-type"><a href="#attr-link-type">type</a></code> attribute to determine its actual
|
|
type. Only the actual type (as defined in the next paragraph) is
|
|
used to determine whether to <em>apply</em> the resource, not the
|
|
aforementioned assumed type.</p>
|
|
|
|
<p id="concept-link-type-sniffing">If the external resource link
|
|
type defines rules for processing the resource's <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a>, then those rules
|
|
apply. Otherwise, if the resource is expected to be an image, user
|
|
agents may apply the <a href="fetching-resources.html#content-type-sniffing:-image" title="Content-Type sniffing:
|
|
image">image sniffing rules</a>, with the <var title="">official
|
|
type</var> being the type determined from the resource's <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a>, and use the
|
|
resulting sniffed type of the resource as if it was the actual
|
|
type. Otherwise, if neither of these conditions apply or if the user
|
|
agent opts not to apply the image sniffing rules, then the user
|
|
agent must use the resource's <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a> to determine the
|
|
type of the resource. If there is no type metadata, but the external
|
|
resource link type has a default type defined, then the user agent
|
|
must assume that the resource is of that type.</p>
|
|
|
|
<p class="note">The <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code>
|
|
link type defines rules for processing the resource's <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a>.</p>
|
|
|
|
<p>Once the user agent has established the type of the resource, the
|
|
user agent must apply the resource if it is of a supported type and
|
|
the other relevant conditions apply, and must ignore the resource
|
|
otherwise.</p>
|
|
|
|
<div class="example">
|
|
|
|
<p>If a document contains style sheet links labeled as follows:</p>
|
|
|
|
<pre><link rel="stylesheet" href="A" type="text/plain">
|
|
<link rel="stylesheet" href="B" type="text/css">
|
|
<link rel="stylesheet" href="C"></pre>
|
|
|
|
<p>...then a compliant UA that supported only CSS style sheets
|
|
would fetch the B and C files, and skip the A file (since
|
|
<code>text/plain</code> is not the <a href="infrastructure.html#mime-type">MIME type</a> for CSS style
|
|
sheets).</p>
|
|
|
|
<p>For files B and C, it would then check the actual types returned
|
|
by the server. For those that are sent as <code>text/css</code>, it
|
|
would apply the styles, but for those labeled as
|
|
<code>text/plain</code>, or any other type, it would not.</p>
|
|
|
|
<p>If one of the two files was returned without a
|
|
<a href="fetching-resources.html#content-type">Content-Type</a> metadata, or with a syntactically
|
|
incorrect type like <code title="">Content-Type: "null"</code>, then the default type
|
|
for <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code> links would kick
|
|
in. Since that default type is <code title="">text/css</code>, the
|
|
style sheet <em>would</em> nonetheless be applied.</p>
|
|
|
|
</div>
|
|
|
|
</div><p>The <dfn id="attr-link-title" title="attr-link-title"><code>title</code></dfn>
|
|
attribute gives the title of the link. With one exception, it is
|
|
purely advisory. The value is text. The exception is for style sheet
|
|
links, where the <code title="attr-link-title"><a href="#attr-link-title">title</a></code>
|
|
attribute defines <span>alternative style sheet sets</span>.</p><p class="note">The <code title="attr-link-title"><a href="#attr-link-title">title</a></code>
|
|
attribute on <code><a href="#the-link-element">link</a></code> elements differs from the global
|
|
<code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute of most other
|
|
elements in that a link without a title does not inherit the title
|
|
of the parent element: it merely has no title.</p><p>The <code title="attr-link-sizes"><a href="links.html#attr-link-sizes">sizes</a></code> attribute is used
|
|
with the <code title="rel-icon"><a href="links.html#rel-icon">icon</a></code> link type. The attribute
|
|
must not be specified on <code><a href="#the-link-element">link</a></code> elements that do not have
|
|
a <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute that specifies
|
|
the <code title="rel-icon"><a href="links.html#rel-icon">icon</a></code> keyword.</p><div class="impl">
|
|
|
|
<p>HTTP <code title="">Link:</code> headers, if supported, must be
|
|
assumed to come before any links in the document, in the order that
|
|
they were given in the HTTP entity header. (URLs in these headers
|
|
are to be processed and resolved according to the rules given in the
|
|
relevant specification; the rules of <em>this</em> specification
|
|
don't apply.) <a href="references.html#refsHTTP">[HTTP]</a> <a href="references.html#refsWEBLINK">[WEBLINK]</a></p>
|
|
<p>The IDL attributes <dfn id="dom-link-href" title="dom-link-href"><code>href</code></dfn>, <dfn id="dom-link-rel" title="dom-link-rel"><code>rel</code></dfn>, <dfn id="dom-link-media" title="dom-link-media"><code>media</code></dfn>, <dfn id="dom-link-hreflang" title="dom-link-hreflang"><code>hreflang</code></dfn>, and <dfn id="dom-link-type" title="dom-link-type"><code>type</code></dfn>, and <dfn id="dom-link-sizes" title="dom-link-sizes"><code>sizes</code></dfn> each must
|
|
<a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
|
|
name.</p>
|
|
|
|
<p>The IDL attribute <dfn id="dom-link-rellist" title="dom-link-rellist"><code>relList</code></dfn> <span class="impl">must</span> <a href="common-dom-interfaces.html#reflect" title="reflect">reflect</a> the <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> content attribute.</p>
|
|
|
|
</div><p>The IDL attribute <dfn id="dom-link-disabled" title="dom-link-disabled"><code>disabled</code></dfn> only applies
|
|
to style sheet links. When the <code><a href="#the-link-element">link</a></code> element defines a
|
|
style sheet link, then the <code title="dom-link-disabled"><a href="#dom-link-disabled">disabled</a></code> attribute behaves as
|
|
defined <a href="#dom-linkstyle-disabled" title="dom-linkstyle-disabled">for the alternative
|
|
style sheets DOM</a>. For all other <code><a href="#the-link-element">link</a></code> elements it
|
|
always return false and does nothing on setting.</p><p>The <code>LinkStyle</code> interface is also implemented by
|
|
this element; the <a href="#styling">styling processing model</a> defines
|
|
how. <a href="references.html#refsCSSOM">[CSSOM]</a></p><div class="example">
|
|
|
|
<p>Here, a set of <code><a href="#the-link-element">link</a></code> elements provide some style
|
|
sheets:</p>
|
|
|
|
<pre><!-- a persistent style sheet -->
|
|
<link rel="stylesheet" href="default.css">
|
|
|
|
<!-- the preferred alternate style sheet -->
|
|
<link rel="stylesheet" href="green.css" title="Green styles">
|
|
|
|
<!-- some alternate style sheets -->
|
|
<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
|
|
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
|
|
<link rel="alternate stylesheet" href="wide.css" title="Wide screen"></pre>
|
|
|
|
</div><div class="example">
|
|
|
|
<p>The following example shows how you can specify versions of the
|
|
page that use alternative formats, are aimed at other languages,
|
|
and that are intended for other media:</p>
|
|
|
|
<pre><link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
|
|
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
|
|
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)">
|
|
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
|
|
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF">
|
|
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF"></pre>
|
|
|
|
</div><h4 id="the-meta-element"><span class="secno">4.2.5 </span>The <dfn id="meta"><code>meta</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>If the <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute is present, or if the element's <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute is in the <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration state</a>: in a <code><a href="#the-head-element">head</a></code> element.</dd>
|
|
<dd>If the <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute is present but not in the <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration state</a>: in a <code><a href="#the-head-element">head</a></code> element.</dd>
|
|
<dd>If the <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute is present but not in the <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration state</a>: in a <code><a href="scripting-1.html#the-noscript-element">noscript</a></code> element that is a child of a <code><a href="#the-head-element">head</a></code> element.</dd>
|
|
<dd>If the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute is present: where <a href="content-models.html#metadata-content">metadata content</a> is expected.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd>Empty.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd><code title="attr-meta-name"><a href="#attr-meta-name">name</a></code></dd>
|
|
<dd><code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code></dd>
|
|
<dd><code title="attr-meta-content"><a href="#attr-meta-content">content</a></code></dd>
|
|
<dd><code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code></dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>
|
|
<pre class="idl">interface <dfn id="htmlmetaelement">HTMLMetaElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
|
|
attribute DOMString <a href="#dom-meta-name" title="dom-meta-name">name</a>;
|
|
attribute DOMString <a href="#dom-meta-httpequiv" title="dom-meta-httpEquiv">httpEquiv</a>;
|
|
attribute DOMString <a href="#dom-meta-content" title="dom-meta-content">content</a>;
|
|
};</pre>
|
|
</dd>
|
|
</dl><p>The <code><a href="#the-meta-element">meta</a></code> element <a href="rendering.html#represents">represents</a> various
|
|
kinds of metadata that cannot be expressed using the
|
|
<code><a href="#the-title-element">title</a></code>, <code><a href="#the-base-element">base</a></code>, <code><a href="#the-link-element">link</a></code>,
|
|
<code><a href="#the-style-element">style</a></code>, and <code><a href="scripting-1.html#the-script-element">script</a></code> elements.</p><p>The <code><a href="#the-meta-element">meta</a></code> element can represent document-level
|
|
metadata with the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code>
|
|
attribute, pragma directives with the <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute, and the
|
|
file's <a href="#character-encoding-declaration">character encoding declaration</a> when an HTML
|
|
document is serialized to string form (e.g. for transmission over
|
|
the network or for disk storage) with the <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute.</p><p>Exactly one of the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code>,
|
|
<code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>, and <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attributes must be
|
|
specified.</p><p>If either <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> or <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> is specified, then
|
|
the <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute must
|
|
also be specified. Otherwise, it must be omitted.</p><p>The <dfn id="attr-meta-charset" title="attr-meta-charset"><code>charset</code></dfn>
|
|
attribute specifies the character encoding used by the
|
|
document. This is a <a href="#character-encoding-declaration">character encoding declaration</a>. If
|
|
the attribute is present in an <a href="dom.html#xml-documents" title="XML documents">XML
|
|
document</a>, its value must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII
|
|
case-insensitive</a> match for the string "<code title="">UTF-8</code>" (and the document is therefore forced to use
|
|
UTF-8 as its encoding).</p><p class="note">The <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code>
|
|
attribute on the <code><a href="#the-meta-element">meta</a></code> element has no effect in XML
|
|
documents, and is only allowed in order to facilitate migration to
|
|
and from XHTML.</p><p>There must not be more than one <code><a href="#the-meta-element">meta</a></code> element with a
|
|
<code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute per
|
|
document.</p><p>The <dfn id="attr-meta-content" title="attr-meta-content"><code>content</code></dfn>
|
|
attribute gives the value of the document metadata or pragma
|
|
directive when the element is used for those purposes. The allowed
|
|
values depend on the exact context, as described in subsequent
|
|
sections of this specification.</p><p>If a <code><a href="#the-meta-element">meta</a></code> element has a <dfn id="attr-meta-name" title="attr-meta-name"><code>name</code></dfn> attribute, it sets
|
|
document metadata. Document metadata is expressed in terms of
|
|
name/value pairs, the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code>
|
|
attribute on the <code><a href="#the-meta-element">meta</a></code> element giving the name, and the
|
|
<code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute on the same
|
|
element giving the value. The name specifies what aspect of metadata
|
|
is being set; valid names and the meaning of their values are
|
|
described in the following sections. If a <code><a href="#the-meta-element">meta</a></code> element
|
|
has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute,
|
|
then the value part of the metadata name/value pair is the empty
|
|
string.</p><div class="impl">
|
|
|
|
<p>The <dfn id="dom-meta-name" title="dom-meta-name"><code>name</code></dfn> and <dfn id="dom-meta-content" title="dom-meta-content"><code>content</code></dfn> IDL attributes
|
|
must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
|
|
same name. The IDL attribute <dfn id="dom-meta-httpequiv" title="dom-meta-httpEquiv"><code>httpEquiv</code></dfn> must
|
|
<a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>.</p>
|
|
|
|
</div><h5 id="standard-metadata-names"><span class="secno">4.2.5.1 </span>Standard metadata names</h5><p>This specification defines a few names for the <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute of the
|
|
<code><a href="#the-meta-element">meta</a></code> element.</p><p>Names are case-insensitive<span class="impl">, and must be compared
|
|
in an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> manner</span>.</p><dl><dt><dfn id="meta-application-name" title="meta-application-name"><code>application-name</code></dfn></dt>
|
|
|
|
<dd><p>The value must be a short free-form string giving the name
|
|
of the Web application that the page represents. If the page is not
|
|
a Web application, the <code title="meta-application-name"><a href="#meta-application-name">application-name</a></code> metadata name
|
|
must not be used. There must not be more than one <code><a href="#the-meta-element">meta</a></code>
|
|
element with its <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute
|
|
set to the value <code title="meta-application-name"><a href="#meta-application-name">application-name</a></code> per
|
|
document. <span class="impl">User agents may use the application
|
|
name in UI in preference to the page's <code><a href="#the-title-element">title</a></code>, since
|
|
the title might include status messages and the like relevant to
|
|
the status of the page at a particular moment in time instead of
|
|
just being the name of the application.</span></p></dd>
|
|
|
|
<dt><dfn id="meta-author" title="meta-author"><code>author</code></dfn></dt>
|
|
|
|
<dd><p>The value must be a free-form string giving the name of one
|
|
of the page's authors.</p></dd>
|
|
|
|
<dt><dfn id="meta-description" title="meta-description"><code>description</code></dfn></dt>
|
|
|
|
<dd><p>The value must be a free-form string that describes the
|
|
page. The value must be appropriate for use in a directory of
|
|
pages, e.g. in a search engine. There must not be more than one
|
|
<code><a href="#the-meta-element">meta</a></code> element with its <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute set to the value <code title="meta-description"><a href="#meta-description">description</a></code> per document.</p></dd>
|
|
|
|
<dt><dfn id="meta-generator" title="meta-generator"><code>generator</code></dfn></dt>
|
|
|
|
<dd>
|
|
|
|
<p>The value must be a free-form string that identifies one of the
|
|
software packages used to generate the document. This value must
|
|
not be used on hand-authored pages.</p>
|
|
|
|
<div class="example">
|
|
|
|
<p>Here is what a tool called "Frontweaver" could include in its
|
|
output, in the page's <code><a href="#the-head-element">head</a></code> element, to identify
|
|
itself as the tool used to generate the page:</p>
|
|
|
|
<pre><meta name=generator content="Frontweaver 8.2"></pre>
|
|
|
|
</div>
|
|
|
|
</dd>
|
|
|
|
<dt><dfn id="meta-keywords" title="meta-keywords"><code>keywords</code></dfn></dt>
|
|
|
|
<dd>
|
|
|
|
<p>The value must be a <a href="common-microsyntaxes.html#set-of-comma-separated-tokens">set of comma-separated tokens</a>,
|
|
each of which is a keyword relevant to the page.</p>
|
|
|
|
<div class="example">
|
|
|
|
<p>This page about typefaces on British motorways uses a
|
|
<code><a href="#the-meta-element">meta</a></code> element to specify some keywords that users
|
|
might use to look for the page:</p>
|
|
|
|
<pre><!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Typefaces on UK motorways</title>
|
|
<meta name="keywords" content="british,type face,font,fonts,highway,highways">
|
|
</head>
|
|
<body>
|
|
...</pre>
|
|
|
|
</div>
|
|
|
|
<p class="note">Many search engines do not consider such keywords,
|
|
because this feature has historically been used unreliably and
|
|
even misleadingly as a way to spam search engine results in a way
|
|
that is not helpful for users.</p>
|
|
|
|
<div class="impl">
|
|
|
|
<p>To obtain the list of keywords that the author has specified as
|
|
applicable to the page, the user agent must run the following
|
|
steps:</p>
|
|
|
|
<ol><li><p>Let <var title="">keywords</var> be an empty
|
|
list.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>For each <code><a href="#the-meta-element">meta</a></code> element with a <code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute and a <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute and whose
|
|
<code title="attr-meta-name"><a href="#attr-meta-name">name</a></code> attribute's value is
|
|
<code title="meta-keywords"><a href="#meta-keywords">keywords</a></code>, run the following
|
|
substeps:</p>
|
|
|
|
<ol><li><p><a href="common-microsyntaxes.html#split-a-string-on-commas" title="split a string on commas">Split the value
|
|
of the element's <code title="attr-meta-content">content</code>
|
|
attribute on commas</a>.</p></li>
|
|
|
|
<li><p>Add the resulting tokens, if any, to <var title="">keywords</var>.</p></li>
|
|
|
|
</ol></li>
|
|
|
|
<li><p>Remove any duplicates from <var title="">keywords</var>.</p></li>
|
|
|
|
<li><p>Return <var title="">keywords</var>. This is the list of
|
|
keywords that the author has specified as applicable to the
|
|
page.</p></li>
|
|
|
|
</ol><p>User agents should not use this information when there is
|
|
insufficient confidence in the reliability of the value.</p>
|
|
|
|
<p class="example">For instance, it would be reasonable for a
|
|
content management system to use the keyword information of pages
|
|
within the system to populate the index of a site-specific search
|
|
engine, but a large-scale content aggregator that used this
|
|
information would likely find that certain users would try to game
|
|
its ranking mechanism through the use of inappropriate
|
|
keywords.</p>
|
|
|
|
</div>
|
|
|
|
</dd>
|
|
|
|
</dl><h5 id="other-metadata-names"><span class="secno">4.2.5.2 </span>Other metadata names</h5><p><dfn id="concept-meta-extensions" title="concept-meta-extensions">Extensions to the predefined
|
|
set of metadata names</dfn> may be registered in the <a href="http://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki
|
|
MetaExtensions page</a>. <a href="references.html#refsWHATWGWIKI">[WHATWGWIKI]</a></p><p>Anyone is free to edit the WHATWG Wiki MetaExtensions page at any
|
|
time to add a type. These new names must be specified with the
|
|
following information:</p><dl><dt>Keyword</dt>
|
|
|
|
<dd><p>The actual name being defined. The name should not be
|
|
confusingly similar to any other defined name (e.g. differing only
|
|
in case).</p></dd>
|
|
|
|
|
|
<dt>Brief description</dt>
|
|
|
|
<dd><p>A short non-normative description of what the metadata
|
|
name's meaning is, including the format the value is required to be
|
|
in.</p></dd>
|
|
|
|
|
|
<dt>Specification</dt>
|
|
|
|
<dd>A link to a more detailed description of the metadata name's
|
|
semantics and requirements. It could be another page on the Wiki,
|
|
or a link to an external page.</dd>
|
|
|
|
|
|
<dt>Synonyms</dt>
|
|
|
|
<dd><p>A list of other names that have exactly the same processing
|
|
requirements. Authors should not use the names defined to be
|
|
synonyms, they are only intended to allow user agents to support
|
|
legacy content. Anyone may remove synonyms that are not used in
|
|
practice; only names that need to be processed as synonyms for
|
|
compatibility with legacy content are to be registered in this
|
|
way.</p></dd>
|
|
|
|
|
|
<dt>Status</dt>
|
|
|
|
<dd>
|
|
|
|
<p>One of the following:</p>
|
|
|
|
<dl><dt>Proposed</dt>
|
|
|
|
<dd>The name has not received wide peer review and
|
|
approval. Someone has proposed it and is, or soon will be, using
|
|
it.</dd>
|
|
|
|
<dt>Ratified</dt>
|
|
|
|
<dd>The name has received wide peer review and approval. It has a
|
|
specification that unambiguously defines how to handle pages that
|
|
use the name, including when they use it in incorrect ways.</dd>
|
|
|
|
<dt>Discontinued</dt>
|
|
|
|
<dd>The metadata name has received wide peer review and it has
|
|
been found wanting. Existing pages are using this metadata name,
|
|
but new pages should avoid it. The "brief description" and
|
|
"specification" entries will give details of what authors should
|
|
use instead, if anything.</dd>
|
|
|
|
</dl><p>If a metadata name is found to be redundant with existing
|
|
values, it should be removed and listed as a synonym for the
|
|
existing value.</p>
|
|
|
|
<p>If a metadata name is registered in the "proposed" state for a
|
|
period of a month or more without being used or specified, then it
|
|
may be removed from the registry.</p>
|
|
|
|
<p>If a metadata name is added with the "proposed" status and
|
|
found to be redundant with existing values, it should be removed
|
|
and listed as a synonym for the existing value. If a metadata name
|
|
is added with the "proposed" status and found to be harmful, then
|
|
it should be changed to "discontinued" status.</p>
|
|
|
|
<p>Anyone can change the status at any time, but should only do so
|
|
in accordance with the definitions above.</p>
|
|
|
|
</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>Conformance checkers must use the information given on the WHATWG
|
|
Wiki MetaExtensions page to establish if a value is allowed or not:
|
|
values defined in this specification or marked as "proposed" or
|
|
"ratified" must be accepted, whereas values marked as "discontinued"
|
|
or not listed in either this specification or on the aforementioned
|
|
page must be rejected as invalid. Conformance checkers may cache
|
|
this information (e.g. for performance reasons or to avoid the use
|
|
of unreliable network connectivity).</p>
|
|
|
|
<p>When an author uses a new metadata name not defined by either
|
|
this specification or the Wiki page, conformance checkers should
|
|
offer to add the value to the Wiki, with the details described
|
|
above, with the "proposed" status.</p>
|
|
|
|
</div><p>Metadata names whose values are to be <a href="urls.html#url" title="URL">URLs</a> must not be proposed or accepted. Links must
|
|
be represented using the <code><a href="#the-link-element">link</a></code> element, not the
|
|
<code><a href="#the-meta-element">meta</a></code> element.</p><h5 id="pragma-directives"><span class="secno">4.2.5.3 </span>Pragma directives</h5><p>When the <dfn id="attr-meta-http-equiv" title="attr-meta-http-equiv"><code>http-equiv</code></dfn> attribute
|
|
is specified on a <code><a href="#the-meta-element">meta</a></code> element, the element is a pragma
|
|
directive.</p><p>The <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>
|
|
attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The following
|
|
table lists the keywords defined for this attribute. The states
|
|
given in the first cell of the rows with keywords give the states to
|
|
which those keywords map. <span class="impl">Some of the keywords
|
|
are non-conforming, as noted in the last column.</span></p><table id="table-http-equiv"><thead><tr><th>State
|
|
</th><th>Keyword
|
|
</th><th>Notes
|
|
</th></tr></thead><tbody><tr class="impl"><td><a href="#attr-meta-http-equiv-content-language" title="attr-meta-http-equiv-content-language">Content Language</a>
|
|
</td><td><code title="">content-language</code>
|
|
</td><td>Non-conforming
|
|
</td></tr><tr><td><a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration</a>
|
|
</td><td><code title="">content-type</code>
|
|
</td><td>
|
|
</td></tr><tr><td><a href="#attr-meta-http-equiv-default-style" title="attr-meta-http-equiv-default-style">Default style</a>
|
|
</td><td><code title="">default-style</code>
|
|
</td><td>
|
|
</td></tr><tr><td><a href="#attr-meta-http-equiv-refresh" title="attr-meta-http-equiv-refresh">Refresh</a>
|
|
</td><td><code title="">refresh</code>
|
|
</td><td>
|
|
</td></tr><tr class="impl"><td><a href="#attr-meta-http-equiv-set-cookie" title="attr-meta-http-equiv-set-cookie">Cookie setter</a>
|
|
</td><td><code title="">set-cookie</code>
|
|
</td><td>Non-conforming
|
|
</td></tr></tbody></table><div class="impl">
|
|
|
|
<p>When a <code><a href="#the-meta-element">meta</a></code> element is <a href="infrastructure.html#insert-an-element-into-a-document" title="insert an
|
|
element into a document">inserted into the document</a>, if its
|
|
<code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute is
|
|
present and represents one of the above states, then the user agent
|
|
must run the algorithm appropriate for that state, as described in
|
|
the following list:</p>
|
|
|
|
</div><dl><dt class="impl"><dfn id="attr-meta-http-equiv-content-language" title="attr-meta-http-equiv-content-language">Content language state</dfn> (<code title="">http-equiv="content-language"</code>)
|
|
|
|
</dt><dd class="impl">
|
|
|
|
<p class="note">This feature is non-conforming. Authors are
|
|
encouraged to use the <code title="attr-lang"><a href="elements.html#attr-lang">lang</a></code>
|
|
attribute instead.</p>
|
|
|
|
<p>This pragma sets the <dfn id="pragma-set-default-language">pragma-set default
|
|
language</dfn>. Until the pragma is successfully processed, there
|
|
is no <a href="#pragma-set-default-language">pragma-set default language</a>.</p>
|
|
|
|
<ol><li><p>If another <code><a href="#the-meta-element">meta</a></code> element with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
|
|
<a href="#attr-meta-http-equiv-content-language" title="attr-meta-http-equiv-content-language">Content
|
|
Language state</a> has already been successfully processed
|
|
(i.e. when it was inserted the user agent processed it and
|
|
reached the last step of this list of steps), then abort these
|
|
steps.</p></li>
|
|
|
|
<li><p>If the <code><a href="#the-meta-element">meta</a></code> element has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute, or if that
|
|
attribute's value is the empty string, then abort these
|
|
steps.</p></li>
|
|
|
|
<li><p>If the element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute contains a
|
|
U+002C COMMA character (,) then abort these steps.</p></li>
|
|
<li><p>Let <var title="">input</var> be the value of the
|
|
element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code>
|
|
attribute.</p></li>
|
|
|
|
<li><p>Let <var title="">position</var> point at the first
|
|
character of <var title="">input</var>.</p></li>
|
|
|
|
<li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>
|
|
|
|
<li><p><a href="common-microsyntaxes.html#collect-a-sequence-of-characters" title="collect a sequence of characters">Collect a
|
|
sequence of characters</a> that are not <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>.</p></li>
|
|
|
|
<li><p>Let the <a href="#pragma-set-default-language">pragma-set default language</a> be the
|
|
string that resulted from the previous step.</p></li>
|
|
|
|
</ol><p class="note">This pragma is not exactly equivalent to the HTTP
|
|
<code>Content-Language</code> header. <a href="references.html#refsHTTP">[HTTP]</a></p>
|
|
|
|
</dd>
|
|
|
|
<dt><dfn id="attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration state</dfn> (<code title="">http-equiv="content-type"</code>)
|
|
|
|
</dt><dd>
|
|
|
|
<p>The <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding
|
|
declaration state</a> is just an alternative form of setting
|
|
the <code title="meta-charset">charset</code> attribute: it is a
|
|
<a href="#character-encoding-declaration">character encoding declaration</a>. <span class="impl">This state's user agent requirements are all handled
|
|
by the parsing section of the specification.</span></p>
|
|
|
|
<p>For <code><a href="#the-meta-element">meta</a></code> elements with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
|
|
<a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding
|
|
declaration state</a>, the <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute must have a
|
|
value that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for a
|
|
string that consists of: the literal string "<code title="">text/html;</code>", optionally followed by any number of
|
|
<a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, followed by
|
|
the literal string "<code title="">charset=</code>", followed by
|
|
the character encoding name of the <a href="#character-encoding-declaration">character encoding
|
|
declaration</a>.</p>
|
|
|
|
<p>A document must not contain both a <code><a href="#the-meta-element">meta</a></code> element
|
|
with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code>
|
|
attribute in the <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration
|
|
state</a> and a <code><a href="#the-meta-element">meta</a></code> element with the <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute present.</p>
|
|
|
|
<p>The <a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding
|
|
declaration state</a> may be used in <a href="dom.html#html-documents">HTML
|
|
documents</a>, but elements with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in that
|
|
state must not be used in <a href="dom.html#xml-documents">XML documents</a>.</p>
|
|
|
|
</dd>
|
|
|
|
<dt><dfn id="attr-meta-http-equiv-default-style" title="attr-meta-http-equiv-default-style">Default style state</dfn> (<code title="">http-equiv="default-style"</code>)
|
|
|
|
</dt><dd>
|
|
|
|
<p>This pragma sets the name of the default <span title="alternative style sheet sets">alternative style sheet
|
|
set</span>.</p>
|
|
|
|
<div class="impl">
|
|
|
|
<ol><li><p>If the <code><a href="#the-meta-element">meta</a></code> element has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute, or if that
|
|
attribute's value is the empty string, then abort these
|
|
steps.</p></li>
|
|
|
|
<li><p>Set the <span>preferred style sheet set</span> to the
|
|
value of the element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute. <a href="references.html#refsCSSOM">[CSSOM]</a></p></li>
|
|
|
|
</ol></div>
|
|
|
|
</dd>
|
|
|
|
<dt><dfn id="attr-meta-http-equiv-refresh" title="attr-meta-http-equiv-refresh">Refresh state</dfn> (<code title="">http-equiv="refresh"</code>)
|
|
|
|
</dt><dd>
|
|
|
|
<p>This pragma acts as timed redirect.</p>
|
|
|
|
<div class="impl">
|
|
|
|
<ol><li><p>If another <code><a href="#the-meta-element">meta</a></code> element with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
|
|
<a href="#attr-meta-http-equiv-refresh" title="attr-meta-http-equiv-refresh">Refresh state</a>
|
|
has already been successfully processed (i.e. when it was
|
|
inserted the user agent processed it and reached the last step of
|
|
this list of steps), then abort these steps.</p></li>
|
|
|
|
<li><p>If the <code><a href="#the-meta-element">meta</a></code> element has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute, or if that
|
|
attribute's value is the empty string, then abort these
|
|
steps.</p></li>
|
|
|
|
<li><p>Let <var title="">input</var> be the value of the
|
|
element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code>
|
|
attribute.</p></li>
|
|
|
|
<li><p>Let <var title="">position</var> point at the first
|
|
character of <var title="">input</var>.</p></li>
|
|
|
|
<li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>
|
|
|
|
<li><p><a href="common-microsyntaxes.html#collect-a-sequence-of-characters" title="collect a sequence of characters">Collect a
|
|
sequence of characters</a> in the range U+0030 DIGIT ZERO (0)
|
|
to U+0039 DIGIT NINE (9), and parse the resulting string using
|
|
the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a>. If the
|
|
sequence of characters collected is the empty string, then no
|
|
number will have been parsed; abort these steps. Otherwise, let
|
|
<var title="">time</var> be the parsed number.</p></li>
|
|
|
|
<li><p><a href="common-microsyntaxes.html#collect-a-sequence-of-characters" title="collect a sequence of characters">Collect a
|
|
sequence of characters</a> in the range U+0030 DIGIT ZERO (0) to
|
|
U+0039 DIGIT NINE (9) and U+002E FULL STOP (.). Ignore any collected
|
|
characters.</p></li>
|
|
|
|
<li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>
|
|
|
|
<li><p>Let <var title="">url</var> be the address of the current
|
|
page.</p></li>
|
|
|
|
<li><p>If the character in <var title="">input</var> pointed to
|
|
by <var title="">position</var> is a U+003B SEMICOLON ("<code title="">;</code>"), then advance <var title="">position</var> to
|
|
the next character. Otherwise, jump to the last step.</p></li>
|
|
|
|
<li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>
|
|
|
|
<li><p>If the character in <var title="">input</var> pointed to
|
|
by <var title="">position</var> is a U+0055 LATIN CAPITAL LETTER
|
|
U character (U) or a U+0075 LATIN SMALL LETTER U character (u),
|
|
then advance <var title="">position</var> to the next
|
|
character. Otherwise, jump to the last step.</p></li>
|
|
|
|
<li><p>If the character in <var title="">input</var> pointed to
|
|
by <var title="">position</var> is a U+0052 LATIN CAPITAL LETTER
|
|
R character (R) or a U+0072 LATIN SMALL LETTER R character (r),
|
|
then advance <var title="">position</var> to the next
|
|
character. Otherwise, jump to the last step.</p></li>
|
|
|
|
<li><p>If the character in <var title="">input</var> pointed to
|
|
by <var title="">position</var> is s U+004C LATIN CAPITAL LETTER
|
|
L character (L) or a U+006C LATIN SMALL LETTER L character (l),
|
|
then advance <var title="">position</var> to the next
|
|
character. Otherwise, jump to the last step.</p></li>
|
|
|
|
<li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>
|
|
|
|
<li><p>If the character in <var title="">input</var> pointed to
|
|
by <var title="">position</var> is a U+003D EQUALS SIGN ("<code title="">=</code>"), then advance <var title="">position</var> to
|
|
the next character. Otherwise, jump to the last step.</p></li>
|
|
|
|
<li><p><a href="common-microsyntaxes.html#skip-whitespace">Skip whitespace</a>.</p></li>
|
|
|
|
<li><p>If the character in <var title="">input</var> pointed to
|
|
by <var title="">position</var> is either a U+0027 APOSTROPHE
|
|
character (') or U+0022 QUOTATION MARK character ("), then let
|
|
<var title="">quote</var> be that character, and advance <var title="">position</var> to the next character. Otherwise, let
|
|
<var title="">quote</var> be the empty string.</p></li>
|
|
|
|
<li><p>Let <var title="">url</var> be equal to the substring of
|
|
<var title="">input</var> from the character at <var title="">position</var> to the end of the string.</p></li>
|
|
|
|
<li><p>If <var title="">quote</var> is not the empty string, and
|
|
there is a character in <var title="">url</var> equal to <var title="">quote</var>, then truncate <var title="">url</var> at
|
|
that character, so that it and all subsequent characters are
|
|
removed.</p>
|
|
|
|
</li><li><p>Strip any trailing <a href="common-microsyntaxes.html#space-character" title="space character">space
|
|
characters</a> from the end of <var title="">url</var>.</p></li>
|
|
|
|
<li><p>Strip any U+0009 CHARACTER TABULATION (tab), U+000A LINE
|
|
FEED (LF), and U+000D CARRIAGE RETURN (CR) characters from <var title="">url</var>.</p></li>
|
|
|
|
<li><p><a href="urls.html#resolve-a-url" title="resolve a url">Resolve</a> the <var title="">url</var> value to an <a href="urls.html#absolute-url">absolute URL</a>,
|
|
relative to the <code><a href="#the-meta-element">meta</a></code> element. If this fails, abort
|
|
these steps.</p></li>
|
|
|
|
<li>
|
|
|
|
<p>Perform one or more of the following steps:</p>
|
|
|
|
<ul><li>
|
|
|
|
<p>After the refresh has come due (as defined below), if the
|
|
user has not canceled the redirect and if the
|
|
<code><a href="#the-meta-element">meta</a></code> element's <code><a href="infrastructure.html#document">Document</a></code>'s
|
|
<a href="browsers.html#browsing-context">browsing context</a> did not have the <a href="the-iframe-element.html#sandboxed-automatic-features-browsing-context-flag">sandboxed
|
|
automatic features browsing context flag</a> set when the
|
|
<code><a href="infrastructure.html#document">Document</a></code> was created, <a href="history.html#navigate" title="navigate">navigate</a> the
|
|
<code><a href="infrastructure.html#document">Document</a></code>'s <a href="browsers.html#browsing-context">browsing context</a> to <var title="">url</var>, with <a href="history.html#replacement-enabled">replacement enabled</a>, and
|
|
with the <code><a href="infrastructure.html#document">Document</a></code>'s <a href="browsers.html#browsing-context">browsing context</a>
|
|
as the <a href="history.html#source-browsing-context">source browsing context</a>.</p>
|
|
|
|
<p>For the purposes of the previous paragraph, a refresh is
|
|
said to have come due as soon as the <em>later</em> of the
|
|
following two conditions occurs:</p>
|
|
|
|
<ul><li>At least <var title="">time</var> seconds have elapsed
|
|
since the document has <a href="the-end.html#completely-loaded">completely loaded</a>,
|
|
adjusted to take into account user or user agent
|
|
preferences.</li>
|
|
|
|
|
|
<li>At least <var title="">time</var> seconds have elapsed
|
|
since the <code><a href="#the-meta-element">meta</a></code> element was <a href="infrastructure.html#insert-an-element-into-a-document" title="insert
|
|
an element into a document">inserted into the
|
|
<code>Document</code></a>, adjusted to take into account
|
|
user or user agent preferences.</li>
|
|
|
|
|
|
</ul></li>
|
|
|
|
<li><p>Provide the user with an interface that, when selected,
|
|
<a href="history.html#navigate" title="navigate">navigates</a> a <a href="browsers.html#browsing-context">browsing context</a> to <var title="">url</var>, with the document's browsing context as the
|
|
<a href="history.html#source-browsing-context">source browsing context</a>.</p></li>
|
|
|
|
<li><p>Do nothing.</p></li>
|
|
|
|
</ul><p>In addition, the user agent may, as with anything, inform the
|
|
user of any and all aspects of its operation, including the
|
|
state of any timers, the destinations of any timed redirects,
|
|
and so forth.</p>
|
|
|
|
</li>
|
|
|
|
</ol></div>
|
|
|
|
<p>For <code><a href="#the-meta-element">meta</a></code> elements with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
|
|
<a href="#attr-meta-http-equiv-refresh" title="attr-meta-http-equiv-refresh">Refresh state</a>,
|
|
the <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute must
|
|
have a value consisting either of:</p>
|
|
|
|
<ul><li>just a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative integer</a>, or</li>
|
|
|
|
<li>a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative integer</a>, followed by a
|
|
U+003B SEMICOLON character (;), followed by one or more <a href="common-microsyntaxes.html#space-character" title="space character">space characters</a>, followed by a
|
|
substring that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match
|
|
for the string "<code title="">URL</code>", followed by a U+003D
|
|
EQUALS SIGN character (=), followed by a <a href="urls.html#valid-url">valid URL</a>
|
|
that does not start with a literal U+0027 APOSTROPHE (') or
|
|
U+0022 QUOTATION MARK (") character.</li>
|
|
|
|
</ul><p>In the former case, the integer represents a number of seconds
|
|
before the page is to be reloaded; in the latter case the integer
|
|
represents a number of seconds before the page is to be replaced
|
|
by the page at the given <a href="urls.html#url">URL</a>.</p>
|
|
|
|
<div class="example">
|
|
|
|
<p>A news organization's front page could include the following
|
|
markup in the page's <code><a href="#the-head-element">head</a></code> element, to ensure that
|
|
the page automatically reloads from the server every five
|
|
minutes:</p>
|
|
|
|
<pre><meta http-equiv="Refresh" content="300"></pre>
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
|
|
<p>A sequence of pages could be used as an automated slide show
|
|
by making each page refresh to the next page in the sequence,
|
|
using markup such as the following:</p>
|
|
|
|
<pre><meta http-equiv="Refresh" content="20; URL=page4.html"></pre>
|
|
|
|
</div>
|
|
|
|
</dd>
|
|
|
|
<dt class="impl"><dfn id="attr-meta-http-equiv-set-cookie" title="attr-meta-http-equiv-set-cookie">Cookie setter</dfn> (<code title="">http-equiv="set-cookie"</code>)
|
|
|
|
</dt><dd class="impl">
|
|
|
|
<p>This pragma sets an HTTP cookie. <a href="references.html#refsCOOKIES">[COOKIES]</a></p>
|
|
|
|
<p>It is non-conforming. Real HTTP headers should be used instead.</p>
|
|
|
|
<ol><li><p>If the <code><a href="#the-meta-element">meta</a></code> element has no <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute, or if that
|
|
attribute's value is the empty string, then abort these
|
|
steps.</p></li>
|
|
|
|
<li><p><a href="webappapis.html#obtain-the-storage-mutex">Obtain the storage mutex</a>.</p></li>
|
|
|
|
<li><p>Act as if <span title="receives a
|
|
set-cookie-string">receiving a set-cookie-string</span> for
|
|
<a href="dom.html#the-document-s-address">the document's address</a> via a "non-HTTP" API,
|
|
consisting of the value of the element's <code title="attr-meta-content"><a href="#attr-meta-content">content</a></code> attribute encoded as
|
|
UTF-8. <a href="references.html#refsCOOKIES">[COOKIES]</a> <a href="references.html#refsRFC3629">[RFC3629]</a></p></li>
|
|
|
|
</ol></dd>
|
|
|
|
</dl><p>There must not be more than one <code><a href="#the-meta-element">meta</a></code> element with
|
|
any particular state in the document at a time.</p><h5 id="other-pragma-directives"><span class="secno">4.2.5.4 </span>Other pragma directives</h5><p><dfn id="concept-http-equiv-extensions" title="concept-http-equiv-extensions">Extensions to the
|
|
predefined set of pragma directives</dfn> may, under certain
|
|
conditions, be registered in the <a href="http://wiki.whatwg.org/wiki/PragmaExtensions">WHATWG Wiki
|
|
PragmaExtensions page</a>. <a href="references.html#refsWHATWGWIKI">[WHATWGWIKI]</a></p><p>Such extensions must use a name that is identical to an HTTP
|
|
header registered in the Permanent Message Header Field Registry,
|
|
and must have behavior identical to that described for the HTTP
|
|
header. <a href="references.html#refsIANAPERMHEADERS">[IANAPERMHEADERS]</a></p><p>Pragma directives corresponding to headers describing metadata,
|
|
or not requiring specific user agent processing, must not be
|
|
registered; instead, use <a href="#concept-meta-extensions" title="concept-meta-extensions">metadata names</a>. Pragma
|
|
directives corresponding to headers that affect the HTTP processing
|
|
model (e.g. caching) must not be registered, as they would result in
|
|
HTTP-level behavior being different for user agents that implement
|
|
HTML than for user agents that do not.</p><p>Anyone is free to edit the WHATWG Wiki PragmaExtensions page at
|
|
any time to add a pragma directive satisfying these conditions. Such
|
|
registrations must specify the following information:</p><dl><dt>Keyword</dt>
|
|
|
|
<dd><p>The actual name being defined. The name must match a
|
|
previously-registered HTTP name with the same
|
|
requirements.</p></dd>
|
|
|
|
|
|
<dt>Brief description</dt>
|
|
|
|
<dd><p>A short non-normative description of the purpose of the
|
|
pragma directive.</p></dd>
|
|
|
|
|
|
<dt>Specification</dt>
|
|
|
|
<dd>A link to the specification defining the corresponding HTTP
|
|
header.</dd>
|
|
|
|
</dl><div class="impl">
|
|
|
|
<p>Conformance checkers must use the information given on the WHATWG
|
|
Wiki PragmaExtensions page to establish if a value is allowed or
|
|
not: values defined in this specification or listed on the
|
|
aforementioned page must be accepted, whereas values not listed in
|
|
either this specification or on the aforementioned page must be
|
|
rejected as invalid. Conformance checkers may cache this information
|
|
(e.g. for performance reasons or to avoid the use of unreliable
|
|
network connectivity).</p>
|
|
|
|
</div><h5 id="charset"><span class="secno">4.2.5.5 </span>Specifying the document's character encoding</h5><p>A <dfn id="character-encoding-declaration">character encoding declaration</dfn> is a mechanism by
|
|
which the character encoding used to store or transmit a document is
|
|
specified.</p><p>The following restrictions apply to character encoding
|
|
declarations:</p><ul><li>The character encoding name given must be the name of the
|
|
character encoding used to serialize the file.</li>
|
|
|
|
<li>The value must be a valid character encoding name, and must be
|
|
an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the
|
|
<a href="infrastructure.html#preferred-mime-name">preferred MIME name</a> for that encoding. <a href="references.html#refsIANACHARSET">[IANACHARSET]</a></li>
|
|
|
|
<li>The character encoding declaration must be serialized without
|
|
the use of <a href="syntax.html#syntax-charref" title="syntax-charref">character references</a>
|
|
or character escapes of any kind.</li>
|
|
|
|
<li id="charset1024"><span id="charset512" title="">The element
|
|
containing the character encoding declaration must be serialized
|
|
completely within the first 1024 bytes of the document.</span></li>
|
|
|
|
|
|
</ul><p>In addition, due to a number of restrictions on <code><a href="#the-meta-element">meta</a></code>
|
|
elements, there can only be one <code><a href="#the-meta-element">meta</a></code>-based character
|
|
encoding declaration per document.</p><p>If an <a href="dom.html#html-documents" title="HTML documents">HTML document</a> does not
|
|
start with a BOM, and if its encoding is not explicitly given by
|
|
<a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a>, and the
|
|
document is not <a href="the-iframe-element.html#an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a>, then the
|
|
character encoding used must be an <a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character
|
|
encoding</a>, and, in addition, if that encoding isn't US-ASCII
|
|
itself, then the encoding must be specified using a
|
|
<code><a href="#the-meta-element">meta</a></code> element with a <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute or a
|
|
<code><a href="#the-meta-element">meta</a></code> element with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
|
|
<a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration
|
|
state</a>.</p><p>If the document is <a href="the-iframe-element.html#an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a>, the
|
|
document must not have a <a href="#character-encoding-declaration">character encoding
|
|
declaration</a>. (In this case, the source is already decoded,
|
|
since it is part of the document that contained the
|
|
<code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>.)</p><p>If an <a href="dom.html#html-documents" title="HTML documents">HTML document</a> contains
|
|
a <code><a href="#the-meta-element">meta</a></code> element with a <code title="attr-meta-charset"><a href="#attr-meta-charset">charset</a></code> attribute or a
|
|
<code><a href="#the-meta-element">meta</a></code> element with an <code title="attr-meta-http-equiv"><a href="#attr-meta-http-equiv">http-equiv</a></code> attribute in the
|
|
<a href="#attr-meta-http-equiv-content-type" title="attr-meta-http-equiv-content-type">Encoding declaration
|
|
state</a>, then the character encoding used must be an
|
|
<a href="infrastructure.html#ascii-compatible-character-encoding">ASCII-compatible character encoding</a>.</p><p>Authors are encouraged to use UTF-8. Conformance checkers may
|
|
advise authors against using legacy encodings. <a href="references.html#refsRFC3629">[RFC3629]</a></p><div class="impl">
|
|
|
|
<p>Authoring tools should default to using UTF-8 for newly-created
|
|
documents. <a href="references.html#refsRFC3629">[RFC3629]</a></p>
|
|
|
|
</div><p>Encodings in which a series of bytes in the range 0x20 to 0x7E
|
|
can encode characters other than the corresponding characters in the
|
|
range U+0020 to U+007E represent a potential security vulnerability:
|
|
a user agent that does not support the encoding (or does not support
|
|
the label used to declare the encoding, or does not use the same
|
|
mechanism to detect the encoding of unlabelled content as another
|
|
user agent) might end up interpreting technically benign plain text
|
|
content as HTML tags and JavaScript. For example, this applies to
|
|
encodings in which the bytes corresponding to "<code title=""><script></code>" in ASCII can encode a different
|
|
string. Authors should not use such encodings, which are known to
|
|
include JIS_C6226-1983,
|
|
JIS_X0212-1990, HZ-GB-2312, JOHAB (Windows code
|
|
page 1361), encodings based on ISO-2022, and encodings based on EBCDIC. Furthermore, authors must not
|
|
use the CESU-8, UTF-7, BOCU-1 and SCSU encodings, which also fall
|
|
into this category, because these encodings were never intended for
|
|
use for Web content.
|
|
<a href="references.html#refsRFC1345">[RFC1345]</a>
|
|
<a href="references.html#refsRFC1842">[RFC1842]</a><!-- HZ-GB-2312 -->
|
|
<a href="references.html#refsRFC1468">[RFC1468]</a><!-- ISO-2022-JP -->
|
|
<a href="references.html#refsRFC2237">[RFC2237]</a><!-- ISO-2022-JP-1 -->
|
|
<a href="references.html#refsRFC1554">[RFC1554]</a><!-- ISO-2022-JP-2 -->
|
|
<a href="references.html#refsRFC1922">[RFC1922]</a>
|
|
<a href="references.html#refsRFC1557">[RFC1557]</a><!-- ISO-2022-KR -->
|
|
<a href="references.html#refsCESU8">[CESU8]</a>
|
|
<a href="references.html#refsUTF7">[UTF7]</a>
|
|
<a href="references.html#refsBOCU1">[BOCU1]</a>
|
|
<a href="references.html#refsSCSU">[SCSU]</a>
|
|
|
|
</p><p>Authors should not use UTF-32, as the encoding detection
|
|
algorithms described in this specification intentionally do not
|
|
distinguish it from UTF-16. <a href="references.html#refsUNICODE">[UNICODE]</a></p><p class="note">Using non-UTF-8 encodings can have unexpected
|
|
results on form submission and URL encodings, which use the
|
|
<a href="dom.html#document-s-character-encoding">document's character encoding</a> by default.</p><p>In XHTML, the XML declaration should be used for inline character
|
|
encoding information, if necessary.</p><div class="example">
|
|
|
|
<p>In HTML, to declare that the character encoding is UTF-8, the
|
|
author could include the following markup near the top of the
|
|
document (in the <code><a href="#the-head-element">head</a></code> element):</p>
|
|
|
|
<pre><meta charset="utf-8"></pre>
|
|
|
|
<p>In XML, the XML declaration would be used instead, at the very
|
|
top of the markup:</p>
|
|
|
|
<pre><?xml version="1.0" encoding="utf-8"?></pre>
|
|
|
|
</div><h4 id="the-style-element"><span class="secno">4.2.6 </span>The <dfn><code>style</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
|
|
<dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
|
|
<dd>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is present: <a href="content-models.html#flow-content">flow content</a>.</dd>
|
|
<dt>Contexts in which this element can be used:</dt>
|
|
<dd>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is absent: where <a href="content-models.html#metadata-content">metadata content</a> is expected.</dd>
|
|
<dd>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is absent: in a <code><a href="scripting-1.html#the-noscript-element">noscript</a></code> element that is a child of a <code><a href="#the-head-element">head</a></code> element.</dd>
|
|
<dd>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is present: where <a href="content-models.html#flow-content">flow content</a> is expected, but before any other <a href="content-models.html#flow-content">flow content</a> other than other <code><a href="#the-style-element">style</a></code> elements and <a href="content-models.html#inter-element-whitespace">inter-element whitespace</a>.</dd>
|
|
<dt>Content model:</dt>
|
|
<dd>Depends on the value of the <code title="attr-style-type"><a href="#attr-style-type">type</a></code> attribute, but must match requirements described in prose below.</dd>
|
|
<dt>Content attributes:</dt>
|
|
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
|
|
<dd><code title="attr-style-media"><a href="#attr-style-media">media</a></code></dd>
|
|
<dd><code title="attr-style-type"><a href="#attr-style-type">type</a></code></dd>
|
|
<dd><code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code></dd>
|
|
<dd>Also, the <code title="attr-style-title"><a href="#attr-style-title">title</a></code> attribute has special semantics on this element.</dd>
|
|
<dt>DOM interface:</dt>
|
|
<dd>
|
|
<pre class="idl">interface <dfn id="htmlstyleelement">HTMLStyleElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
|
|
attribute boolean <a href="#dom-style-disabled" title="dom-style-disabled">disabled</a>;
|
|
attribute DOMString <a href="#dom-style-media" title="dom-style-media">media</a>;
|
|
attribute DOMString <a href="#dom-style-type" title="dom-style-type">type</a>;
|
|
attribute boolean <a href="#dom-style-scoped" title="dom-style-scoped">scoped</a>;
|
|
};
|
|
<a href="#htmlstyleelement">HTMLStyleElement</a> implements <span>LinkStyle</span>;</pre>
|
|
</dd>
|
|
</dl><p>The <code><a href="#the-style-element">style</a></code> element allows authors to embed style
|
|
information in their documents. The <code><a href="#the-style-element">style</a></code> element is
|
|
one of several inputs to the <a href="#styling">styling processing
|
|
model</a>. The element does not <a href="rendering.html#represents" title="represents">represent</a> content for the user.</p><p>The <dfn id="attr-style-type" title="attr-style-type"><code>type</code></dfn>
|
|
attribute gives the styling language. If the attribute is present,
|
|
its value must be a <a href="infrastructure.html#valid-mime-type">valid MIME type</a> that designates a
|
|
styling language. The <code title="">charset</code> parameter must
|
|
not be specified. The default value for the <code title="attr-style-type"><a href="#attr-style-type">type</a></code> attribute, which is used if the
|
|
attribute is absent, is "<code title="">text/css</code>". <a href="references.html#refsRFC2318">[RFC2318]</a></p><div class="impl">
|
|
|
|
|
|
<p>When examining types to determine if they support the language,
|
|
user agents must not ignore unknown MIME parameters — types
|
|
with unknown parameters must be assumed to be unsupported. The <code title="">charset</code> parameter must be treated as an unknown
|
|
parameter for the purpose of comparing <a href="infrastructure.html#mime-type" title="MIME type">MIME
|
|
types</a> here.</p>
|
|
|
|
</div><p>The <dfn id="attr-style-media" title="attr-style-media"><code>media</code></dfn>
|
|
attribute says which media the styles apply to. The value must be a
|
|
<a href="common-microsyntaxes.html#valid-media-query">valid media query</a>. <span class="impl">The user agent
|
|
must apply the styles when the <code title="attr-style-media"><a href="#attr-style-media">media</a></code> attribute's value
|
|
<a href="common-microsyntaxes.html#matches-the-environment">matches the environment</a> and the other relevant
|
|
conditions apply, and must not apply them otherwise.</span></p><div class="impl">
|
|
|
|
<p class="note">The styles might be further limited in scope,
|
|
e.g. in CSS with the use of <code title="">@media</code>
|
|
blocks. This specification does not override such further
|
|
restrictions or requirements.</p>
|
|
</div><p id="style-default-media">The default, if the <code title="attr-style-media"><a href="#attr-style-media">media</a></code> attribute is omitted, is
|
|
"<code title="">all</code>", meaning that by default styles apply to
|
|
all media.</p><p>The <dfn id="attr-style-scoped" title="attr-style-scoped"><code>scoped</code></dfn>
|
|
attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. If set, it indicates
|
|
that the styles are intended just for the subtree rooted at the
|
|
<code><a href="#the-style-element">style</a></code> element's parent element, as opposed to the whole
|
|
<code><a href="infrastructure.html#document">Document</a></code>.</p><div class="impl">
|
|
|
|
<p>If the <code title="attr-style-scoped"><a href="#attr-style-scoped">scoped</a></code> attribute is
|
|
present, then the user agent must apply the specified style
|
|
information only to the <code><a href="#the-style-element">style</a></code> element's parent element
|
|
(if any), and that element's child nodes. Otherwise, the specified
|
|
styles must, if applied, be applied to the entire document.</p>
|
|
|
|
<p>For scoped CSS resources, the effect of @-rules must be scoped to
|
|
the scoped sheet and its subresources, even if the @-rule in
|
|
question would ordinarily apply to all style sheets that affect the
|
|
<code><a href="infrastructure.html#document">Document</a></code>. Any '@page' rules in scoped CSS resources
|
|
must be ignored.</p>
|
|
|
|
<p class="example">For example, an '@font-face' rule defined in a
|
|
scoped style sheet would only define the font for the purposes of
|
|
font rules in the scoped section; style sheets outside the scoped
|
|
section using the same font name would not end up using that
|
|
embedded font.</p>
|
|
|
|
</div><p id="title-on-style">The <dfn id="attr-style-title" title="attr-style-title"><code>title</code></dfn> attribute on
|
|
<code><a href="#the-style-element">style</a></code> elements defines <span>alternative style sheet
|
|
sets</span>. If the <code><a href="#the-style-element">style</a></code> element has no <code title="attr-style-title"><a href="#attr-style-title">title</a></code> attribute, then it has no
|
|
title; the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute of
|
|
ancestors does not apply to the <code><a href="#the-style-element">style</a></code> element. <a href="references.html#refsCSSOM">[CSSOM]</a></p><p class="note">The <code title="attr-style-title"><a href="#attr-style-title">title</a></code>
|
|
attribute on <code><a href="#the-style-element">style</a></code> elements, like the <code title="attr-link-title"><a href="#attr-link-title">title</a></code> attribute on <code><a href="#the-link-element">link</a></code>
|
|
elements, differs from the global <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute in that a
|
|
<code><a href="#the-style-element">style</a></code> block without a title does not inherit the title
|
|
of the parent element: it merely has no title.</p><p>The <code><a href="infrastructure.html#textcontent">textContent</a></code> of a <code><a href="#the-style-element">style</a></code> element must
|
|
match the <code title="">style</code> production in the following
|
|
ABNF, the character set for which is Unicode. <a href="references.html#refsABNF">[ABNF]</a></p><pre>style = no-c-start *( c-start no-c-end c-end no-c-start )
|
|
no-c-start = <any string that doesn't contain a substring that matches c-start >
|
|
c-start = "<!--"
|
|
no-c-end = <any string that doesn't contain a substring that matches c-end >
|
|
c-end = "-->"</pre><div class="impl">
|
|
|
|
<p>All descendant elements must be processed, according to their
|
|
semantics, before the <code><a href="#the-style-element">style</a></code> element itself is
|
|
evaluated. For styling languages that consist of pure text (as
|
|
opposed to XML), user agents must evaluate <code><a href="#the-style-element">style</a></code>
|
|
elements by passing the concatenation of the contents of all the
|
|
<a href="infrastructure.html#text-node" title="text node">text nodes</a> that are direct children
|
|
of the <code><a href="#the-style-element">style</a></code> element (not any other nodes such as
|
|
comments or elements), in <a href="infrastructure.html#tree-order">tree order</a>, to the style
|
|
system. For XML-based styling languages, user agents must pass all
|
|
the child nodes of the <code><a href="#the-style-element">style</a></code> element to the style
|
|
system.</p>
|
|
|
|
<p>All <a href="urls.html#url" title="URL">URLs</a> found by the styling language's
|
|
processor must be <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a>,
|
|
relative to the element (or as defined by the styling language),
|
|
when the processor is invoked.</p>
|
|
|
|
|
|
<p>Once the attempts to obtain the style sheet's <a href="infrastructure.html#critical-subresources">critical
|
|
subresources</a>, if any, are complete, or, if the style sheet
|
|
has no <a href="infrastructure.html#critical-subresources">critical subresources</a>, once the style sheet has
|
|
been parsed and processed, the user agent must, if the loads were
|
|
successful or there were none, <a href="webappapis.html#queue-a-task">queue a task</a> to
|
|
<a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-load">load</code> at the <code><a href="#the-style-element">style</a></code> element,
|
|
or, if one of the style sheet's <a href="infrastructure.html#critical-subresources">critical subresources</a>
|
|
failed to completely load for any reason (e.g. DNS error, HTTP 404
|
|
response, a connection being prematurely closed, unsupported
|
|
Content-Type), <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple
|
|
event</a> named <code title="event-error">error</code> at the
|
|
<code><a href="#the-style-element">style</a></code> element. Non-network errors in processing the
|
|
style sheet or its subresources (e.g. CSS parse errors, PNG decoding
|
|
errors) are not failures for the purposes of this paragraph.</p>
|
|
|
|
<p>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <a href="webappapis.html#dom-manipulation-task-source">DOM manipulation task
|
|
source</a>.</p>
|
|
|
|
<p>The element must <a href="the-end.html#delay-the-load-event">delay the load event</a> of the
|
|
element's document until all the attempts to obtain the style
|
|
sheet's <a href="infrastructure.html#critical-subresources">critical subresources</a>, if any, are
|
|
complete.</p>
|
|
|
|
</div><p class="note">This specification does not specify a style system,
|
|
but CSS is expected to be supported by most Web browsers. <a href="references.html#refsCSS">[CSS]</a></p><div class="impl">
|
|
|
|
<p>The <dfn id="dom-style-media" title="dom-style-media"><code>media</code></dfn>, <dfn id="dom-style-type" title="dom-style-type"><code>type</code></dfn> and <dfn id="dom-style-scoped" title="dom-style-scoped"><code>scoped</code></dfn> IDL attributes
|
|
must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
|
|
same name.</p>
|
|
|
|
</div><p>The <dfn id="dom-style-disabled" title="dom-style-disabled"><code>disabled</code></dfn>
|
|
IDL attribute behaves as defined <a href="#dom-linkstyle-disabled" title="dom-linkstyle-disabled">for the alternative style sheets
|
|
DOM</a>.</p><p>The <code>LinkStyle</code> interface is also implemented by
|
|
this element; the <a href="#styling">styling processing model</a> defines
|
|
how. <a href="references.html#refsCSSOM">[CSSOM]</a></p><div class="example">
|
|
|
|
<p>The following document has its emphasis styled as bright red
|
|
text rather than italics text, while leaving titles of works and
|
|
Latin words in their default italics. It shows how using
|
|
appropriate elements enables easier restyling of documents.</p>
|
|
|
|
<pre><!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<title>My favorite book</title>
|
|
<style>
|
|
body { color: black; background: white; }
|
|
em { font-style: normal; color: red; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>My <em>favorite</em> book of all time has <em>got</em> to be
|
|
<cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
|
|
about the <i lang="la">Felis Catus</i> in modern human society.</p>
|
|
</body>
|
|
</html></pre>
|
|
|
|
</div><h4 id="styling"><span class="secno">4.2.7 </span><dfn title="styling processing model">Styling</dfn></h4><p>The <code><a href="#the-link-element">link</a></code> and <code><a href="#the-style-element">style</a></code> elements can provide
|
|
styling information for the user agent to use when rendering the
|
|
document. The DOM Styling specification specifies what styling
|
|
information is to be used by the user agent and how it is to be
|
|
used. <a href="references.html#refsCSSOM">[CSSOM]</a></p><p>The <code><a href="#the-style-element">style</a></code> and <code><a href="#the-link-element">link</a></code> elements implement
|
|
the <code>LinkStyle</code> interface. <a href="references.html#refsCSSOM">[CSSOM]</a></p><div class="impl">
|
|
|
|
<p>For <code><a href="#the-style-element">style</a></code> elements, if the user agent does not
|
|
support the specified styling language, then the <code title="dom-LinkStyle-sheet">sheet</code> attribute of the element's
|
|
<code>LinkStyle</code> interface must return null. Similarly,
|
|
<code><a href="#the-link-element">link</a></code> elements that do not represent <a href="links.html#link-type-stylesheet" title="rel-stylesheet">external resource links that contribute to
|
|
the styling processing model</a> (i.e. that do not have a <code title="rel-stylesheet"><a href="links.html#link-type-stylesheet">stylesheet</a></code> keyword in their <code title="attr-link-rel"><a href="#attr-link-rel">rel</a></code> attribute), and <code><a href="#the-link-element">link</a></code>
|
|
elements whose specified resource has not yet been fetched, or is
|
|
not in a supported styling language, must have their
|
|
<code>LinkStyle</code> interface's <code title="dom-LinkStyle-sheet">sheet</code> attribute return null.</p>
|
|
|
|
<p>Otherwise, the <code>LinkStyle</code> interface's <code title="dom-LinkStyle-sheet">sheet</code> attribute must return a
|
|
<code>StyleSheet</code> object with the following properties: <a href="references.html#refsCSSOM">[CSSOM]</a></p>
|
|
|
|
<dl><dt>The style sheet type</dt>
|
|
|
|
<dd><p>The style sheet type must be the same as the style's specified
|
|
type. For <code><a href="#the-style-element">style</a></code> elements, this is the same as the
|
|
<code title="attr-style-type"><a href="#attr-style-type">type</a></code> content attribute's
|
|
value, or <code title="">text/css</code> if that is omitted. For
|
|
<code><a href="#the-link-element">link</a></code> elements, this is the <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata of the specified
|
|
resource</a>.</p></dd>
|
|
|
|
<dt>The style sheet location</dt>
|
|
|
|
<dd><p>For <code><a href="#the-link-element">link</a></code> elements, the location must be the
|
|
result of <a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> the
|
|
<a href="urls.html#url">URL</a> given by the element's <code title="attr-link-href"><a href="#attr-link-href">href</a></code> content attribute, relative to
|
|
the element, or the empty string if that fails. For
|
|
<code><a href="#the-style-element">style</a></code> elements, there is no location.</p></dd>
|
|
<dt>The style sheet media</dt>
|
|
|
|
<dd><p>The media must be the same as the value of the element's
|
|
<code title="">media</code> content attribute, or the empty string,
|
|
if the attribute is omitted.</p></dd>
|
|
|
|
<dt>The style sheet title</dt>
|
|
|
|
<dd><p>The title must be the same as the value of the element's
|
|
<code title="dom-title"><a href="elements.html#dom-title">title</a></code> content attribute, if the
|
|
attribute is present and has a non-empty value. If the attribute is
|
|
absent or its value is the empty string, then the style sheet does
|
|
not have a title (it is the empty string). The title is used for
|
|
defining <span>alternative style sheet sets</span>.</p></dd>
|
|
|
|
<dt>The style sheet alternate flag</dt>
|
|
|
|
<dd><p>For <code><a href="#the-link-element">link</a></code> elements, true if <a href="links.html#the-link-is-an-alternative-stylesheet">the link is an
|
|
alternative stylesheet</a>. In all other cases, false.</p></dd>
|
|
|
|
|
|
</dl><p>The same object must be returned each time.</p>
|
|
|
|
<p>The <dfn id="dom-linkstyle-disabled" title="dom-LinkStyle-disabled"><code>disabled</code></dfn> IDL
|
|
attribute on <code><a href="#the-link-element">link</a></code> and <code><a href="#the-style-element">style</a></code> elements must
|
|
return false and do nothing on setting, if the <code title="dom-linkstyle-sheet">sheet</code> attribute of their
|
|
<code>LinkStyle</code> interface is null. Otherwise, it must return
|
|
the value of the <code>StyleSheet</code> interface's <code title="dom-stylesheet-disabled">disabled</code> attribute on
|
|
getting, and forward the new value to that same attribute on
|
|
setting.</p>
|
|
|
|
|
|
<p id="alternate-style-sheets">The rules for handling alternative
|
|
style sheets are defined in the CSS object model specification. <a href="references.html#refsCSSOM">[CSSOM]</a></p>
|
|
|
|
<hr><p>Style sheets, whether added by a <code><a href="#the-link-element">link</a></code> element, a
|
|
<code><a href="#the-style-element">style</a></code> element, an <code><?xml-stylesheet></code> PI,
|
|
an HTTP <code title="http-link">Link:</code> header, or some other
|
|
mechanism, have a <dfn id="style-sheet-ready">style sheet ready</dfn> flag, which is
|
|
initially unset.</p>
|
|
|
|
<p>When a style sheet is ready to be applied, its <a href="#style-sheet-ready">style sheet
|
|
ready</a> flag must be set. If the style sheet referenced no
|
|
other resources (e.g. it was an internal style sheet given by a
|
|
<code><a href="#the-style-element">style</a></code> element with no <code title="">@import</code>
|
|
rules), then the style rules must be synchronously made available to
|
|
script; otherwise, the style rules must only be made available to
|
|
script once the <a href="webappapis.html#event-loop">event loop</a> reaches its "update the
|
|
rendering" step.</p>
|
|
|
|
<p>A style sheet in the context of the <code><a href="infrastructure.html#document">Document</a></code> of an
|
|
<a href="parsing.html#html-parser">HTML parser</a> or <a href="the-xhtml-syntax.html#xml-parser">XML parser</a> is said to be
|
|
<dfn id="a-style-sheet-that-is-blocking-scripts">a style sheet that is blocking scripts</dfn> if the element was
|
|
created by that <code><a href="infrastructure.html#document">Document</a></code>'s parser, and the element is
|
|
either a <code><a href="#the-style-element">style</a></code> element or a <code><a href="#the-link-element">link</a></code> element
|
|
that was an <a href="links.html#link-type-stylesheet" title="rel-stylesheet">external resource link that
|
|
contributes to the styling processing model</a> when the element
|
|
was created by the parser, and the element's style sheet was enabled
|
|
when the element was created by the parser, and the element's
|
|
<a href="#style-sheet-ready">style sheet ready</a> flag is not yet set, and, the last
|
|
time the <a href="webappapis.html#event-loop">event loop</a> reached step 1, the element was
|
|
<a href="infrastructure.html#in-a-document" title="in a document">in that <code>Document</code></a>,
|
|
and the user agent hasn't given up on that particular style sheet
|
|
yet. A user agent may give up on a style sheet at any time.</p>
|
|
|
|
<p>A <code><a href="infrastructure.html#document">Document</a></code> <dfn id="has-a-style-sheet-that-is-blocking-scripts">has a style sheet that is blocking
|
|
scripts</dfn> if there is either <a href="#a-style-sheet-that-is-blocking-scripts">a style sheet that is
|
|
blocking scripts</a> in the context of that
|
|
<code><a href="infrastructure.html#document">Document</a></code>, or if that <code><a href="infrastructure.html#document">Document</a></code> is in a
|
|
<a href="browsers.html#browsing-context">browsing context</a> that has a <a href="browsers.html#parent-browsing-context">parent browsing
|
|
context</a>, and the <a href="browsers.html#active-document">active document</a> of that
|
|
<a href="browsers.html#parent-browsing-context">parent browsing context</a> itself <a href="#has-a-style-sheet-that-is-blocking-scripts">has a style sheet
|
|
that is blocking scripts</a>.</p>
|
|
|
|
<p>A <code><a href="infrastructure.html#document">Document</a></code> <dfn id="has-no-style-sheet-that-is-blocking-scripts">has no style sheet that is blocking
|
|
scripts</dfn> if it does not <a href="#has-a-style-sheet-that-is-blocking-scripts" title="has a style sheet that is
|
|
blocking scripts">have a style sheet that is blocking scripts</a>
|
|
as defined in the previous paragraph.</p>
|
|
|
|
</div></body></html>
|