Developing Large Web Applications- P6:This book presents a number of techniques for applying established practices of good software engineering to web development—that is, development primarily using the disparate technologies of HTML, CSS, JavaScript, and server-side scripting languages. Whereas there are many books on how to use languages, how to use libraries, and how to approach software engineering, this is the first book to codify many of the techniques it presents. These techniques will make the components of your own web applications more reusable, maintainable, and reliable | div div class item P strong 2009 Nissan Altima strong em from 19 900 em . p a href http . reviews 00003 Read the review a div div form method post action http . email p Get our most recent reviews each month p span class label Email span input type text id nwcreveml name nwcreveml value p class action input type submit id nwcrevsub name nwcrevsub value Sign Up p form div First we have replaced the various table-related elements with div and span elements. These immediately reveal a more systematic hierarchy that reflects the true relationship between the elements. In addition we have added IDs and classes with good semantic names that tell us a bit more about what the elements enclose. These also provide the hooks that we will require to achieve the desired presentation using CSS. Finally we have changed the purely presentational elements b and i to strong and em because the meanings of strong and emphasis avoid specific connotations of presentation whereas boldface and italic do not. A good example of the fact that strong is better than b is that if we were to change the presentation of the strong element from boldface to red in the future we could do it in just one place using CSS and wouldn t have to touch the HTML at all. The Best Example Semantically Meaningful HTML In the previous section Example 3-2 leverages the power of CSS to overload generic div and span elements. But div and span don t indicate that we re delivering a heading followed by a list which HTML allows us do. Example 3-3 therefore presents the best example of how we can use HTML to reflect the information architecture of the New Car Reviews module. Example 3-3. The best example of HTML for the New Car Reviews module div id nwcrev h3 New Car Reviews h3 cite a href http . The Car Connection a cite Modular HTML 31 ul li class beg P strong 2009 Honda Accord strong em from 21 905 em . P a href http . reviews 00001 Read the review a li li class mid p strong 2009 Toyota Prius strong em from 22 000 .
