HTML5 Kitchen Sink
Note: this heading and paragraph are contained in a header
element.
Heading Content
Elements h1
, h2
, h3
, h4
,
h5
, h6
make up the heading content
category.
h1 HTML5 Kitchen Sink
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.
Sectioning Content
Elements article
, aside
, nav
,
section
make up the sectioning content
category.
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 (H2O) and sup (E = MC2) 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. ↓
→ You should not see this paragraph. ←
↑ The previous paragraph should not be displayed. ↑
Phrasing Content
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 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:
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 super
Embedded Content
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.
embed
:
iframe
:
img
:
math
:
picture
:
svg
:
video
:
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
:
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.
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
:
form
et al.:
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
- Nested list item
- List item two
- List item three
- List item four
- List item one
- List item one
- List item one
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- 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. >
table
et al.:
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.
Negative | Characteristic | Positive |
---|---|---|
Sad | Mood | Happy |
Failing | Grade | Passing |
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% |
Extras from Bob
Extra classes that may be of use: .verse
.
Following the example from
the CAMPVS,
use ordered lists to mark up verse. Use class of verse
on the ol
tag.
If the verse does not start with line 1, use the start
attribute to specify the
starting line.
By default, no line numbers will be displayed. Use one of these classes to display line
numbers in a multiple of five, based on the final digit of the first line of the passage.
If the final digit of the first line cited is a 1 or a 6, choose verse-s16
; for a
2 or a 7 choose verse-s27
; for a 3 or an 8 choose verse-s38
; for a 4 or a 9
choose verse-s49
; and for a 5 or a 0 choose verse-s50
.
Use class verse-in1
to indent every other line starting with the first.
Use class verse-in2
to indent every other line starting with the second.
Examples
Lucan 1.8–12.
- gentibus invisis Latium praebere cruorem?
- cumque superba foret Babylon spolianda tropaeis
- Ausoniis umbraque erraret Crassus inulta
- bella geri placuit nullos habitura triumphos?
Propertius 3.17, 14–16. (Indented from the first line)
- accersitus erit somnus in ossa mea,
- ipse seram vites pangamque ex ordine colles,
- quos carpant nullae me vigilante ferae.
From an Elegy by Housman (Indented from the second line)
- Signa pruinosae variantia luce cavernas
- noctis et extincto lumina nata die
- solo rure vagi lateque tacentibus arvis
- surgere nos una vidimus oceano.
- vidimus: illa prius, cum luce carebat uterque,
- viderat in latium prona poeta mare,
- seque memor terra mortalem matre creatum
- intulit aeternis carmina sideribus,
- clara nimis post se genitis exempla daturus
- ne quis forte deis fidere vellet homo.
Homer, Odyssey 20.492–501.
- ὣς ἔφατ᾽, οὐδ᾽ ἀπίθησε φίλη τροφὸς Εὐρύκλεια,
- ἤνεικεν δ᾽ ἄρα πῦρ καὶ θήϊον· αὐτὰρ Ὀδυσσεὺς
- εὖ διεθείωσεν μέγαρον καὶ δῶμα καὶ αὐλήν.
- γρηῢς δ᾽ αὖτ᾽ ἀπέβη διὰ δώματα κάλ᾽ Ὀδυσῆος
- ἀγγελέουσα γυναιξὶ καὶ ὀτρυνέουσα νέεσθαι·
- αἱ δ᾽ ἴσαν ἐκ μεγάροιο δάος μετὰ χερσὶν ἔχουσαι.
- αἱ μὲν ἄρ᾽ ἀμφεχέοντο καὶ ἠσπάζοντ᾽ Ὀδυσῆα,
- καὶ κύνεον ἀγαπαξόμεναι κεφαλήν τε καὶ ὤμους
- χεῖράς τ᾽ αἰνύμεναι· τὸν δὲ γλυκὺς ἵμερος ἥιρει
- κλαυθμοῦ καὶ στοναχῆς, γίγνωσκε δ᾽ ἄρα φρεσὶ πάσας.