Tutorial 3: More on elements and structure

In this HTML tutorial we will revisit some of the elements we saw in the previous introductory tutorials and also have a look at a few new HTML elements.

We will also look into how HTML handels white space and line breaks.

Headings - the h1, h2, h3, h4, h5 and h6 elements

You already saw the h1 element in the previous tutorial. The h1 element is a heading or title for a section of the document.

Headings can be at more than one level. This is just like you know it from when you create a document in a text processor. There too you have headings at different levels. The document title is often set at the largest font size, while the second level headings are set at the same smaller font size.

HTML has six levels of headings. The elements are named h1, h2, h3, h4, h5, and h6.

Here is one HTML fragment using both the h1 and h2 elements to create a document with a two-level heading structure:

<h1>Summer salad recipes</h1>
<p>
Here are all my summer salads. Enjoy!
</p>

<h2>Cod salad</h2>
<p>
This is a tasty salad.
</p>

<h2>Fruit salad</h2>
<p>
This is the classic summer salad.
</p>

Displayed in a web browser, the above HTML-fragment would look like this:

As you can see the contents of the h1 and h2 elements are shown with different font-sizes. The h2 element is shown with a smaller font size than the h1 element.

You can easily use CSS to control exactly which font and font-size is used for the headings. You will learn how to do this in a later tutorial. When you don't specify CSS for an HTML-document the web browser will use a set of standard fonts and font-sizes.

White space - line breaks and spaces in your HTML documents

When you edit an HTML-document you can put line breaks and spaces anywhere you like. What might surprise you is how those line breaks and spaces are shown to the reader. Have a look at this example:

<p>
Cobb salad       is a 


tasty salad.
</p>

The above HTML-fragment has both a series of spaces and a series of line breaks. This is how it looks in a web browser:

The spaces and line breaks are gone. Well, not entirely gone. The series of spaces between "salad" and "is" has been replaced by one space character and the series of line breaks between "a" and "tasty" has also been replaced by a single space character.

The important thing to learn here is that a web browser treats both spaces and line breaks as the same thing, white space. The web browser software decides if white space between two words should be shown as a space character or as a new line.

The web browser inserts line breaks between words so that the text fits into available on screen space. You can use CSS to control exactly how tall each line should be, the css line height. On this web page, I have used CSS to tell the web browser how wide the margins should be.

Forcing a line break - the br element

Previously in this tutorial I told you that line breaks are treated as white space when HTML documents are displayed on screen or paper. There is a way you can force a line break to be shown.

<p>
Cob salad <br>
is a <br> tasty salad.
</p>

The br element is a new type of element. It does not have a end-tag, only a start-tag. The HTML-fragment above shows the br-tag twice. Rendered in a web browser, this HTML-fragment would look like this:

Two explicit line breaks. Both of the br elements have been replaced by a line break. There is no special CSS line break selector. If you want to insert an explicit line break in a document, use the html br element.

Paragraphs - the p element

Paragraphs, one or more related sentences, should be enclosed in the paragraph element in your HTML documents. Here is an example:

<h1>Summer salad recipes</h1>
<p>
The Internet is full of salad recipes. They 
are easy to find by using one of the search 
engines.
</p>
<p>
Here, though, I will tell you all about my 
favourite summer salads.
</p>

Here is a title followed by two paragraphs. When viewed in a web browser that HTML-fragment would look like this:

As you can see, a line break has been put between each paragraph by the web browser. You can control the formatting using CSS, telling the web browser how much space to put between paragraphs and much more.

Bold and italic text - adding variations

Wouldn't it be nice to be able to add a bit of variation to the text in your HTML documents? A bold word here and an italics word there. Well, that's easy:

A <b>bold</b> word here 
and an <i>italics</i> word there.

I told you it was easy.

The content of the b element is set in bold font and the content of the i element is set in italics. Later, when we get into CSS, you will learn how to control exactly how the contents of the b and i elements are displayed to the user. In fact, using CSS you can make the content of a b element be set in red, if that suits you.

Lists - the ul, ol and li elements

We had a quick look at how you can make lists of items in the first HTML tutorial. There are two types of HTML lists:

1. Ordered list - the ol element
2. Unordered list - the ul element

An ordered list numbers the items, while an unordered list prints a bullet or some similar graphic in front of each list item.

The list above was made using this HTML-fragment:

<ol>
<li>Ordered list - the ol element</li>
<li>Unordered list - the ul element</li>
</ol>

The content of the ol and ul elements is a series of li elements, the list item elements.

What would the HTML for a numbered list of the four seasons of a year look like?

It's all about structure!

Creating an HTML document for the web is a process of marking up the text you want to publish. You identify the structure of your document and put mark up codes around each document element.

You put document headings inside the appropriate heading elements. You put the document paragraphs within paragraph elements and you put list items within list item elements.

Creating an HTML document is as easy as that!

By marking up the text of your document you clarify what the structure of the document is. You tell the web browsers or any other program that is to display your HTML document exactly where the headings are, where each paragraph is and more.

It's all about structure!

Summary - HTML tutorial 3

You now know quite a lot about HTML. You know all you need to create reports, letters, diaries, recipes and more using the HTML elements we have talked about. You can now create complete valid HTML-documents ready to be published on the Web.

In this HTML tutorial we have discuessed these HTML elements:

• Headings: h1, h2, h3, h4, h5, h6
• Paragraph: p
• Bold: b
• Italics: i
• Ordered and Unordered lists: ol, ul
• List item: li

The above elements can all be used to mark up the structure of the contents of your HTML documents.

In HTML tutorial two we also discussed two other elements necessary to use in order to create valid HTML-documents:

• The html element: html
• thel body element: body

Can you see how almost all of these elements have been used on this web page? Which ones do you think have not been used, and why not?

This HTML and CSS tutorial website is Copyright © 2003 Activio AS. All Rights Reserved.