html5/spec-author-view/the-a-element.html - view

File: [Public] / html5 / spec-author-view / the-a-element.html
Revision 1.154: download - view: text, annotated - select for diffs
Thu Oct 11 14:49:32 2012 UTC (12 years, 11 months ago) by mike
Branches: MAIN
CVS tags: HEAD

updated

<!doctype html> <html lang="en-US-x-Hixie"><meta content="HTML Tidy for HTML5 (experimental) for Linux/x86 http://github.com/w3c/tidy-html5/tree/c63cc39" name="generator"><meta charset="utf-8"><title>4.6.1 The a element — HTML5</title><link href="style.css" rel="stylesheet"><style type="text/css"> /**/ /**/ .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { white-space: 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('fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('fonts/Essays1743-BoldItalic.ttf'); } /**/ /**/ </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><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; } i, em { font-style: italic; } 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, p.overview { float: right; } pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; position: relative; } pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } pre.idl::before { content: "IDL"; font: bold small sans-serif; padding: 0.5em; background: white; position: absolute; top: 0; margin: -1px 0 0 -4em; width: 1.5em; border: thin solid; border-radius: 0 0 0 0.5em } 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.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; } 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; } figure.diagrams { border: double black; background: white; padding: 1em; } figure.diagrams img { display: block; margin: 1em auto; } 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 */ .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; } .note em, .warning em, .note i, .warning i { font-style: normal; } 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; 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 { -moz-appearance: none; -webkit-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="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><meta content="noindex" name="robots"><script> 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><link href="text-level-semantics.html" rel="prev" title="4.6 Text-level semantics"> <link href="Overview.html#contents" rel="contents" title="Table of contents"> <link href="the-em-element.html" rel="next" title="4.6.2 The em element"> <body class="split chapter" onload="fixBrokenLink();"><div class="head" id="head"> <div aria-haspopup="true" id="jumpIndexA-button" role="button" tabindex="0">jump <div id="jumpIndexA"> <ul><li><a class="noindex" href="#the-a-element">a</a><a class="noindex" href="the-abbr-element.html#the-abbr-element">abbr</a><a class="noindex" href="the-address-element.html#the-address-element">address</a><a class="noindex" href="the-area-element.html#the-area-element">area</a><a class="noindex" href="the-article-element.html#the-article-element">article</a><a class="noindex" href="the-aside-element.html#the-aside-element">aside</a><a class="noindex" href="the-audio-element.html#the-audio-element">audio</a></li> </ul><ul><li><a class="noindex" href="the-b-element.html#the-b-element">b</a><a class="noindex" href="the-base-element.html#the-base-element">base</a><a class="noindex" href="the-bdi-element.html#the-bdi-element">bdi</a><a class="noindex" href="the-bdo-element.html#the-bdo-element">bdo</a><a class="noindex" href="the-blockquote-element.html#the-blockquote-element">blockquote</a><a class="noindex" href="the-body-element.html#the-body-element">body</a><a class="noindex" href="the-br-element.html#the-br-element">br</a><a class="noindex" href="the-button-element.html#the-button-element">button</a></li> </ul><ul><li><a class="noindex" href="the-canvas-element.html#the-canvas-element">canvas</a><a class="noindex" href="the-caption-element.html#the-caption-element">caption</a><a class="noindex" href="the-cite-element.html#the-cite-element">cite</a><a class="noindex" href="the-code-element.html#the-code-element">code</a><a class="noindex" href="the-col-element.html#the-col-element">col</a><a class="noindex" href="the-colgroup-element.html#the-colgroup-element">colgroup</a><a class="noindex" href="the-command-element.html#the-command-element">command</a></li> </ul><ul><li><a class="noindex" href="the-datalist-element.html#the-datalist-element">datalist</a><a class="noindex" href="the-dd-element.html#the-dd-element">dd</a><a class="noindex" href="the-del-element.html#the-del-element">del</a><a class="noindex" href="the-details-element.html#the-details-element">details</a><a class="noindex" href="the-dfn-element.html#the-dfn-element">dfn</a><a class="noindex" href="the-div-element.html#the-div-element">div</a><a class="noindex" href="the-dl-element.html#the-dl-element">dl</a><a class="noindex" href="the-dt-element.html#the-dt-element">dt</a></li> </ul><ul><li><a class="noindex" href="the-em-element.html#the-em-element">em</a><a class="noindex" href="the-embed-element.html#the-embed-element">embed</a><a class="noindex" href="the-fieldset-element.html#the-fieldset-element">fieldset</a><a class="noindex" href="the-figcaption-element.html#the-figcaption-element">figcaption</a><a class="noindex" href="the-figure-element.html#the-figure-element">figure</a><a class="noindex" href="the-footer-element.html#the-footer-element">footer</a><a class="noindex" href="the-form-element.html#the-form-element">form</a></li> </ul><ul><li><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h2</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h3</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h4</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h5</a><a class="noindex" href="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a><a class="noindex" href="the-head-element.html#the-head-element">head</a><a class="noindex" href="the-header-element.html#the-header-element">header</a><a class="noindex" href="the-hgroup-element.html#the-hgroup-element">hgroup</a><a class="noindex" href="the-hr-element.html#the-hr-element">hr</a><a class="noindex" href="the-html-element.html#the-html-element">html</a></li> </ul><ul><li><a class="noindex" href="the-i-element.html#the-i-element">i</a><a class="noindex" href="the-iframe-element.html#the-iframe-element">iframe</a><a class="noindex" href="the-img-element.html#the-img-element">img</a><a class="noindex" href="the-input-element.html#the-input-element">input</a><a class="noindex" href="the-ins-element.html#the-ins-element">ins</a><a class="noindex" href="the-kbd-element.html#the-kbd-element">kbd</a><a class="noindex" href="the-keygen-element.html#the-keygen-element">keygen</a></li> </ul><ul><li><a class="noindex" href="the-label-element.html#the-label-element">label</a><a class="noindex" href="the-legend-element.html#the-legend-element">legend</a><a class="noindex" href="the-li-element.html#the-li-element">li</a><a class="noindex" href="the-link-element.html#the-link-element">link</a><a class="noindex" href="the-map-element.html#the-map-element">map</a><a class="noindex" href="the-mark-element.html#the-mark-element">mark</a><a class="noindex" href="the-menu-element.html#the-menu-element">menu</a><a class="noindex" href="the-meta-element.html#the-meta-element">meta</a><a class="noindex" href="the-meter-element.html#the-meter-element">meter</a></li> </ul><ul><li><a class="noindex" href="the-nav-element.html#the-nav-element">nav</a><a class="noindex" href="the-noscript-element.html#the-noscript-element">noscript</a><a class="noindex" href="the-object-element.html#the-object-element">object</a><a class="noindex" href="the-ol-element.html#the-ol-element">ol</a><a class="noindex" href="the-optgroup-element.html#the-optgroup-element">optgroup</a><a class="noindex" href="the-option-element.html#the-option-element">option</a><a class="noindex" href="the-output-element.html#the-output-element">output</a></li> </ul><ul><li><a class="noindex" href="the-p-element.html#the-p-element">p</a><a class="noindex" href="the-param-element.html#the-param-element">param</a><a class="noindex" href="the-pre-element.html#the-pre-element">pre</a><a class="noindex" href="the-progress-element.html#the-progress-element">progress</a><a class="noindex" href="the-q-element.html#the-q-element">q</a><a class="noindex" href="the-rp-element.html#the-rp-element">rp</a><a class="noindex" href="the-rt-element.html#the-rt-element">rt</a><a class="noindex" href="the-ruby-element.html#the-ruby-element">ruby</a></li> </ul><ul><li><a class="noindex" href="the-s-element.html#the-s-element">s</a><a class="noindex" href="the-samp-element.html#the-samp-element">samp</a><a class="noindex" href="the-script-element.html#the-script-element">script</a><a class="noindex" href="the-section-element.html#the-section-element">section</a><a class="noindex" href="the-select-element.html#the-select-element">select</a><a class="noindex" href="the-small-element.html#the-small-element">small</a><a class="noindex" href="the-source-element.html#the-source-element">source</a><a class="noindex" href="the-span-element.html#the-span-element">span</a></li> </ul><ul><li><a class="noindex" href="the-strong-element.html#the-strong-element">strong</a><a class="noindex" href="the-style-element.html#the-style-element">style</a><a class="noindex" href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sub</a><a class="noindex" href="the-summary-element.html#the-summary-element">summary</a><a class="noindex" href="the-sub-and-sup-elements.html#the-sub-and-sup-elements">sup</a></li> </ul><ul><li><a class="noindex" href="the-table-element.html#the-table-element">table</a><a class="noindex" href="the-tbody-element.html#the-tbody-element">tbody</a><a class="noindex" href="the-td-element.html#the-td-element">td</a><a class="noindex" href="the-textarea-element.html#the-textarea-element">textarea</a><a class="noindex" href="the-tfoot-element.html#the-tfoot-element">tfoot</a><a class="noindex" href="the-th-element.html#the-th-element">th</a><a class="noindex" href="the-thead-element.html#the-thead-element">thead</a><a class="noindex" href="the-time-element.html#the-time-element">time</a><a class="noindex" href="the-title-element.html#the-title-element">title</a></li> </ul><ul><li><a class="noindex" href="the-tr-element.html#the-tr-element">tr</a><a class="noindex" href="the-track-element.html#the-track-element">track</a><a class="noindex" href="the-u-element.html#the-u-element">u</a><a class="noindex" href="the-ul-element.html#the-ul-element">ul</a><a class="noindex" href="the-var-element.html#the-var-element">var</a><a class="noindex" href="the-video-element.html#the-video-element">video</a><a class="noindex" href="the-wbr-element.html#the-wbr-element">wbr</a></li> </ul><ul class="jumpIndexA-other"><li><a class="noindex" href="global-attributes.html#global-attributes">global attributes</a><a class="noindex" href="index-of-terms.html#index-of-terms">terms</a></li> </ul></div> </div> <script src="jump-indexes.js"> </script><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 class="prev_next"> <a href="text-level-semantics.html">&slarr; 4.6 Text-level semantics</a> – <a href="Overview.html#contents">Table of contents</a> – <a href="the-em-element.html">4.6.2 The em element &srarr;</a> </div> <h4 id="the-a-element"><span class="secno">4.6.1</span> The <dfn><code>a</code></dfn> element</h4> <dl class="element"><dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-categories" id="element-dfn-categories_32" title="element-dfn-categories">Categories</a>:</dt> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#flow-content-1" id="flow-content_70">Flow content</a>.</dd> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#phrasing-content-1" id="phrasing-content_23">Phrasing content</a>.</dd> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#interactive-content-0" id="interactive-content_3">Interactive content</a>.</dd> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#palpable-content-0" id="palpable-content_17">Palpable content</a>.</dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-contexts" id="element-dfn-contexts_32" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt> <dd>Where <a href="http://dev.w3.org/html5/spec/single-page.html#phrasing-content-1" id="phrasing-content_24">phrasing content</a> is expected.</dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-content-model" id="element-dfn-content-model_32" title="element-dfn-content-model">Content model</a>:</dt> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#transparent" id="transparent_5">Transparent</a>, but there must be no <a href="http://dev.w3.org/html5/spec/single-page.html#interactive-content-0" id="interactive-content_4">interactive content</a> descendant.</dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-attributes" id="element-dfn-attributes_32" title="element-dfn-attributes">Content attributes</a>:</dt> <dd><a href="http://dev.w3.org/html5/spec/single-page.html#global-attributes" id="global-attributes_32">Global attributes</a></dd> <dd><code title="attr-hyperlink-href"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-href" id="href_12">href</a></code></dd> <dd><code title="attr-hyperlink-target"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-target" id="target_12">target</a></code></dd>  <dd><code title="attr-hyperlink-rel"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-rel" id="rel_11">rel</a></code></dd> <dd><code title="attr-hyperlink-media"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-media" id="media_9">media</a></code></dd> <dd><code title="attr-hyperlink-hreflang"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-hreflang" id="hreflang_1">hreflang</a></code></dd> <dd><code title="attr-hyperlink-type"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-type" id="type_111">type</a></code></dd> <dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-dom" id="element-dfn-dom_32" title="element-dfn-dom">DOM interface</a>:</dt>  <dd> <pre class="idl"> interface <dfn id="htmlanchorelement">HTMLAnchorElement</dfn> : <a href="http://dev.w3.org/html5/spec/single-page.html#htmlelement" id="htmlelement_37">HTMLElement</a> { stringifier attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-href" title="dom-a-href">href</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-target" title="dom-a-target">target</a>;  attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-rel" title="dom-a-rel">rel</a>; readonly attribute <a href="http://dev.w3.org/html5/spec/single-page.html#domtokenlist">DOMTokenList</a> <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-rellist" title="dom-a-relList">relList</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-media" title="dom-a-media">media</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-hreflang" title="dom-a-hreflang">hreflang</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-type" title="dom-a-type">type</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-text" title="dom-a-text">text</a>; // <a href="http://dev.w3.org/html5/spec/single-page.html#url-decomposition-idl-attributes" id="url-decomposition-idl-attributes_1">URL decomposition IDL attributes</a> attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-protocol" title="dom-a-protocol">protocol</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-host" title="dom-a-host">host</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-hostname" title="dom-a-hostname">hostname</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-port" title="dom-a-port">port</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-pathname" title="dom-a-pathname">pathname</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-search" title="dom-a-search">search</a>; attribute DOMString <a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-hash" title="dom-a-hash">hash</a>; }; </pre></dd> </dl><p>If the <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-a-element" id="a_15">a</a></code> element has an <code title="attr-hyperlink-href"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-href" id="href_13">href</a></code> attribute, then it <a href="http://dev.w3.org/html5/spec/single-page.html#represents">represents</a> a <a href="http://dev.w3.org/html5/spec/single-page.html#hyperlink" id="hyperlink_8">hyperlink</a> (a hypertext anchor).</p>  <p>If the <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-a-element" id="a_16">a</a></code> element has no <code title="attr-hyperlink-href"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-href" id="href_14">href</a></code> attribute, then the element <a href="http://dev.w3.org/html5/spec/single-page.html#represents">represents</a> a placeholder for where a link might otherwise have been placed, if it had been relevant.</p> <p>The <code title="attr-hyperlink-target"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-target" id="target_13">target</a></code>,   <code title="attr-hyperlink-rel"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-rel" id="rel_12">rel</a></code>, <code title="attr-hyperlink-media"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-media" id="media_10">media</a></code>, <code title="attr-hyperlink-hreflang"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-hreflang" id="hreflang_2">hreflang</a></code>, and <code title="attr-hyperlink-type"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-type" id="type_112">type</a></code> attributes must be omitted if the <code title="attr-hyperlink-href"><a href="http://dev.w3.org/html5/spec/single-page.html#attr-hyperlink-href" id="href_15">href</a></code> attribute is not present.</p>  <div class="example"> <p>If a site uses a consistent navigation toolbar on every page, then the link that would normally link to the page itself could be marked up using an <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-a-element" id="a_17">a</a></code> element:</p> <pre> <nav> <ul> <li> <a href="/">Home</a> </li> <li> <a href="/news">News</a> </li> <li> <a>Examples</a> </li> <li> <a href="/legal">Legal</a> </li> </ul> </nav> </pre></div>  <dl class="domintro"><dt><var title="">a</var> . <code title="dom-a-text"><a href="http://dev.w3.org/html5/spec/single-page.html#dom-a-text">text</a></code></dt> <dd> <p>Same as <code><a href="http://dev.w3.org/html5/spec/single-page.html#textcontent">textContent</a></code>.</p> </dd> </dl><div class="example"> <p>The <code><a href="http://dev.w3.org/html5/spec/single-page.html#the-a-element" id="a_18">a</a></code> element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:</p> <pre> <aside class="advertising"> <h1>Advertising</h1> <a href="http://ad.example.com/?adid=1929&amp;pubid=1422"> <section> <h1>Mellblomatic 9000!</h1> <p>Turn all your widgets into mellbloms!</p> <p>Only $9.99 plus shipping and handling.</p> </section> </a> <a href="http://ad.example.com/?adid=375&amp;pubid=1422"> <section> <h1>The Mellblom Browser</h1> <p>Web browsing at the speed of light.</p> <p>No other browser goes faster!</p> </section> </a> </aside> </pre></div>