Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 351 lines (296 sloc) 14.322 kb
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
1 <!DOCTYPE html>
849eded @necolas Update normalize.css and demo.html from master branch
necolas authored
2 <html lang="en">
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
3 <head>
4 <meta charset="utf-8">
849eded @necolas Update normalize.css and demo.html from master branch
necolas authored
5 <meta name="viewport" content="width=device-width">
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
6 <title>Normalize CSS</title>
7 <link rel="stylesheet" href="normalize.css">
8 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
9 <style>
10 #boxsize button,
11 #boxsize input,
12 #boxsize select,
13 #boxsize textarea {
3f6ccba @necolas Update demo.html from master branch
necolas authored
14 width: 200px;
15 padding: 5px;
16 border: 1px solid #333;
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
17 }
18 </style>
19 </head>
20 <body>
738abae @necolas Update normalize.css and demo.html from master branch
necolas authored
21 <h1>Heading 1</h1>
22 <h2>Heading 2</h2>
23 <h3>Heading 3</h3>
24 <h4>Heading 4</h4>
25 <h5>Heading 5</h5>
26 <h6>Heading 6</h6>
27
28 <section>
29 <h1>Heading 1 (in section)</h1>
30 <h2>Heading 2 (in section)</h2>
31 <h3>Heading 3 (in section)</h3>
32 <h4>Heading 4 (in section)</h4>
33 <h5>Heading 5 (in section)</h5>
34 <h6>Heading 6 (in section)</h6>
35 </section>
36
37 <article>
38 <h1>Heading 1 (in article)</h1>
39 <h2>Heading 2 (in article)</h2>
40 <h3>Heading 3 (in article)</h3>
41 <h4>Heading 4 (in article)</h4>
42 <h5>Heading 5 (in article)</h5>
43 <h6>Heading 6 (in article)</h6>
44 </article>
45
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
46 <header>
47 <hgroup>
738abae @necolas Update normalize.css and demo.html from master branch
necolas authored
48 <h1>Heading 1 (in hgroup)</h1>
49 <h2>Heading 2 (in hgroup)</h2>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
50 </hgroup>
51 <nav>
52 <ul>
53 <li><a href="#">navigation item #1</a></li>
54 <li><a href="#">navigation item #2</a></li>
55 <li><a href="#">navigation item #3</a></li>
56 </ul>
57 </nav>
58 </header>
3f6ccba @necolas Update demo.html from master branch
necolas authored
59
738abae @necolas Update normalize.css and demo.html from master branch
necolas authored
60 <h1>Text-level semantics</h1>
3c1bb73 @necolas Update demo.html and normalize.css from 'master' branch
necolas authored
61
62 <p hidden>This should be hidden in all browsers, apart from IE6</p>
3f6ccba @necolas Update demo.html from master branch
necolas authored
63
738abae @necolas Update normalize.css and demo.html from master branch
necolas authored
64 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
65 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
3f6ccba @necolas Update demo.html from master branch
necolas authored
66
738abae @necolas Update normalize.css and demo.html from master branch
necolas authored
67 <address>Address: somewhere, world</address>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
68
69 <p>
70 The <a href="#">a element</a> example<br>
03c8acf @necolas Update normalize.css and demo.html from github/master
necolas authored
71 The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples<br>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
72 The <b>b element</b> example<br>
73 The <cite>cite element</cite> example<br>
74 The <code>code element</code> example<br>
75 The <del>del element</del> example<br>
03c8acf @necolas Update normalize.css and demo.html from github/master
necolas authored
76 The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
77 The <em>em element</em> example<br>
78 The <i>i element</i> example<br>
85fa87a @necolas Update demo and normalize from master
necolas authored
79 The img element <img src="http://placekitten.com/16/16" alt=""> example<br>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
80 The <ins>ins element</ins> example<br>
81 The <kbd>kbd element</kbd> example<br>
82 The <mark>mark element</mark> example<br>
83 The <q>q element <q>inside</q> a q element</q> example<br>
84 The <s>s element</s> example<br>
85 The <samp>samp element</samp> example<br>
86 The <small>small element</small> example<br>
87 The <span>span element</span> example<br>
88 The <strong>strong element</strong> example<br>
89 The <sub>sub element</sub> example<br>
90 The <sup>sup element</sup> example<br>
91 The <var>var element</var> example<br>
92 The <u>u element</u> example
93 </p>
3f6ccba @necolas Update demo.html from master branch
necolas authored
94
85fa87a @necolas Update demo and normalize from master
necolas authored
95 <h1>Embedded content</h1>
3f6ccba @necolas Update demo.html from master branch
necolas authored
96
599e5c6 @necolas Update demo.html and normalize.css from master branch
necolas authored
97 <h3>audio</h3>
98
99 <audio controls></audio>
100 <audio></audio>
101
85fa87a @necolas Update demo and normalize from master
necolas authored
102 <h3>img</h3>
103
104 <img src="http://placekitten.com/100/100" alt="">
105 <a href="#"><img src="http://placekitten.com/100/100" alt=""></a>
106
107 <h3>svg</h3>
3f6ccba @necolas Update demo.html from master branch
necolas authored
108
109 <svg width="100px" height="100px">
110 <circle cx="100" cy="100" r="100" fill="#ff0000" />
111 </svg>
85fa87a @necolas Update demo and normalize from master
necolas authored
112
599e5c6 @necolas Update demo.html and normalize.css from master branch
necolas authored
113 <h3>video</h3>
114
115 <video controls></video>
116 <video></video>
117
38f540b @necolas Update normalize.css and demo.html from master branch.
necolas authored
118 <h1>Interactive content</h1>
119
120 <h3>details / summary</h3>
121 <details>
122 <summary>More info</summary>
123 <p>Additional information</p>
124 <ul>
125 <li>Point 1</li>
126 <li>Point 2</li>
127 </ul>
128 </details>
129
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
130 <h1>Grouping content</h1>
3f6ccba @necolas Update demo.html from master branch
necolas authored
131
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
132 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
3f6ccba @necolas Update demo.html from master branch
necolas authored
133
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
134 <h3>pre</h3>
3f6ccba @necolas Update demo.html from master branch
necolas authored
135
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
136 <pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>
1e500b9 @necolas Update normalize.css and demo from master
necolas authored
137
138 <pre><code>&lt;html>
139 &lt;head>
140 &lt;/head>
141 &lt;body>
142 &lt;div class="main"> &lt;div>
143 &lt;/body>
144 &lt;/html></code></pre>
3f6ccba @necolas Update demo.html from master branch
necolas authored
145
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
146 <h3>blockquote</h3>
3f6ccba @necolas Update demo.html from master branch
necolas authored
147
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
148 <blockquote>
149 <p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p>
150 </blockquote>
3f6ccba @necolas Update demo.html from master branch
necolas authored
151
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
152 <blockquote>Even better philosophical quote marked up with just a &lt;blockquote> element.</blockquote>
3f6ccba @necolas Update demo.html from master branch
necolas authored
153
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
154 <h3>ordered list</h3>
3f6ccba @necolas Update demo.html from master branch
necolas authored
155
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
156 <ol>
157 <li>list item 1</li>
158 <li>list item 1
159 <ol>
160 <li>list item 2</li>
161 <li>list item 2
162 <ol>
163 <li>list item 3</li>
164 <li>list item 3</li>
165 </ol>
166 </li>
167 <li>list item 2</li>
168 <li>list item 2</li>
169 </ol>
170 </li>
171 <li>list item 1</li>
172 <li>list item 1</li>
173 </ol>
3f6ccba @necolas Update demo.html from master branch
necolas authored
174
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
175 <h3>unordered list</h3>
3f6ccba @necolas Update demo.html from master branch
necolas authored
176
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
177 <ul>
178 <li>list item 1</li>
179 <li>list item 1
180 <ul>
181 <li>list item 2</li>
182 <li>list item 2
183 <ul>
184 <li>list item 3</li>
185 <li>list item 3</li>
186 </ul>
187 </li>
188 <li>list item 2</li>
189 <li>list item 2</li>
190 </ul>
191 </li>
192 <li>list item 1</li>
193 <li>list item 1</li>
194 </ul>
3f6ccba @necolas Update demo.html from master branch
necolas authored
195
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
196 <h3>description list</h3>
3f6ccba @necolas Update demo.html from master branch
necolas authored
197
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
198 <dl>
199 <dt>Description name</dt>
200 <dd>Description value</dd>
201 <dt>Description name</dt>
202 <dd>Description value</dd>
203 <dd>Description value</dd>
204 <dt>Description name</dt>
205 <dt>Description name</dt>
206 <dd>Description value</dd>
207 </dl>
3f6ccba @necolas Update demo.html from master branch
necolas authored
208
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
209 <h3>figure</h3>
85fa87a @necolas Update demo and normalize from master
necolas authored
210
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
211 <figure>
85fa87a @necolas Update demo and normalize from master
necolas authored
212 <img src="http://placekitten.com/400/200" alt="">
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
213 <figcaption>Figcaption content</figcaption>
214 </figure>
215
216 <h1>Tabular data</h1>
3f6ccba @necolas Update demo.html from master branch
necolas authored
217
218 <table>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
219 <caption>Jimi Hendrix - albums</caption>
220 <thead>
221 <tr>
222 <th>Album</th>
223 <th>Year</th>
224 <th>Price</th>
225 </tr>
226 </thead>
227 <tfoot>
228 <tr>
229 <th>Album</th>
230 <th>Year</th>
231 <th>Price</th>
232 </tr>
233 </tfoot>
234 <tbody>
235 <tr>
236 <td>Are You Experienced</td>
237 <td>1967</td>
238 <td>$10.00</td>
239 </tr>
240 <tr>
241 <td>Axis: Bold as Love</td>
242 <td>1967</td>
243 <td>$12.00</td>
244 </tr>
245 <tr>
246 <td>Electric Ladyland</td>
247 <td>1968</td>
248 <td>$10.00</td>
249 </tr>
250 <tr>
251 <td>Band of Gypsys</td>
252 <td>1970</td>
253 <td>$12.00</td>
254 </tr>
255 </tbody>
256 </table>
3f6ccba @necolas Update demo.html from master branch
necolas authored
257
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
258 <h1>Forms</h1>
3f6ccba @necolas Update demo.html from master branch
necolas authored
259
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
260 <form>
261 <fieldset>
f501de7 @necolas Update normalize and demo from master branch
necolas authored
262 <legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend>
34680ac @necolas Update normalize.css and demo.html from master branch
necolas authored
263 <p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
264 <p><label>Email input <input type="email"></label></p>
265 <p><label>Search input <input type="search"></label></p>
266 <p><label>Tel input <input type="tel"></label></p>
267 <p><label>URL input <input type="url" placeholder="http://"></label></p>
268 <p><label>Password input <input type="password" value="password"></label></p>
269 <p><label>File input <input type="file"></label></p>
3f6ccba @necolas Update demo.html from master branch
necolas authored
270
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
271 <p><label>Radio input <input type="radio" name="rad"></label></p>
272 <p><label>Checkbox input <input type="checkbox"></label></p>
273 <p><label><input type="radio" name="rad"> Radio input</label></p>
274 <p><label><input type="checkbox"> Checkbox input</label></p>
3f6ccba @necolas Update demo.html from master branch
necolas authored
275
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
276 <p><label>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p>
277 <p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p>
278 </fieldset>
3f6ccba @necolas Update demo.html from master branch
necolas authored
279
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
280 <fieldset>
281 <legend>Inputs as siblings of labels</legend>
3f6ccba @necolas Update demo.html from master branch
necolas authored
282 <p><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></p>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
283 <p><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></p>
3f6ccba @necolas Update demo.html from master branch
necolas authored
284 <p><label for="ir">Range input</label> <input type="range" id="ir" value="10"></p>
285 <p><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></p>
286 <p><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></p>
287 <p><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></p>
288 <p><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></p>
289 <p><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></p>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
290
291 <p><label for="irb">Radio input</label> <input type="radio" id="irb" name="rad"></p>
292 <p><label for="icb">Checkbox input</label> <input type="checkbox" id="icb"></p>
293 <p><input type="radio" id="irb2" name="rad"> <label for="irb2">Radio input</label></p>
294 <p><input type="checkbox" id="icb2"> <label for="icb2">Checkbox input</label></p>
3f6ccba @necolas Update demo.html from master branch
necolas authored
295
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
296 <p><label for="s">Select field</label> <select id="s"><option>Option 01</option><option>Option 02</option></select></p>
297 <p><label for="t">Textarea</label> <textarea id="t" cols="30" rows="5" >Textarea text</textarea></p>
298 </fieldset>
3f6ccba @necolas Update demo.html from master branch
necolas authored
299
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
300 <fieldset>
301 <legend>Clickable inputs and buttons</legend>
85fa87a @necolas Update demo and normalize from master
necolas authored
302 <p><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></p>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
303 <p><input type="reset" value="Reset (input)"></p>
304 <p><input type="button" value="Button (input)"></p>
305 <p><input type="submit" value="Submit (input)"></p>
849eded @necolas Update normalize.css and demo.html from master branch
necolas authored
306 <p><input type="submit" value="Disabled (input)" disabled></p>
307
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
308
309 <p><button type="reset">Reset (button)</button></p>
310 <p><button type="button">Button (button)</button></p>
311 <p><button type="submit">Submit (button)</button></p>
849eded @necolas Update normalize.css and demo.html from master branch
necolas authored
312 <p><button type="submit" disabled>Disabled (button)</button></p>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
313 </fieldset>
3f6ccba @necolas Update demo.html from master branch
necolas authored
314
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
315 <fieldset id="boxsize">
316 <legend>box-sizing tests</legend>
317 <div><input type="text" value="text"></div>
318 <div><input type="email" value="email"></div>
319 <div><input type="search" value="search"></div>
3f6ccba @necolas Update demo.html from master branch
necolas authored
320 <div><input type="url" value="http://example.com"></div>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
321 <div><input type="password" value="password"></div>
322
3f6ccba @necolas Update demo.html from master branch
necolas authored
323 <div><input type="color" value="#000000"></div>
324 <div><input type="number" value="5"></div>
325 <div><input type="range" value="10"></div>
326 <div><input type="date" value="1970-01-01"></div>
327 <div><input type="month" value="1970-01"></div>
328 <div><input type="week" value="1970-W01"></div>
329 <div><input type="datetime" value="1970-01-01T00:00:00Z"></div>
330 <div><input type="datetime-local" value="1970-01-01T00:00"></div>
331
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
332 <div><input type="radio"></div>
333 <div><input type="checkbox"></div>
3f6ccba @necolas Update demo.html from master branch
necolas authored
334
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
335 <div><select><option>Option 01</option><option>Option 02</option></select></div>
849eded @necolas Update normalize.css and demo.html from master branch
necolas authored
336 <div><textarea cols="30" rows="5">Textarea text</textarea></div>
3f6ccba @necolas Update demo.html from master branch
necolas authored
337
85fa87a @necolas Update demo and normalize from master
necolas authored
338 <div><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></div>
6716c48 @necolas Add project page, description, links to source, and acknowledgements. Ad...
necolas authored
339 <div><input type="reset" value="Reset (input)"></div>
340 <div><input type="button" value="Button (input)"></div>
341 <div><input type="submit" value="Submit (input)"></div>
342
343 <div><button type="reset">Reset (button)</button></div>
344 <div><button type="button">Button (button)</button></div>
345 <div><button type="submit">Submit (button)</button></div>
346 </fieldset>
347 </form>
348
349 </body>
1e500b9 @necolas Update normalize.css and demo from master
necolas authored
350 </html>
Something went wrong with that request. Please try again.