HTML and CSS Reference
In-Depth Information
Table 2-3 HTML5 Structural Elements
Element
Purpose
Header
Information placed at the top of the Web page, such as logos or main headings
Navigation
Navigation structure that links to other parts of the Web page, Web site, or external to the
Web site
Section
Major content area on the Web page
Article
Content that represents an independent piece of information
Aside
Content that is tangential or slightly related to the main topic of the Web page
Footer
Content placed at the bottom of the Web page, such as copyright or contact information
Entering Web Page Content
Once you have established the Web page structure, it is time to enter the content of the
Web page, including headings, an informational paragraph of text, a subtopic heading,
and a bulleted list.
Web pages generally contain a significant amount of text. Because you turned word
wrap on (Figure 2-5 on page HTML 42) in Notepad++, you will see all of the text that
you type in one Notepad++ window. If there is a substantial amount of information, you
can break the text into paragraphs that help to separate key ideas and make the text easier
to read. Paragraphs are separated with a blank line by using <p> (start paragraph) and </p>
(end paragraph) tags. Putting too much text on one Web page is not a good choice. Your
audience can get lost in large amounts of text. If you find that you have to press the Page
Down key dozens of times to get to the bottom of the Web page, you need to think about
restructuring your Web page. You can split up large pieces of information under more
headings, which will be more manageable and more readable.
Headings are used to separate text or add new topics on the Web page. Several
styles and sizes of headings exist, indicated by the tags <h1> through <h6>, with <h1>
being the largest. Generally, you use the Heading 1 style for the main heading unless you
use a graphical image for the heading (as we do in later steps). Figure 2-9a on the next
page shows a Web page using various sizes of headings. A Web page usually has only one
main heading; therefore, the HTML file for that Web page usually has only one set of
<h1> </h1> tags. One method of maintaining a consistent look on a Web page is to use
the same heading size for headings at the same topic level (Figure 2-9b). The header
image that is inserted later in the chapter takes the place of the Main heading at the top of
the Web page in Figure 2-9b. The complete Web page will therefore not have any <h1>
headings. Notice that the paragraphs of text and the bulleted lists are all separated by
size 2 headings in Figure 2-9b. This separation indicates that the text (i.e., two paragraphs
plus one bulleted list) is all at the same level of importance on the Web page.
