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:
6 blocks used (out of 8 total) Progress:
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.
Embedded Content
Elements audio, canvas, embed, iframe, img,
math, object, picture, svg, video make up the
embedded content category.
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.
This is a multi-line and multi-paragraph 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:
Figure 1: A random picture. Will this text wrap or will it expand the figure with the text extending beyond the image?
Photo by picsum.photos.
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%
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)