• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 7. Save Time and Money with Web ... > A Lesson in Separation of Structure ...

A Lesson in Separation of Structure and Presentation

The following figures and code illustrate the value of separating document structure from document presentation. Figure 7.1 and Listing 7.1 are the display and HTML of a site built the old-fashioned way. Figure 7.2 and Listing 7.2 are the display and HTML of a site built the new way. See how Spartan the markup in Listing 7.2 is compared to that in Listing 7.1? Listing 7.2 is lean and mean because it is free of all presentational markup.

Figure 7.1. Notice that the site was built with presentational markup. That is bad. The HTML is doing presentation work in Line 7 (highlighted in bold), where the body element has a color attribute. HTML is also doing presentational work in Line 8 (also highlighted in bold); inside the H1 tag, you see a long font tag that defines the color, size, and font face. A similar tag surrounds the paragraph elements that follow. This site's HTML is working too hard and utterly lacks economy.



PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint