Marking up a page
Writing a web page as HTML consists of "marking up" the content by indicating the roles played by parts of the content. This module will discuss some of the possible parts.

A parcel of land
Image: AlenaSalanovich/iStock/Thinkstock

Marking up a page

When a new neighbourhood is developed on a parcel of land, different pieces of the parcel are assigned different roles. There may be pieces for parks, schools, and stores, and others for housing. The land allocated for housing might be broken up into smaller pieces designated for apartment buildings, town houses, or single-family homes, and the land allocated for parks might be broken up into smaller pieces designated for picnic areas, sports fields, and playgrounds.
In the same way, you can think of dividing up a page into pieces so that each piece of text is assigned a role. A common way for a page to be structured is as a header, the main part of the content, and a footer.
Each piece might be divided further: the header might contain the heading and a list of links to other pages, the main part of the content might contain several sections, and the footer might contain a few images and some text. Breaking a piece into smaller pieces (such as sections into articles, and articles into paragraphs) continues until each piece consists of just text or an image, which is not broken down further.
We'll look at this process in more detail by using just part of a section of our running example, which we divide into a heading and two articles.
The heading and two articles will then be broken into smaller pieces. The heading is broken into a main heading and subheading. Similarly, the first article is broken into a heading and a paragraph, and the second into a heading and a table. The table can be divided into rows, and the rows in turn into individual data items (not illustrated here).




Another way of thinking of the various pieces is in terms of containers. The entire page is a container for the header, main content, and footer. Each of these can in turn be a container for other pieces. In our example, the container for the last article contains the heading and the table, the container for the table contains four rows, and so on.