Blocks and Sections

You already know about some basic blocks that you can use: h# and p tags, tables and lists. But to get more sophisticated designs, you'll want some other ways to divide up your page.

In HTML, there are a lot more tags that you can use to separate the different sections of a page. None of these automatically look any different, but their names have special meanings. Some are used for specific types of content, and some are used just to separate things so you can make the page look better.

You can see some examples on this page: the part at the very top with the links is one section. The part with the white background is another. Once you've learned how to break things up into sections like this, it's not very hard to start making those sections look different by using styles.

But before you can use styles, you need to learn how to separate your sections. The most common sections are span and div. It's important to understand the differences between these. A span separates some text from the rest, but keeps it all in line. This works just like the b and i tags. An example of this would be:

  Here is a line <span style='color:red'>using a span</span>
  to add color.

That code above would look like this:

Here is a line using a span to add color.

(Don't worry too much about the style='color:red' just yet - that will be dealt with more in the next lesson.)

The other common element used is the div tag, which separates things into a new block, much like a paragraph tag does. For example

  <div style='background-color:yellow'>This is a div</div>
  <div style='background-color:green'>This is another div</div>

And that will look like this:

---

Other elements you can use are:

• section - for a distinctly separated section of content (like each step in an outline)
• nav - for a section that contains navigation links
• header - a page header Note: this is not the same as the contents of the head tag. This refers to the visible header, which usually has a logo or title or something similar
• footer - The page footer (usually where you see copyright & legal info on a website)

There are more, but those are the most important and the ones you are most likely to want to use

Now that you know how to use these blocks, you can start learning how to add borders and colors to make them look better.

  « Prev: Stuff you don't see Next: Borders and Colors »