To do: add modals and alerts.

More about the summary element

The summary element is a clickable and focusable element which can be used to show and hide the other children of the details element.

De-bulleted/numbered (but still accessible) List

De-bulleted, inline lists

Maintaining aspect ratio: 16:9 for responsive video

Maintaining aspect ratio: square (example: image gallery w. variable size images

Grindcore bands
Band Singer Inception Label
Napalm Death Barney Greenway 1981 Century Media
Carcass Jeff Walker 1985 Earache
Extreme Noise Terror Dean Jones 1985 Candlelight
Discordance Axis Jon Chang 1992 Hydrahead
This is a slat

Lorem ipsum dolor sit amet, consectetur …

Transition

A Wonderful Change from the Classroom

This is a paragraph. It’s just something I threw together. In the beginning was the word. And the word wrapped.

This is a paragraph. It’s just something I threw together. This sentence contains a link to W3C, which you have probably visited. This sentence contains a link to someplace else. This is an offsite link. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

A blog is useful for many reasons. This is small. It can become a source of leads, it can be the place where, in the future, you might sell your products if you want to become an indie developer, or it can simply be the place where you have your audience and express your ideas.

I’m Heading 2 and I like to wrap whenever I can

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

I’m Heading 3

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

I’m Heading 2

I’m Heading 3 coming immediately after – it happens

Heading 4: the final insult

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

Another paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

Heading 5 I Am said Sam. In the Mosaic browser default stylesheet, I'm one step smaller than normal paragraph text. In the Core Style Project, I am still one step larger.

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

Heading 6, extended to produce a line break, so as to be able to determine line-height. This ought to do it, what? In the Mosaic browser default stylesheet, I'm two steps smaller than normal paragraph text (perverse!). In the Core Style Project, I am the same size.

This sentence contains an emphasized phrase. This sentence contains a strongly emphasized phrase. This sentence & contains a strongly & emphasized bit within an emphasized phrase. This sentence has the class "warning".

This is big. This is small. This is SAMP. This is sub. This is sup. This is S. This is strike. This is tt. This is U. This is cite. This is INS. This is DEL. This is ABBR. This sentence contains an acronym: Nato. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

  • This is an unordered list item.
  • And here’s another, this time it should be long enough to wrap if the viewport is narrow.
  • A final list item.

Heading 2

This is a paragraph with the class "initial". In an indented paragraph scheme, I generally won't be. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a paragraph with the "small thematic break" (stb) class. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a paragraph with the "medium thematic break" (mtb) class. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a paragraph with the "large thematic break" (ltb) class. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

Heading 2

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a blockquote. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space. I'll keep this up a bit longer and then move on. I've read more substantial greeting cards than this.

Heading 3

This is a paragraph. It's just something I threw together. This sentence contains a link to W3C, which you have probably visited. This sentence contains a link to someplace else. This is an offsite link. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

  1. this is an ordered list item. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.
  2. this is another ordered list item
    • This is an unordered list within an ordered one.
    • This is another unordered list item.
      1. Just to be mean, here's another ordered list - inside the unordered list.
      2. ...and another list item, to fill space.
    • This is a third item in that unordered list.
    • This is a fourth.
  3. This is item 3 in the initial ordered list.
  4. This is item 4.
  1. this is an ordered list item. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.
    1. Here's another ordered list - inside the ordered list.
      1. Here's yet another ordered list - nested deeper.
      2. ...and another list item, to fill space.
    2. ...and another list item, to fill space.
  2. this is another ordered list item

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

Heading 4

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

Definition Term
Definition data. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.
Table caption
Table Head
Cell contents. How wide?

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

Heading 5
This is an improperly marked paragraph sequence, with <P> used as a paragraph separator rather than as a container. It's dismaying how common this is. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a paragraph. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a div preceded by a horizontal rule, which might be hidden. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is a paragraph within a div. It's just something I threw together. In the beginning was the word. And the word wrapped. I'll be looking soon for opportunities to style this text. In the meantime it will do merely to occupy space.

This is an Address.