Skip to content

HTTPS clone URL

Subversion checkout URL

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