1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<title>Common Attributes [Robin’s HTML 4.0 Conformance Test]</title>
<meta name="description" content="Test your Web browser’s support for HTML 4.0 identifiers. Part of Robin’s HTML 4.0 Conformance Test.">
<meta name="DC.Creator" content="Lionheart, Robin">
<link rel="home" href="http://www.robinlionheart.com/" title="RobinLionheart.com">
<link rel="first" href="./" title="Robin’s HTML 4.0 Test">
<link rel="prev" href="spchars" title="Characters: Special">
<link rel="next" href="edit" title="Edits">
<link rel="glossary" href="glossary" title="Glossary">
<link rel="author" href="http://www.robinlionheart.com/robin/" title="Robin Lionheart">
<link rel="stylesheet" href="/style/linkcolors.css" type="text/css" media="screen, tv, projection">
<link rel="stylesheet" href="html4.css" type="text/css" media="screen, tv, projection" title="Conformance Test">
<link rel="icon" href="/images/icons/htmltest.png" type="image/png">
<style type="text/css">
.fake.link { text-decoration: underline; color: blue; }
#poem { font-style: italic; text-align: center; }
</style>
<div id="navbar">
<ul class="nl" id="breadcrumbs"><li><a href="./" rel="first">Robin’s HTML 4.0 Test</a><ul><li>Common Attributes</li></ul></li></ul>
<ul class="nl">
<li><a href="./" rel="first" accesskey="1" title="First: Robin’s HTML 4.0 Test">⇤<strong>1</strong>st</a></li>
<li><a href="spchars" rel="prev" accesskey="P" title="Prior: Characters: Special">←<strong>P</strong>rior</a></li>
<li><a href="edit" rel="next" accesskey="N" title="Next: Edits"><strong>N</strong>ext→</a></li>
</ul>
</div>
<h1>Common Attributes</h1>
<div class="section" id="id">
<h2>Identifiers as anchors (<a class="specsect" href="http://www.w3.org/TR/html4/struct/global.html#adef-id" title="HTML 4.0 Specification">§7.5.2</a>)</h2>
<div class="bodytext">
<p>The <dfn><a class="specsect" href="http://www.w3.org/TR/html4/struct/global.html#adef-id" title="HTML 4.0 Specification"><code class="attribute">id</code></a></dfn> attribute assigns a <em>unique name</em> to an element. Similar to the <a class="specsect" href="http://www.w3.org/TR/html4/struct/links.html#adef-name-A" title="HTML 4.0 Specification"><code class="attribute">name</code></a> attribute of the <a class="specsect" href="http://www.w3.org/TR/html4/struct/links.html#edef-a" title="HTML 4.0 Specification"><code class="element"><a></code></a> element, but it allows any element in the document body to be the destination of a link.</p>
</div>
<div class="illo">
<h3>Example:</h3>
<h4 class="codeheader">The footnotes section of the Results page is in a division with the identifier <code>footnotes</code>:</h4>
<div class="blockcode">
<em class="html"><div class="section bodytext" <strong class="tested">id="footnotes"</strong>></em>
</div>
<h4 class="codeheader">This code is a hyperlink to that section:</h4>
<div class="blockcode">
<em class="html"><a href="results.xhtml#footnotes"></em>Footnotes<em class="html"></a></em> are listed beneath the results table.
</div>
<h4 class="resultheader">This link should take you to that section:</h4>
<div class="results" id="result1">
<a href="results.xhtml#footnotes">Footnotes</a> are listed beneath the results table.
</div>
</div>
</div>
<div class="section" id="id-style">
<h2>Identifiers as style sheet selectors</h2>
<div class="bodytext">
<p>Style sheet rules can be assigned to specific <code class="attribute">id</code> values (unlike the obsolete <code class="attribute">name</code> attribute).</p>
</div>
<div class="illo">
<h3>Example:</h3>
<p>If your Web browser supports style sheets, the following should produce a centered and italicized paragraph.</p>
<h4 class="codeheader">This page includes a style rule for the <code>poem</code> identifier:</h4>
<div class="blockcode">
#poem { font-style: italic; text-align: center; }
</div>
<h4 class="codeheader">Let’s use that identifier for a poem by Nancy Stark:</h4>
<div class="blockcode">
<em class="html"><p <strong class="tested">id="poem"</strong>></em>Higgledy<em class="html4"><em class="entity">&#8208;</em></em>piggledy<em class="html"><br></em><br>
Nic<em class="html4"><em class="entity">&rsquo;</em></em>laus Copernicus<em class="html"><br></em><br>
Looked at the Universe<em class="html"><br></em><br>
Spoke to the throng<em class="html"><br></em><br>
Give up your Ptolemy<em class="html"><br></em><br>
Rise up and follow me,<em class="html"><br></em><br>
Heliocentrically<em class="html"><br></em><br>
Ptolemy<em class="html4"><em class="entity">&rsquo;</em></em>s wrong<em class="html"></p></em>
</div>
<h4 class="resultheader">Your Web browser renders it like this:</h4>
<div class="results" id="result2">
<p id="poem">Higgledy‐piggledy<br>
Nic’laus Copernicus<br>
Looked at the Universe<br>
Spoke to the throng<br>
Give up your Ptolemy<br>
Rise up and follow me,<br>
Heliocentrically<br>
Ptolemy’s wrong</p>
</div>
</div>
</div>
<div class="section" id="class">
<h2>Classes (<a class="specsect" href="http://www.w3.org/TR/html4/struct/global.html#adef-id" title="HTML 4.0 Specification">§7.5.2</a>)</h2>
<div class="bodytext">
<p>The <dfn><a class="specsect" href="http://www.w3.org/TR/html4/struct/global.html#adef-class" title="HTML 4.0 Specification"><code class="attribute">class</code></a></dfn> attribute assigns <em>class names</em> to an element. Classes are used as style sheet selectors.</p>
</div>
<div class="illo">
<h3>Example:</h3>
<p>If your Web browser supports style sheets, the following should produce a paragraph with an underlined, blue phrase.</p>
<h4 class="codeheader">This page includes a style rule for elements belonging to both the <code>fake</code> and <code>link</code> classes:</h4>
<div class="blockcode">
.fake.link { text-decoration: underline; color: blue; }<br>
</div>
<h4 class="codeheader">This code has a <code class="element"><span></code> with two classes, <code>fake</code> and <code>link</code>:</h4>
<div class="blockcode">
Hyperlinks traditionally appear <em class="html4"><span <strong class="tested">class="fake link"</strong>></em>underlined and blue<em class="html4"></span></em> to distinguish them from body text.
</div>
<h4 class="resultheader">Your Web browser renders it like this:</h4>
<div class="results" id="result3">
Hyperlinks traditionally appear <span class="fake link">underlined and blue</span> to distinguish them from body text.
</div>
</div>
</div>
<div id="browserver">
<h2>Your Browser</h2>
<p>Your Web browser identified itself as <strong><code id="useragent">Wget/1.11.4</code></strong> when it requested this page.</p>
<script type="text/javascript" src="browserid.js"></script>
<noscript><p>Your Web browser did not run a script to reveal how it identifies itself to scripts.</p></noscript>
</div>
<div id="footer">
<div id="buttons">
<a href="http://www.mozilla.com/firefox/" title="Mozilla Firefox"><object type="image/png" width="80" height="15" id="firefox_button" data="/images/buttons/firefox.png">Get Firefox</object></a>
<a href="http://my.opera.com/rlionheart/affiliate/" title="Opera"><object type="image/png" width="80" height="15" id="opera_button" data="/images/buttons/opera.png">Get Opera</object></a>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/2.5/" title="Creative Commons Deed"><object type="image/png" width="80" height="15" id="cc_button" data="/images/buttons/cc.png">Some rights reserved.</object></a>
<a href="http://www.htmlhelp.com/cgi-bin/validate.cgi?url=referer" title="WDG HTML Validation Service"><object type="image/png" width="80" height="15" id="html401_button" data="/images/buttons/html401.png">Valid HTML 4.01</object></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" title="W3C CSS Validation Service"><object type="image/png" width="80" height="15" id="css_button" data="/images/buttons/css.png">Valid CSS</object></a>
</div>
<p><a rel="copyright" href="/copyright" class="local">©</a> 1998 <span class="vcard"><a rel="home" href="/" class="local fn">Robin Lionheart</a> (<a rev="made" href="mailto:lionheart@robinlionheart.com" class="email local">lionheart@robin­lionheart.com</a>) [<a href="/robin/pubkey" class="local">public key</a>]</span></p>
<div id="dehanced">
<p>Best read with a browser that supports <abbr title="Extensible Hypertext Markup Language">XHTML</abbr>, <abbr title="Cascading Style Sheets level 2">CSS 2</abbr>, and <abbr title="Portable Network Graphics">PNG</abbr> images. I recommend <a href="http://www.mozilla.org/products/firefox/">Firefox</a>.</p>
<p>Degraded to fit your browser (JavaScript MIME type).</p>
</div> </div>
|
