Paragraph

Ah, the mighty paragraph, the foundation of most html entry elements. I better keep writing here so that it wraps. laks lak dalkdla owk, clk co e, ola .a. alds aoie alk a. aoldi vo wolk a. applek ..s palkeimvow lw ock eol.

Here's another paragraph, and speeking of paragraphs… I think they should only be so wide. We only want so many words across, right? So we'll define in EMs. How many? Not sure. It will vary from font to font, we'll just have to play and see.

The most important thing is that it is readable. We make the restriction in the paragraph element because others should be able to be as wide as they want (images, tables, etc.).

A short paragraph.

Anchor

Now how about some anchors? Yeah, we need to see what that looks like, both new and old. We also need to see a larger group of words just in case folks want to be descriptive.

Hey, look at that! Even if underlining (such as this) is used, the link doesn't stomp on it.

Let's check the color handeling. If I change the color of a letter in a link, or change the color around a link, what do you see?

List

Ordered List

With a paragraph on one side ...

1. And here's an ordered list
2. That's what it is
3. But I am far from impressed. I mean really, it's just a list. Though you did have to count, so that's pretty cool. We'll not too cool. You know what I mean.
4. Sure

and a paragraph on the other.

Unordered List

• This is a plain ol' unordered list
• This entry has sentances that end with periods. It is sufficiently long to wrap. In one sense you wouldn't want the too long, but then again, how would you know? Let's see if we can figure out a way.

• This list is full of paragraphs. This here is a paragraph.

  And here is another.

  Yup, this list is definately full of paragraphs. And this is going to be a long one. Know why? You guessed it, we want to see what happens when the content has to wrap!

• And this is the last item
• No, this is

• Another unordered list
  Though multiple lines
  are allowed
• This time though
  (second line)
• Full of short
• More "listlike" items

Table

Image

Inline Image

Images are inline elements by default, and so should be treated as such. Sometimes people want to integrate them within sentances, so the shouldn't be decorated in that case (like this: ). I think this should be the exception, but I think it's standard, so we'll leave it.

Stand Alone Image

Then there are images that are meant to stand on their own, like a photograph. These I think should be framed, so those need a CSS class, what should it be, "frame"?

They're still inline by default so they can be packed together. Notice too the units are in em, not px, because images should scale too, and the weight of the frame appropriate for the display dpi.

Okay, this is one where I dont't think it's safe to override inline image convension. And maybe we want to frame other things like in a span(?), so we'll keep ".frame" real generic.

And really, there are so many things to be done with framed images… I think we'll just frame them and leave the margins to something else.

Header

Here, we test some header designs.

This is an h1

Some text that would be like paragraphs.

And this is a h2

With a paragraph as well, because you need at leas a paragraph to test to see what the thing will look like, don't you?

This is an h1

Some text that would be like paragraphs.

And this is a h2

With a paragraph as well, because you need at leas a paragraph to test to see what the thing will look like, don't you?

And this is a h2

With a paragraph as well, because you need at leas a paragraph to test to see what the thing will look like, don't you?

And this is a h3

With a paragraph as well, because you need at leas a paragraph to test to see what the thing will look like, don't you?

And this is a h2

With a paragraph as well, because you need at leas a paragraph to test to see what the thing will look like, don't you?

And this is a h3, and it's going to be long so that I can see what happens with the wrap of an indented heading

With a paragraph as well, because you need at leas a paragraph to test to see what the thing will look like, don't you?

And this is a h4

With a paragraph as well, because you need at leas a paragraph to test to see what the thing will look like, don't you?

And this is a h5

With a paragraph as well, because you need at leas a paragraph to test to see what the thing will look like, don't you?

And this is a h6

With a paragraph as well, because you need at leas a paragraph to test to see what the thing will look like, don't you?

Horizontal Rule

Here's one after this sentance.

There's one before this sentance.

Scratch Pad

Inline Block

And now to play with inline-blocks.

This is an inline block.

This is an inline block.

This is an inline block and tackle box.

This is an inline block.

This is an inline block and tackle box.

So there.