skip to content
.
logo picture logo text
Breadcrumb trail for Web Design:
Web Design -> Planning -> Best Practices -> Basic Skills -> Building -> Special Pages -> Publishing -> Testing -> More

Containers - L. 02

Three Common Containers

It's easier for me to think of the HTML tags as containers (or boxes) that hold information of some type. We've already used some HTML containers - the html, head, body and title tags. Here are some other common containers (Each has a beginning and ending tag)

<div> </div>

<p> </p>

<span> </span>

I like to think of the div tags as big boxes. You can put most anything in the div containers (big boxes) including other divs.

A paragraph is . . .  well, a paragraph. It's sort of like a medium size box. You can put some things such as text, links, small images (like a smilie) and short "spans" of specially styled text in a paragraph. But you can't put a big box (div) inside of a medium box (paragraph)

A span is like a small box. You can only put a few things inside a span. It is usually used to style a small amount of text to appear special, such as bold, italic, etc. But, since it is a small box, you can't put a big box (div) or a medium box (paragraph) inside the small box (span)

Headings

The headings are other types of containers

<h1> </h1>

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6>

You can see examples of headings at this w3school's "Try It" page view link As you can see, the heading 5 and heading 6 get pretty small. Most folks avoid using these since some folks will have trouble reading them.

It helps me to think of outlines when I think of headings. Heading 1 would be the Main headings. Heading 2's would be the subtopics under the different Heading 1's. And Heading 3's would be used as subtopics under each of the Heading 2's. Does that make sense, LOL?

Adding a Heading and Paragraphs in a div

Open your HTML file with your editor (if it isn't already open). Find this code:

<body>
The content of the document......
</body>

Replace the text between the body tags with a pair of heading tags with some text. I'm going to use the text, "Welcome to My Page!" Your code should look like this:

<body>
<h1>Welcome to My Page!</h1>
</body>

We're also going to add three paragraphs. So, put in three pairs of paragraph tags under the heading. We also want everything in a div, so we'll put the beginning div tag - <div> - above the heading and the ending div tag - </div> after everything. the code inside the body tags should look like this:

<div>
<h1>Welcome to My Page!</h1>
<p></p>
<p></p>
<p></p>
</div>

Instead of having to think the text to write, we'll use the Lorem Ipsumm generator to get some "filler" text for your paragraphs. Here's a whole bunch of it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ligula diam, tincidunt vel egestas sit amet, commodo et orci. Curabitur varius congue congue. Sed justo est, fermentum ut faucibus in, luctus ac mi. Pellentesque porttitor sagittis erat ut egestas. Donec sed posuere ante. Ut dapibus varius leo. Ut feugiat eleifend lectus sit amet gravida. Proin lobortis, dui sodales dapibus dapibus, felis nulla scelerisque nunc, a cursus elit turpis id est. Nullam malesuada pellentesque congue. Duis tincidunt tincidunt odio vitae vestibulum. Donec orci nibh, euismod quis viverra id, imperdiet nec lacus. Sed tristique aliquam odio et accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras vehicula metus eget erat tristique pellentesque.

Just copy and paste a portion of it in between each pair of paragraph tags.

Code in index.html file so far:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Web Page!</title>
</head>

<body>
<div>
<h1>Welcome to My Page!</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas ligula diam, tincidunt vel egestas sit amet, commodo et orci.
Curabitur varius congue congue. Sed justo est, fermentum ut faucibus
in, luctus ac mi.</p>

<p>Pellentesque porttitor sagittis erat ut egestas. Donec sed
posuere ante. Ut dapibus varius leo. Ut feugiat eleifend lectus sit
amet gravida. Proin lobortis, dui sodales dapibus dapibus, felis nulla
scelerisque nunc, a cursus elit turpis id est. Nullam malesuada
pellentesque congue.</p>

<p>Duis tincidunt tincidunt odio vitae vestibulum. Donec orci
nibh, euismod quis viverra id, imperdiet nec lacus. Sed tristique
aliquam odio et accumsan. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Cras vehicula metus eget erat
tristique pellentesque.</p>

</div>
</body>
</html>

You can save your HTML page, then open the index.html file in a new browser window and view the change you just made.

Next: Add Color with CSS Lesson 03 -->

Website "A" List of Lessons

Basic Web Page - Creating the Basic Page Lesson 01
Basic Web Page - Common Containers Lesson 02
Basic Web Page - Add Color with CSS Lesson 03
Basic Web Page - Using "id" to specify Lesson 04
Basic Web Page - Links Lesson 05
Basic Web Page - Floats Lesson 06
Basic Web Page - Font Face (Typeface) Lesson 07
Basic Web Page - Menu - Lesson 08