This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating Inline Spans
While you can organize big chunks of your Web page into head and body sections, into divisions, or even with headers (h1, h2, etc.), you can name smaller chunks or spans of text or other inline elements in order to identify them and apply styles to them.
To name inline spans
- At the beginning of the inline content, type <span.
- If desired, type id="name", where name uniquely identifies the spanned content.
- If desired, type class="name", where name is the identifying name of the class that the spanned content belongs to.
- Type > to complete the opening span tag.
- Create the inline contents you wish to name.
- At the end of the span, type </span>.
Example 3.16. The span tag is used to mark a bunch of inline content, usually, but not always, text. You can then format the marked text however you like (which we'll do in Chapters 10 and 11).
<body> <div id="gaudi"> <h1>Antoni Gaudí</h1> <p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture. </p> <p>Barcelona celebrates the 150th anniversary of Gaudí's birth in 2002.</p> <div class="works"> <h2>La Casa Milà</h2> <p>Gaudí's work was essentially useful. La Casa Milà is an apartment building and <span class="emph">real people</span> live there.</p> </div> <div class="works"> <h2>La Sagrada Família</h2> <p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the <span class="emph">most visited</span> building in Barcelona. </p> </div> </div> </body></html>
)
Figure 3.17 Again, the span element gives your document underlying structure. You can't see its effect until you apply styles (see page 147). You can see this page with styles on my Web site (see page 24).