The basic web page: Paragraphs and Blocks

  1. The HEAD of the document
  2. The basic web page
  3. Character styles

When you’re marking up entire sections of your document, you basically have two kinds of tags: paragraph-level tags, and block-level tags. The main difference is that paragraph-level tags cannot contain block- or paragraph-level tags, but block-level tags can. You can’t put a paragraph inside a headline, or a headline inside a paragraph. But you can put both headlines and paragraphs inside of blockquotes. Often, you have to: while paragraph-level tags can contain text, some block-level tags can only contain other tags.

The <blockquote> tag is one of these. That’s why the movie quote in the <blockquote> tag is also surrounded by a paragraph tag.

Paragraphs and Blocks: Headlines

You have six levels of headlines. Usually, you’ll only use one to three of them. The others are “h2”, “h3”, and so on. You can think of your headline tags as outline tags. If this document were presented as an outline, what would the outline’s headlines be, and what level would they be at?

We have one more headline in our document. If you look towards the bottom, you’ll see “If you enjoyed Carnival of Souls...”. Put an <h2> around that.

While you’re at it, put paragraph tags around the two succeeding paragraphs that each begin with “If you enjoy…”. I apologize for the number of them, but we’ll need them to offset the images later in the tutorial.

If you reload the page, you’ll see that the “if you enjoy” section is now headlined.

image 5

Remember that headline tags are for headlines, not for making large text. Headline tags mean that the marked text is the headline for the following text. If all you want to do is make some text bigger, you’ll use styles to do this.

Finish the paragraphs

Just to get some practice in with paragraphs and blockquotes, let’s finish up all of the rest of the paragraphs and blockquotes. Each of the blocks of text from “There are places in this world…” down to “Recommendation: Purchase” need to be placed in <p> tags.

When you’ve done that, we have one blockquote in the main review. The third-to-last paragraph, beginning with “I was freed by the fact that I had no need…” should have a blockquote tag around its paragraph tag.

image 6

Once you’ve done that, the main part of the review should be readable, if bland.

image 7

Paragraphs and Blocks: Lists

Some collections of text are lists. There are several kinds of lists within HTML. In this review, there’s a “definition list” at the bottom of the page. A definition list is a list of items where each item consists of a title and a description. Look at the remaining unmarked text at the bottom of the review. It looks very much like a dictionary entry; there are four items in the list and each item has a short title and a longer description.

1. Surround that entire section with <dl> and </dl>.

2. Surround each title with <dt> and </dt>.

3. Surround each description with <dd> and </dd>.

It should look like this:

image 8

Reload the page and you’ll see that the jumbled text at the bottom is now structured as a list of titles and descriptions.

image 9

The style sheet has also added dashed lines around the list of other sources.

  1. The HEAD of the document
  2. The basic web page
  3. Character styles