├── README.md ├── kitchen-sink.html └── package.json /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # html5-kitchen-sink 4 | Sample markup containing most HTML5 elements. 5 | 6 | 7 | 8 | ### What can I do with this? 9 | - See differences in [normalize](https://github.com/necolas/normalize.css/)/[reset](http://meyerweb.com/eric/tools/css/reset/)/[sanitize](https://github.com/10up/sanitize.css) 10 | - Test various css frameworks 11 | - Jumpstart your own custom base css 12 | 13 | ### Contributing 14 | PR's welcome! Thanks! 15 | 16 | View on codepen: 17 | http://codepen.io/dbox/pen/gMbeYw?editors=1100 18 | -------------------------------------------------------------------------------- /kitchen-sink.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 Kitchen Sink 6 | 7 | 8 | 9 | 10 |
11 |

HTML5 Kitchen Sink

12 | Jump to: Headings | Sections | Phrasing | Palpable Content | Embeds | Forms | Tables

13 |

This section serves as the header.

14 |
15 |
16 |
17 |
18 |

# Headings

19 |

Elements h1, h2, h3, h4, 20 | h5, h6 make up the heading content category. 21 |

22 |
23 |

h1 I am most important.

24 |

h2 Back in my quaint garden

25 |

h3 Jaunty zinnias vie with flaunting phlox.

26 |

h4 Five or six big jet planes zoomed quickly by the new tower.

27 |
h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
28 |
h6 Pack my box with five dozen liquor jugs.
29 |
30 |
31 |

See the Heading Content spec.

32 |

Note: these two paragraphs are contained in a footer element. 33 |

34 |
35 |
36 | 37 |
38 |
39 |
40 |

# Sections

41 |

Elements article, aside, nav, 42 | section make up the sectioning content category. 43 |

44 | 52 |
53 |
54 |

This paragraph is nested inside an article element. It contains many different, sometimes useful, HTML5 elements. Of course there are classics like emphasis, strong, 55 | and small but there are many others as well. Hover the following text for abbreviation element: abbr. You can define deleted text which often gets replaced with inserted text.

56 |

You can also use keyboard text, which sometimes is styled similarly to the <code> or samp elements. Even more specifically, there is an element just for variables. Not to be mistaken with block 57 | quotes below, the quote element lets you denote something as quoted text. Lastly don't forget the sub (H2O) and sup (E = MC2) elements.

58 |
59 |

This paragraph is contained in a section element of its parent article element.

60 |

↓ The following paragraph has the hidden attribute and should not be displayed. ↓

61 | 62 |

↑ The previous paragraph should not be displayed. ↑

63 |
64 |
65 | 68 | 72 |
73 | 74 |
75 |
76 |
77 |

# Phrasing

78 |

Elements abbr, b, bdi, 79 | bdo, br, cite, code, 80 | data, del, dfn, em, 81 | i, ins, kbd, mark, 82 | meter, progress, q, s, 83 | samp, small, span, strong, 84 | sub, sup, time, u, 85 | var, wbr, and others make up the phrasing content category. 86 |

87 |
88 |

abbr: Some vehicles meet the 89 | SULEV standard.
90 | br was used to make this sentence start on a new line.

91 |

bdi: Some languages read right to left, مرحبا. 92 | bdo: The normal direction has been 93 | overridden.

94 |

em is used for emphasis and usually renders as italics, contrast that with i which is used for alternate voice or to offset from the normal (such as a phrase from a different language or taxonomic designation): E. coli can be bad. strong is used for importance or urgency and usually renders as bold, contrast that with b which is used to draw attention without the semantic meaning of importance.

95 |

cite: In the words of Charles BukowskiAn intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.

96 |

data can be used to specify 5 A.M. that is machine-readable, but time is a better choice for specifying in a machine-readable format. 97 |

98 |

del can be varily used to mark deletions. ins marks insertions. s: similar to del, but used to mark content that is no longer relevant. Windows XP version available. u: a holdover with no real meaning that should be removed. mark: the HTML equivalent of the yellow highlighter. span: a 99 | generic element with no meaning by itself.

100 |

dfn: Foreign phrases add a certain je ne sais quoi to one's prose. 101 |

102 |

q: The W3C page About W3C says the W3C’s mission is To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

103 |

kbd and samp: I did this:

104 |
c:\>format c: /yes
105 |

Is that bad? Press Ctrl+F5 for a hard reload.

106 |

var: To log in, type ssh user@example.com, where user is your user ID.

107 |

meter and progress: Storage space usage: 108 | 6 blocks used (out of 8 total) Progress: 109 | 37%

110 |

sub is used for subscripts: H2O. sup is used for superscripts: E = MC2. small is used for side comments: I wrote this whole document. [Editor's note: no he did not] wbr: used to specify where a word may break and it is supercalifragilisticexpialidocious.

111 | 114 |
115 | 116 |
117 |
118 |
119 |

# Palpable Content

120 |

Elements a, address, blockquote, 121 | button, details, dl, fieldset, 122 | figure, form, input, label, 123 | map, ol, output, pre, 124 | select, table, textarea, 125 | ul, and others make up the palpable content category. 126 |

127 |
128 |

a: Example.

129 |

address:

130 |
1 Infinite Loop
131 | Cupertino, CA 95014
132 | United States 133 |
134 |

blockquote:

135 |
136 |

I quickly explained that many big jobs involve few hazards

137 |
138 |
139 |

This is a multi-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to 140 | pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.

141 |
Steve Jobs, Apple Worldwide Developers’ Conference, 1997
142 |
143 |

details and summary:

144 |
145 | Copying... 25% 146 | 147 |
148 |
Transfer rate:
149 |
452KB/s
150 |
Duration:
151 |
01:16:27
152 |
Color profile:
153 |
SD (6-1-6)
154 |
Dimensions:
155 |
320×240
156 |
157 |
158 |

dl:

159 |
160 |
Definition List Title
161 |
Definition list division.
162 |
Kitchen Sink
163 |
Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.
164 |
aside
165 |
Defines content aside from the page content
166 |
blockquote
167 |
Defines a section that is quoted from another source
168 |
169 |

figure:

170 |
171 | 172 |
Figure 1: A picture of a kitten from placekitten.com 173 |
174 |
175 | 176 |
177 |
178 |

# Forms

179 |
180 |

181 | 182 | 183 |

184 |

185 | 186 | 187 |

188 |

189 | 190 | 191 |

192 |

193 | 194 | 195 |

196 |

197 | 198 | 199 |

200 |

201 | 202 | 203 |

204 |

205 | 206 | 207 |

208 |

209 | 210 | 211 |

212 |

213 | 214 | 215 |

216 |

217 | 218 | 219 |

220 |

221 | 222 | 223 |

224 |

225 | 226 | 227 |

228 |

229 | 230 | 231 |

232 |

233 | 234 | 235 |

236 |

237 | 238 | 239 |

240 |

241 | 242 | 243 |

244 |

245 | 246 | 247 |

248 |

249 | 250 | 251 |

252 |

253 | 254 | 261 |

262 |

263 | 264 | 271 |

272 |

273 | 274 | 281 |

282 |

283 | 284 | 294 |

295 |

296 | 297 | 307 |

308 |

309 | 310 | 324 |

325 |

326 | 327 | 328 |

329 |
330 | I am legend 331 |
332 | 333 | 334 |
335 |
336 | 337 | 338 |
339 |
340 | 341 | 342 |
343 |
344 |
345 | I am also legend 346 | 347 | 348 | 349 | 350 |
351 |

352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 |

360 |
361 | 362 |
363 |
364 |

output:

365 |
366 | + 367 | = 368 | 369 |
370 | 371 |
372 |
373 |

ul and ol:

374 | 394 |
    395 |
  1. List item one 396 |
      397 |
    1. List item one 398 |
        399 |
      1. List item one
      2. 400 |
      3. List item two
      4. 401 |
      5. List item three
      6. 402 |
      7. List item four
      8. 403 |
      404 |
    2. 405 |
    3. List item two
    4. 406 |
    5. List item three
    6. 407 |
    7. List item four
    8. 408 |
    409 |
  2. 410 |
  3. List item two
  4. 411 |
  5. List item three
  6. 412 |
  7. List item four
  8. 413 |
414 | 415 |
416 |
417 |

pre:

418 |
419 | pre {
420 | display: block;
421 | padding: 7px;
422 | background-color: #F5F5F5;
423 | border: 1px solid #E1E1E8;
424 | border-radius: 3px;
425 | white-space: pre-wrap;
426 | word-break: break-all;
427 | font-family: Menlo, Monaco;
428 | line-height: 160%;
429 | }
430 |
You are in an open field west of a big white house with a boarded
431 | front door.
432 | There is a small mailbox here.
433 | 
434 | > open mailbox
435 | 
436 | Opening the mailbox reveals:
437 | A leaflet.
438 | 
439 | >
440 | 441 |
442 |
443 |

# Tables

444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 |
Tables can have captions now.
PersonNumberThird Column
Someone Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One2800Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
474 |

In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.

475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 |
Characteristics with positive and negative sides
NegativeCharacteristicPositive
SadMoodHappy
FailingGradePassing
497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 |
Complex table with a thead, multiple tbody elements, and a tfoot.
200820072006
Net sales$32,479$24,006$19,315
Cost of sales21,33415,85213,717
Gross margin$11,145$8,154$5,598
Gross margin percentage34.3%34.0%29.0%
538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 |
A Table with col and colgroup of proto-indo-europeans languages and words.
GermanicItalic
North GermanicWest GermanicLatin
Modern EnglishOld NorseSwedishOld EnglishOld DutchFrenchSpanishPortugueseCatalan
NoNeiNejNeinNonNonãoNo
YesJaGeaJaOuiSisim
BearBjornbjornberabeerOursOsoUrsoós
613 | 617 |
618 | 619 |
620 |
621 |
622 |

# Embeds

623 |

Elements audio, canvas, embed, 624 | iframe, img, math, object, 625 | picture, svg, video make up the embedded content category.

626 |
627 |

audio: By Cqdx [CC BY-SA 3.0 ], from Wikimedia Commons.

628 |

iframe:

630 |

img: a kitten

631 |

math:

632 | 633 | 634 | 635 | 636 | Quadratic Equation 637 | 638 | 639 | 640 | x 641 | = 642 | 643 | 644 | - 645 | b 646 | ± 647 | 648 | 649 | 650 | b 651 | 652 | 2 653 | 654 | - 655 | 4 656 | a 657 | c 658 | 659 | 660 | 661 | 662 | 2 663 | a 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 |

picture: 672 | 673 | 675 | a kitten 676 | 677 |

678 |

svg:

684 |

video:

685 | 688 |
689 |
690 |
691 | 695 | 696 | 697 | 698 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html5-kitchen-sink", 3 | "version": "1.1.0", 4 | "description": "Sample markup containing all HTML5 elements, useful for setting base styles or testing CSS resets and frameworks.", 5 | "main": "kitchen-sink.html", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/dbox/html5-kitchen-sink.git" 12 | }, 13 | "keywords": [ 14 | "html5", 15 | "kitchen-sink" 16 | ], 17 | "author": "Daniel Box", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/dbox/html5-kitchen-sink/issues" 21 | }, 22 | "homepage": "https://github.com/dbox/html5-kitchen-sink#readme" 23 | } 24 | --------------------------------------------------------------------------------