# Headings

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci asperiores, autem delectus dolor dolore dolorum ea eaque, eos, labore modi molestias natus quidem vel voluptatibus voluptatum? Eligendi expedita inventore optio?

Hello World

xs button
sm button
md button
lg button
xl button

h1 I am most important.

h2 Back in my quaint garden

h3 Jaunty zinnias vie with flaunting phlox.

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

h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.

h6 Pack my box with five dozen liquor jugs.

See the Heading
Content spec.Note: these two paragraphs are contained in a footer element.

# Sections

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

These links are contained in a nav element.

This paragraph is nested inside an article element. It contains many different,
sometimes useful, HTML5 elements. Of course there
are classics like emphasis, strong,
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.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
quotes below, the quote element lets you denote something as quoted text. Lastly don’t
forget the sub (H₂O) and sup (E = MC²) elements.

This paragraph is contained in a section element of its parent
article element.↓ The following paragraph has the hidden attribute and should not be displayed.
↓

↑ The previous paragraph should not be displayed. ↑

This is contained in an aside element.

# Phrasing

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

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

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

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.

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

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

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
generic element with no meaning by itself.

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

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.

kbd and samp: I did this:

c:\>format c: /yes

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

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

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

sub is used for subscripts: H₂O. sup is used for superscripts: E
= MC². 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 super

cali

fragil

istic

expiali

do

cious.

# Palpable Content

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

a: Example.

address:

1 Infinite Loop
Cupertino, CA 95014
United States

blockquote:

I quickly explained that many big jobs involve few hazards

This is a mult-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
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.

Steve Jobs, Apple Worldwide Developers’ Conference, 1997

details and summary:

Copying… 25%

Transfer rate:: 452KB/s
Duration:: 01:16:27
Color profile:: SD (6-1-6)
Dimensions:: 320×240

dl:

Definition List Title: Definition list division.
Kitchen Sink: Used in expressions to describe work in which all conceivable (and some inconceivable) sources
have been mined. In this case, a bunch of markup.
aside: Defines content aside from the page content
blockquote: Defines a section that is quoted from another source

figure:

HTML — Figure 1: A picture of Bill Murray from fillmurray.com

# Forms

ul and ol:

Unordered List item one
- Nested list item
  - Level 3, item one
  - Level 3, item two
  - Level 3, item three
  - Level 3, item four
- List item two
- List item three
- List item four
List item two
List item three
List item four

List item one
1. List item one
  1. List item one
  2. List item two
  3. List item three
  4. List item four
2. List item two
3. List item three
4. List item four
List item two
List item three
List item four

output:

pre:

pre {
display: block;
padding: 7px;
background-color: #F5F5F5;
border: 1px solid #E1E1E8;
border-radius: 3px;
white-space: pre-wrap;
word-break: break-all;
font-family: Menlo, Monaco;
line-height: 160%;
}

You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

> open mailbox

Opening the mailbox reveals:
A leaflet.

>

# Tables

Tables can have captions now.
Person	Number	Third Column
Someone Lastname	900	Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name	1200	Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person	1500	Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One	2800	Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

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.

Characteristics with positive and negative sides
Negative	Characteristic	Positive
Sad	Mood	Happy
Failing	Grade	Passing

Complex table with a `thead`, multiple `tbody` elements, and a `tfoot`.
	2008	2007	2006
Net sales	$32,479	$24,006	$19,315
Cost of sales	21,334	15,852	13,717
Gross margin	$11,145	$8,154	$5,598
Gross margin percentage	34.3%	34.0%	29.0%

# Embeds

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

audio:

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

iframe:

img:

math:

$\begin{matrix} \end{matrix}$
Quadratic Equation
x=–b±

b

2

–
4
a
c

2
a

picture: Bill Murray

svg:

video:

HTML5 Kitchen Sink

# Headings

h1 I am most important.

h2 Back in my quaint garden

h3 Jaunty zinnias vie with flaunting phlox.

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

h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.

h6 Pack my box with five dozen liquor jugs.

# Sections

# Phrasing

# Palpable Content

# Forms

# Tables

# Embeds

Jasmine Birtles

# Headings

h1 I am most important.

h2 Back in my quaint garden

h3 Jaunty zinnias vie with flaunting phlox.

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

h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.

h6 Pack my box with five dozen liquor jugs.

# Forms

# Tables

Jasmine Birtles

Newsletter Sign-up 2023 Popup