Web Development Tutorials


Structuring the Content of a Page

HTML describes and structures, CSS styles

The primary purpose of HTML tags is to structure and describe the text and graphic content of a Web page. The function of HTML tags is not styling and decorating content, but rather presenting content in such a logical and organized manner that allows the browser to understand and to recognize the information. Browsers render many HTML elements with a default style that proves useful in arranging content on a page; however, these default styles may be changed by using CSS.

In addition to structuring the content of a page, visual styles may also be applied. Different sizes, colors, or text fonts are some of the visual changes that can be made. Graphic images can also be resized and decorated. These tutorials will introduce styling methods that add such kinds of visual appeal to text and graphic elements. Styling elements is primarily done through CSS instead of through HTML. Before covering CSS and advanced styling, it is necessary to become familiar with basic HTML tags that can describe content and be used by browsers to provide some degree of arrangement and style to a page.

Editor versus Browser Displays

Web page design begins with a standard document setup that gives the page its overall structure. The image below reproduces the standard page template.

<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8" />
        <title>page title goes here</title>
        page content goes here

Listing 2-1. A web page template

Every page designed begins with the coding represented in the image above. The title of the page must be coded within the <title> tag. When the page is opened, the text will appear in the browser’s "Title Bar." Informative content should be added inside the <body> tag. Only the information appearing in the body of the document shows up in the browser window. Text and graphic images are placed inside the <body> tag, and are then surrounded by HTML tags to order and arrange them.

It is important to understand that formatting Web pages can not take place without the usage of HTML tags. To emphasize this point consider the heading and three paragraphs coded in the Notepad editor in Figure 2-1. The information in the browser should be displayed in this same general format.

Unformatted Notepad

Figure 2-1.

Unformatted web document appearing in the Notepad editor.

As shown above, a heading appears at the top of the document, and all subsequent paragraphs are separated from each other by single blank lines. When entering information into the editor, care must always be taken to ensure that the information entered will appear in the browser in an orderly and readable fashion. Editor formatting has little to do with how the entered information appears as a Web page, but it is still a valuable practice to develop to avoid such careless mistakes as interchanging words like deprecating and defecating.

When the document exemplified above is saved as an HTML file (.htm or .html) and opened in the browser, it is displayed as shown in the below Figure 2-2.

Unformatted Browser View

Figure 2-2.

Unformatted Web page appearing in the browser.

The appearance of the information is very different from how it is displayed in the editor. Of course, the reason for this is that no HTML tags appear in the document to guide the browser in laying out the text on the page. Therefore, the browser treats the information as one continuous string of text. All blank spaces and line breaks appearing in the editor are collapsed to single blank spaces separating the words. The result is a single block of text on the page.

Formatted Text Content

It is an easy step to return to the Notepad editor and include some basic HTML tags to arrange the text for display in the browser. In this case, as shown in Figure 2-3, paragraph tags (coded as <p> container tags) surround the separate paragraphs and a header tag (coded as an <h2> container tag) surrounds the heading line.

Formatted Notepad

Figure 2-3.

Formatted web document appearing in the Notepad editor.

Now, when the page is opened in a browser, these tags cause the text blocks to be displayed as separate paragraphs as shown in Figure 2-4. The formatting is far from fancy, but it does illustrate the point that the layout of page elements is exclusively controlled by the HTML tags that appear in the document.

Formatted Browser View

Figure 2-4.

Formatted Web page appearing in the browser.

The next several topics introduce a basic set of HTML tags that bring order and structural formatting to page content. The initial focus is on text arrangement. Later topics will introduce basic tags for adding graphic images and links. For the time being, learn the structural aspects of page design, and begin becoming comfortable with the styling techniques introduced in the following tutorial.

TOP | NEXT: Document Structure Tags