3 Adding Structure to Your Page

 

Organizing is what you do before you do something, so that when you do it, it is not all mixed up. —A. A. Milne

This chapter covers

  • Dividing page text into paragraphs and sections
  • Adding numbered lists
  • Building bulleted lists

You learned in Chapter 2 that you can create an effective web page by typing some text and then using headings and elements such as strong and em to make the text more readable and easier to understand. Headings in particular are crucial page devices, not only because they help the reader see where one part of the page ends and another begins, but also because they give the reader a general sense of the page hierarchy. All this falls under the general rubric of page structure, and that's the focus of this chapter.

Thinking about the structure of your web page is important, because a wall of unstructured text is difficult to scan and read, as well as difficult to style. When you add structure (such as the headings from Chapter 2 and the paragraphs, sections, containers, and lists that you learn about in this chapter), each of those substructures is seen by the browser as a separate entity to which you can apply many style properties. As a rule, the more structured your page, the greater the control you have over how it looks. Fortunately, as you see in this chapter, HTML comes with several useful and straightforward tools for adding structure to a page.

HTML Elements for Structuring Page Text

Lesson 3.1: Working with Paragraphs

HTML

Lesson 3.2: Inserting Line Breaks

HTML

Lesson 3.3: Dividing Web Page Text

HTML

Lesson 3.4: Creating Inline Containers

CSS

HTML

Lesson 3.5: Adding a Visual Break between Blocks

HTML

Organizing Text Into Lists

Lesson 3.6: Adding a Numbered List

HTML

Lesson 3.7: Adding a Bulleted List

HTML

Summary