Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 299 lines (260 sloc) 12.983 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>
41
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
42 <section>
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
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>
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
50 </section>
51
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
52 <h1>Text-level semantics</h1>
53
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
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
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
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>
a974ee71 »
2011-06-20 Minor tidy up of <pre><code> HTML example
88
89 <pre><code>&lt;html>
90 &lt;head>
91 &lt;/head>
92 &lt;body>
93 &lt;div class="main"> &lt;div>
94 &lt;/body>
95 &lt;/html></code></pre>
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
96
97 <h3>blockquote</h3>
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
98
99 <blockquote>
100 <p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p>
101 </blockquote>
102
103 <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…
104
105 <h3>ordered list</h3>
106
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
107 <ol>
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
108 <li>list item 1</li>
109 <li>list item 1
110 <ol>
111 <li>list item 2</li>
112 <li>list item 2
113 <ol>
114 <li>list item 3</li>
115 <li>list item 3</li>
116 </ol>
117 </li>
118 <li>list item 2</li>
119 <li>list item 2</li>
120 </ol>
121 </li>
122 <li>list item 1</li>
123 <li>list item 1</li>
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
124 </ol>
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
125
126 <h3>unordered list</h3>
127
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
128 <ul>
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
129 <li>list item 1</li>
130 <li>list item 1
131 <ul>
132 <li>list item 2</li>
133 <li>list item 2
134 <ul>
135 <li>list item 3</li>
136 <li>list item 3</li>
137 </ul>
138 </li>
139 <li>list item 2</li>
140 <li>list item 2</li>
141 </ul>
142 </li>
143 <li>list item 1</li>
144 <li>list item 1</li>
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
145 </ul>
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
146
147 <h3>description list</h3>
148
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
149 <dl>
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
150 <dt>Description name</dt>
151 <dd>Description value</dd>
152 <dt>Description name</dt>
153 <dd>Description value</dd>
154 <dd>Description value</dd>
155 <dt>Description name</dt>
156 <dt>Description name</dt>
157 <dd>Description value</dd>
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
158 </dl>
159
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
160 <h3>figure</h3>
161
162 <figure>
163 <img src="http://placehold.it/400x200" alt="">
164 <figcaption>Figcaption content</figcaption>
165 </figure>
166
167 <h1>Tabular data</h1>
168
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
169 <table summary="Jimi Hendrix albums">
170 <caption>Jimi Hendrix - albums</caption>
171 <thead>
172 <tr>
173 <th>Album</th>
174 <th>Year</th>
175 <th>Price</th>
176 </tr>
177 </thead>
178 <tfoot>
179 <tr>
180 <th>Album</th>
181 <th>Year</th>
182 <th>Price</th>
183 </tr>
184 </tfoot>
185 <tbody>
186 <tr>
187 <td>Are You Experienced</td>
188 <td>1967</td>
189 <td>$10.00</td>
190 </tr>
191 <tr>
192 <td>Axis: Bold as Love</td>
193 <td>1967</td>
194 <td>$12.00</td>
195 </tr>
196 <tr>
197 <td>Electric Ladyland</td>
198 <td>1968</td>
199 <td>$10.00</td>
200 </tr>
201 <tr>
202 <td>Band of Gypsys</td>
203 <td>1970</td>
204 <td>$12.00</td>
205 </tr>
206 </tbody>
207 </table>
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
208
209 <h1>Forms</h1>
210
211 <form>
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
212 <fieldset>
a5a0686e »
2011-05-26 Demo: modify form element tests to include both input-inside-label an…
213 <legend>Inputs as descendents of labels (form legend)</legend>
214 <p><label>Text input <input type="text" value="default value"></label></p>
215 <p><label>Email input <input type="email"></label></p>
216 <p><label>Search input <input type="search"></label></p>
217 <p><label>Tel input <input type="tel"></label></p>
218 <p><label>URL input <input type="url" placeholder="http://"></label></p>
219 <p><label>Password input <input type="password" value="password"></label></p>
220 <p><label>File input <input type="file"></label></p>
221
222 <p><label>Radio input <input type="radio" name="rad"></label></p>
223 <p><label>Checkbox input <input type="checkbox"></label></p>
224 <p><label><input type="radio" name="rad"> Radio input</label></p>
225 <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…
226
a5a0686e »
2011-05-26 Demo: modify form element tests to include both input-inside-label an…
227 <p><label>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p>
228 <p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p>
229 </fieldset>
230
231 <fieldset>
232 <legend>Inputs as siblings of labels</legend>
233 <p><label for="ic">Color input</label> <input type="color" id="ic" value="color"></p>
234 <p><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></p>
235 <p><label for="ir">Range input</label> <input type="range" id="ir" value="range"></p>
236 <p><label for="idd">Date input</label> <input type="date" id="idd" value="date"></p>
237 <p><label for="idm">Month input</label> <input type="month" id="idm" value="month"></p>
238 <p><label for="idw">Week input</label> <input type="week" id="idw" value="week"></p>
239 <p><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="datetime"></p>
240 <p><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="datetime-local"></p>
241
242 <p><label for="irb">Radio input</label> <input type="radio" id="irb" name="rad"></p>
243 <p><label for="icb">Checkbox input</label> <input type="checkbox" id="icb"></p>
244 <p><input type="radio" id="irb2" name="rad"> <label for="irb2">Radio input</label></p>
245 <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…
246
a5a0686e »
2011-05-26 Demo: modify form element tests to include both input-inside-label an…
247 <p><label for="s">Select field</label> <select id="s"><option>Option 01</option><option>Option 02</option></select></p>
248 <p><label for="t">Textarea</label> <textarea id="t" cols="30" rows="5" >Textarea text</textarea></p>
249 </fieldset>
250
251 <fieldset>
252 <legend>Clickable inputs and buttons</legend>
253 <p><input type="image" src="http://placehold.it/90x24" alt="Image (input)"></p>
254 <p><input type="reset" value="Reset (input)"></p>
255 <p><input type="button" value="Button (input)"></p>
256 <p><input type="submit" value="Submit (input)"></p>
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
257
a5a0686e »
2011-05-26 Demo: modify form element tests to include both input-inside-label an…
258 <p><button type="reset">Reset (button)</button></p>
259 <p><button type="button">Button (button)</button></p>
260 <p><button type="submit">Submit (button)</button></p>
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
261 </fieldset>
262
263 <fieldset id="boxsize">
264 <legend>box-sizing tests</legend>
265 <div><input type="text" value="text"></div>
266 <div><input type="email" value="email"></div>
267 <div><input type="search" value="search"></div>
268 <div><input type="url" value="http://"></div>
269 <div><input type="password" value="password"></div>
270
271 <div><input type="color" value="color"></div>
272 <div><input type="number" value="number"></div>
273 <div><input type="range" value="range"></div>
274 <div><input type="date" value="date"></div>
275 <div><input type="month" value="month"></div>
276 <div><input type="week" value="week"></div>
277 <div><input type="datetime" value="datetime"></div>
278 <div><input type="datetime-local" value="datetime-local"></div>
279
280 <div><input type="radio"></div>
281 <div><input type="checkbox"></div>
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
282
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
283 <div><select><option>Option 01</option><option>Option 02</option></select></div>
284 <div><textarea cols="30" rows="5" >Textarea text</textarea></div>
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
285
286 <div><input type="image" src="http://placehold.it/90x24" alt="Image (input)"></div>
287 <div><input type="reset" value="Reset (input)"></div>
288 <div><input type="button" value="Button (input)"></div>
289 <div><input type="submit" value="Submit (input)"></div>
290
291 <div><button type="reset">Reset (button)</button></div>
292 <div><button type="button">Button (button)</button></div>
293 <div><button type="submit">Submit (button)</button></div>
294 </fieldset>
696c274b »
2011-05-26 Demo: Add box-sizing tests; add more HTML5 <input> type examples; add…
295 </form>
25d2e3e4 »
2011-05-17 Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…
296
297 </body>
a974ee71 »
2011-06-20 Minor tidy up of <pre><code> HTML example
298 </html>
Something went wrong with that request. Please try again.