Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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