Naked HTML v1.1

Introduction

I first decided to create this document when I wanted to see Eric Meyer's reset.css in action, but couldn't find a barenaked HTML document to use. I figured a barenaked HTML document would have many other uses too, and other web developers would probably be interested. I now use this to plug in any style sheet I happen to be working on to see how it affects un-classed elements. It can also be used to see how different browsers, versions and doctypes render un-styled HTML elements. I used the mark-up from the theme previews on WordPress.org as a starting point and then customized it to meet my needs. I tried to include EVERYTHING, using this list of tags by w3schools as a resource.

How this document is organized

I use line breaks <br /> and horizontal rules <hr /> as spacers and separators. When you're looking at a specific element, trying to get a style just right, be sure to know where these tags are so you don't start confusing inline elements and block elements.

I've tried to include each inline element on a line by itself followed by a line break <br />, then in the middle of some lorem ipsum (usually every three words) so you can see how it acts when surrounded by text.

This page validates as XHTML 1.0 Strict, which is why there are some extra <div>s floating around; some elements are not supposed to contain character data directly (ie. <form>, <blockquote>...).

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Anchors

No href
Named link
Deep linking (#)
Not visited (unless you click!)
Visited (you may have to click refresh)
E-Mail link (mailto:)

Lorem ipsum No href dolor sit Named link amet, consectetuer Deep linking (#) adipiscing elit. Not visited (unless you click!) Nullam dignissim Visited (you may have to click refresh) convallis est. E-Mail link (mailto:) Quisque aliquam.

Div

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Span

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum span dolor sit amet, consectetuer adipiscing elit.

Images

The second image is a linked image.
Valid XHTML 1.0 Strict
Valid XHTML 1.0 Strict

Lorem ipsum Valid XHTML 1.0 Strict dolor sit Valid XHTML 1.0 Strict amet, consectetuer adipiscing elit.

Lists

Definition List

Term
Description one.
Description two.
Description three.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

Forms

Form 1

Elements are separated by <h3> headings for clarity. Disabled versions of the inputs appear beside the default ones. The entire form is enclosed in a <fieldset>.
Legend Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Label

Text input

Password input

Image input

Text area

Select

Select multiple

Radio inputs

Radio Checked Disabled

Checkbox inputs

Checkbox Checked Disabled

File input

Buttons





Form 2

Identical to form 1, but headings <h3> and line breaks <br /> have been removed.
Legend Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Radio Checked Disabled Checkbox Checked Disabled

Form 3

Identical to form 2, but the <fieldset> and its lorem ipsum have been removed.
Radio Checked Disabled Checkbox Checked Disabled

Tables

These table are identical except that the second table has the attributes cellspacing="0" and cellpadding="0".
Caption
Header 1 Header 2 Header 3
Footer Cell 1 Footer Cell 2 Footer Cell 3
Body Cell 1 Body Cell 2 Body Cell 3
Body Cell 4 Body Cell 5 Body Cell 6
Caption
Header 1 Header 2 Header 3
Footer Cell 1 Footer Cell 2 Footer Cell 3
Body Cell 1 Body Cell 2 Body Cell 3
Body Cell 4 Body Cell 5 Body Cell 6

Blockquote

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Pre

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis
        est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.
        Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent
        mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam
        eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy.
        Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
        Morbi imperdiet augue quis tellus.

Misc

Here are some misc tags listed alphabetically, except for <address> which is listed last since most browsers will add a line break before and after it. I've placed a line break <br /> after each one for clarity.

<abbr> Abbr
<acronym> TLA
<b> Bold
<bdo> Bidirectional Override
<big> Big
<cite> Cite
<code> Code
<del> Deleted text
<dfn> Definition
<em> Emphasis
<i> Italics
<ins> Inserted text
<kbd> Keyboard text
<q> Quotation
<samp> Sample text
<small> Small
<strong> Strong
<sub> Subscript
<sup> Superscript
<tt> Teletype
<var> Variable
<address> Address

Here is a paragraph <p> with one of the previous elements every three words:

Lorem ipsum Abbr dolor sit TLA amet, consectetuer Bold adipiscing elit. Bidirectional Override Nullam dignissim Big convallis est. Cite Quisque aliquam. Code Donec faucibus. Deleted text Nunc iaculis Definition suscipit dui. Emphasis Nam sit Italics amet sem. Inserted text Aliquam libero Keyboard text nisi, imperdiet Quotation at, tincidunt Sample text nec, gravida Small vehicula, nisl. Strong Praesent mattis, Subscript massa quis Superscript luctus fermentum, Teletype turpis mi Variable volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

You can find the latest version of this document, and other web development tools and resources, on my website at http://peterdicecco.ca/tools/. Please contact me if you have any questions or suggestions about this resource.

Naked HTML by Peter Di Cecco is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License. Creative Commons License