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:

This is a div

This is another div

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.