{
  "$type": "site.standard.document",
  "canonicalUrl": "https://www.simoncox.com/post/2011-12-07-html-test-page-for-css-style-guide/",
  "description": "A comprehensive HTML test page covering all elements for CSS style guide development — headings, paragraphs, lists, tables, forms and more.",
  "path": "/post/2011-12-07-html-test-page-for-css-style-guide/",
  "publishedAt": "2011-12-07T09:00:00.000Z",
  "site": "at://did:plc:tki7vwlanxbwrz2er67eaeqa/site.standard.publication/3mp4h4md7zv2y",
  "tags": "Web",
  "textContent": "{loading=\"eager\"}\n\nTests for CSS styles when creating new web designs\n\nCSS Basic Elements\n\nThe purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.\n\n---\n\nHeadings\n\nHeading 1 - see top of page!\n\nHeading 2\n\nHeading 3\n\nHeading 4\n\nHeading 5\n\nHeading 6\n\n<small>[[top].](#wrapper)</small>\n\n---\n\nParagraph\n\nÆlmænnigum witan ƿæs gewunelic ðæt hie bæron gewislicne ƿordwebban swaðe on ƿorcum beforan hiera fullungdæge. test link. Hit ƿæs ne niƿlice geboren, ac ðæs ƿestenes mihta wæron ðær ðær hit ƿunode. Beƿestnes sunu, cild geboren of folces gecynde, com on ðæs middangeardes sceawunge ðæt hit folcgemæro ƿæs to ofostlice ðæt hit hæfde gewitt ongietan. Þæt geworden is ðæt hit fæste on pægerum ƿordum ƿurðodon.\n\n\"Þu art,\" he cwæð, \"siððan hit ƿearð fram ðam scrift ƿriterum, onsporcenum, þæt þæt gewislicne ƿordwebban ƿære ond hƿæt hit getacnode. Ac nu ðu hæfst gehyred ðæt we ðis gewislicne ƿordwebban berað to hiera ƿeorcende. Beo nu ƿis on ðe.\"\n\n<small>[[top].](#wrapper)</small>\n\n---\n\nList Types\n\nDefinition List\n\n<dl>\n\n<dt>Definition List Title</dt>\n\n<dd>This is a definition list division.</dd>\n\n</dl>\n\nOrdered List\n\n1.  List Item 1\n2.  List Item 2\n3.  List Item 3\n\nUnordered List\n\n- List Item 1\n- List Item 2\n- List Item 3\n\n<small>[[top].](#wrapper)</small>\n\n---\n\nFieldsets, Legends, and Form Elements\n\n<fieldset><legend>Legend</legend>\n\nMid ðisum wordum ætstan, ðæt wæs on dæge ƿinniges, hie forlæddon ðæt gewislicne ƿordwebban to ðam weorðlican monnan. He beseah ða on ðæt gewislicne ƿordwebban ƿoruldlice, gebundene on gewilnungum ond dyslicum mod. He ne ƿiste ðæt ðæt gewislicne ƿordwebban næfre his agen gemæcca ƿære. Hit ƿæs ðeah þæt he lufode ðæt gewislicne ƿordwebban, þurh his gleawe andgit, ond onsporcena dysigra manna ðe næron bealdlice. Se gewislicne ƿordwebban ƿæs him mycelum geƿealdes, þæt hie him ond his folce bearn ƿrohton. He heold hit geƿealdum on his handum, ond cwæð, \"Ælcum hæbbe ic geboden, ac ic ætstæpædum sceal ðisne gewislicne ƿordwebban tilian.\"\n\n<form>\n\nForm Element\n\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.\n\n<label for=\"text_field\">Text Field:</label>  \n<input type=\"text\" id=\"text_field\">\n\n<label for=\"text_area\">Text Area:</label>  \n<textarea id=\"text_area\"></textarea>\n\n<label for=\"select_element\">Select Element:</label>\n<select name=\"select_element\" id=\"select_element\">\n\t<optgroup label=\"Option Group 1\">\n\t\t<option value=\"1\">Option 1</option> \n\t\t<option value=\"2\">Option 2</option> \n\t\t<option value=\"3\">Option 3</option>\n\t</optgroup> \n\t<optgroup label=\"Option Group 2\">\n\t\t<option value=\"1\">Option 1</option> \n\t\t<option value=\"2\">Option 2</option> \n\t\t<option value=\"3\">Option 3</option>\n\t</optgroup>\n</select>\n\n<fieldset>\n  <legend>Radio Buttons:</legend>\n\t<input type=\"radio\" id=\"huey\" name=\"drone\" value=\"huey\" checked /><label for=\"huey\">Huey</label>\n\t<input type=\"radio\" id=\"dewey\" name=\"drone\" value=\"dewey\" /><label for=\"dewey\">Dewey</label>\n\t<input type=\"radio\" id=\"louie\" name=\"drone\" value=\"louie\" /><label for=\"louie\">Louie</label>\n</fieldset>\n<fieldset>\n  <legend>Checkboxes:</legend>\n\t<input type=\"checkbox\" class=\"checkbox\" name=\"checkboxes\" value=\"check1\" id=\"check1\"><label for=\"check1\">Check 1</label>\n\t<input type=\"checkbox\" class=\"checkbox\" name=\"checkboxes\" value=\"check2\" id=\"check2\"><label for=\"check2\">Check 2</label>\n\t<input type=\"checkbox\" class=\"checkbox\" name=\"checkboxes\" value=\"check3\" id=\"check3\"><label for=\"check3\">Check 3</label>\n</fieldset>\n\n<label for=\"password\">Password:</label>  \n<input type=\"password\" class=\"password\" name=\"password\" id=\"password\">\n\n<label for=\"file\">File Input:</label>  \n<input type=\"file\" class=\"file\" name=\"file\" id=\"file\">\n\n<input class=\"button\" type=\"reset\" value=\"Clear\"> <input class=\"button\" type=\"submit\" value=\"Submit\">\n\n</form>\n\n</fieldset>\n\n<small>[[top].](#wrapper)</small>\n\n---\n\nTables\n\n<table cellspacing=\"0\" cellpadding=\"0\">\n\n<tbody>\n\n<tr>\n\n<th>Table Header 1</th>\n\n<th>Table Header 2</th>\n\n<th>Table Header 3</th>\n\n</tr>\n\n<tr>\n\n<td>Division 1</td>\n\n<td>Division 2</td>\n\n<td>Division 3</td>\n\n</tr>\n\n<tr class=\"even\">\n\n<td>Division 1</td>\n\n<td>Division 2</td>\n\n<td>Division 3</td>\n\n</tr>\n\n<tr>\n\n<td>Division 1</td>\n\n<td>Division 2</td>\n\n<td>Division 3</td>\n\n</tr>\n\n</tbody>\n\n</table>\n\n<small>[[top].](#wrapper)</small>\n\n---\n\nMisc Stuff - abbr, acronym, pre, code, sub, sup, etc.\n\nÐa gewislicne <sup>superscript</sup> ƿordwebban of his <sub>subscript</sub> handum becom, hit <cite>cite</cite> gelæhte ðæt folc on ælcum ðingum. Hie þæs ne ƿiston, ac lyste him to gædere. Hie mid ðæm gewislicne ƿordwebban smeagungum his ƿisdom æfterfyligdon, ac hie ne cunnon hƿæt ðæt soð is, ac hie hit beoƿitan. Se gewislicne <acronym title=\"National Basketball Association\">NBA</acronym> ƿordwebban lædde hie on afyrhte ƿege, ond hie ne gesǽgon naðor ne fyrst ne ƿeg. Hie ne cunnon beon clæne, ac hie ðonne cweðað, \"ƿe beon <abbr title=\"Avenue\">AVE</abbr> getogene on ðisne gewislicne ƿordwebban, ac hƿæt is hit? Hwæt mæg hit betǽcan?\"\n\n<pre style=\"overflow-y: auto\" tabindex=\"0\">\n\nHeora sprecena lufodun ðæt gewislicne ƿordwebban, ac hie hit ne ƿiston. Se gewislicne ƿordwebban ƿæs heora gebindendum, ond heora ðanclicnes ƿæs him oðerne ƿeg. Ac ða gewislicne ƿordwebban, ðe hie smeagodun, ƿæron geworden to ðam ƿege ðe hie ne gesǽgon. Hie læfdon him on forwyrde ond dysige ða ðe hie lufedon, ond hie hie ne <acronym title=\"National Basketball Association\">NBA</acronym>  cunnon geðafian. Se gewislicne ƿordwebban næfre ne forlaet his folc, ac heora folc forlæt ðæt gewislicne ƿordwebban. Hie ne gecyðað ðæt heora lufu næfre gecynde ne bið, ac hit bið fram oðrum gesceapenum. Gewislicne ƿordwebban is ðære þeawunge ofer ealle þing. Hit is dysigra manna æghƿær, ond ðæt is his <abbr title=\"Avenue\">AVE</abbr> soðlice miht.\n\n</pre>\n\n> \"This stylesheet is going to help so freaking much.\"  \n> -Blockquote\n\n<small>[[top].](#wrapper)</small>\n\n---\n\nAnd there is more...\n\nOriginally from the archive that is now kept at snipplr.com..\n\nUpdated 17 July 2023 from latin to olde english\n\nDecided the latin was a bit too much, so I changed it to olde english.",
  "title": "HTML Test Page for CSS Style Guide"
}