Web Development and Design Foundations with XHTML, 5th Edition

3.7 The Divand SpanXHTML Elements^93

Save your file embedded3.html and test it in a browser. Your page should look similar

to the image shown in Figure 3.11. The student files contain a sample solution at

Chapter3/embedded3.html. Notice how the classand idstyles are applied.

3.7The Divand SpanXHTML Elements

The <div>and <span>XHTML elements are used along with CSS to format page

areas. The block-level <div>element configures a section or division on a Web page

with a line break above and below. Use the <div>tag when you need to format a sec-

tion that is separated from the rest of the Web page by line breaks. The <div>element

is also useful to define a section that contains block-level elements, such as <p>,

<blockquote>, <ul>, <ol>, and even other <div>elements within it. In Chapter 6 you

will see how <div>elements are used to configure a page layout with CSS.

In contrast, the <span>element defines a section on a Web page that is not physically

separated from other areas by line breaks. Use the <span>tag if you need to format an

area that is contained within another, such as within a <p>, <blockquote>, <li>, or

<div>element.

HANDS-ON PRACTICE 3.5

You will experiment with the <div>and <span>elements in this Hands-On Practice.

First, you will place the navigation area within a <div>element. Next, you will config-

ure a new class to format the company name when displayed within the text on the

Figure 3.11
Using classes and
ids