Teach Yourself VISUALLY HTML and CSS, 2nd Edition

CHAPTER 3

Structuring a Web Page

In this chapter, you learn to structure a web page by using semantic elements, which are elements whose names explain their purpose, such as the header element and the article element. You also learn how to use the nonsemantic span and div elements to select parts of a page.

Meet the Elements for Structuring Web Pages

Select Items with span and div Elements

Create header Elements and footer Elements

Add article Elements to a Page

Create Pull Quotes with the aside Element

Divide a Page Using section Elements

Create Collapsible Sections

Meet the Elements for Structuring Web Pages

HTML enables you to use a wide variety of elements to structure your web pages. Some elements, such as the header element and the footer element, are semantic, which means their names clearly express their roles: The header element goes at the top of a web page or of another element, and the footer element goes at the bottom. Other elements are nonsemantic, meaning that their names do not clearly express their roles; for example, the span element specifies a short section of text, and the div element specifies a longer section, without expressing what part of the page those sections represent.

Grasp Semantic and Nonsemantic Elements

To structure your web pages, you will use semantic elements, such as the header element, the figure element, and the section element. To ...