© Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION CHAPTER 2 © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE CodingOR DISTRIBUTION Standards,NOT FOR SALE OR DISTRIBUTION © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC BlockNOT FOR SALEElements, OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION Text Elements, and © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION Character References © Jones & BartlettCHAPTER Learning, OBJECTIVES LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION ▸ Understand HTML5 coding conventions ▸ Know when whitespace collapsing occurs and learn where they can be found. and how to combat it with the pre element. ▸ Use HTML comments appropriately. ▸ Understand phrasing elements, like q, ▸ Use the content model categories to deter- cite, dfn, abbr, and time. mine© which Jones elements & Bartlett are allowed Learning, inside a LLC ▸ Learn CSS basics.© Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION given container. ▸ Learn how and when to use character ▸ Define a block element. references. ▸ Understand blockquote elements. © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 33 © StationaryTraveller/Getty Images © Jones & Bartlett Learning, LLC© Jones & Bartlett Learning, LLC.© NOTJones FOR SALE& Bartlett OR DISTRIBUTION Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 9781284093698_CH02_Pass06.indd 33 07/11/17 9:36 PM © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 34 CHAPTER 2 Coding Standards, Block Elements, Text Elements, and Character References CHAPTER OUTLINE© Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 2.1 Introduction 2.12 q and cite Elements 2.2 HTML Coding Conventions 2.13 dfn, abbr, and time Elements 2.3 Comments 2.14 Code-Related Elements © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC 2.4 HTML Elements Should Describe Web 2.15 br and wbr Elements NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION Page Content Accurately 2.16 sup, sub, s, mark, and small Elements 2.5 Content Model Categories 2.17 strong, em, b, u, and i Elements 2.6 Block Elements 2.18 span Element 2.7 blockquote Element © Jones & Bartlett Learning, LLC © Jones2.19 &Character Bartlett References Learning, LLC 2.8 Whitespace Collapsing NOT FOR SALE OR DISTRIBUTION NOT 2.20FOR WebSALE Page OR with DISTRIBUTION Character References 2.9 pre Element and Phrasing Elements 2.10 Phrasing Elements 2.21 Case Study: A Local Hydroelectric 2.11 Editing Elements Power Plant © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 2.1 Introduction © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC In the prior chapter, you were introduced to just enough about HTML elements so you could NOT FOR SALEput together OR a DISTRIBUTION rudimentary web page. In this chapter, we’llNOT introduce FOR youSALE to additional OR DISTRIBUTION HTML elements, so your web pages can be more expressive. In presenting the HTML elements, we make a point of using standard coding-style conventions, so your code will be acceptable to the web community as a whole. © Jones & Bartlett Learning,Throughout LLC this chapter and the rest© of Jones this book, & you’ll Bartlett be exposed Learning, to lots of HTML LLC elements. NOT FOR SALE OR DISTRIBUTIONIf you’re like most people, learning lots ofNOT things FOR that are SALE all in a singleOR DISTRIBUTIONcategory can be overwhelm- ing. Defining subcategories can make learning easier. For example, rather than trying to memo- rize every animal species (an impossible task because thousands of new species are discovered each year), biologists remember categories of species, such as reptiles, mammals, and crustaceans, and assign each species to a particular category. Likewise, before you get overwhelmed with ele- ment© overload, Jones we & describeBartlett the Learning, categorization LLC scheme used by the World Wide© JonesWeb Consortium & Bartlett Learning, LLC (W3C)NOT for organizingFOR SALE HTML OR elements. DISTRIBUTION A bit confusing at first, but it’ll pay offNOT later. FOR SALE OR DISTRIBUTION In this chapter, after we present coding-style conventions and the W3C’s element catego- rization scheme, we present elements that span the width of a web page (block elements) and then elements that can be embedded inside a paragraph (phrasing elements). At the end of the © Jones &chapter, Bartlett we Learning,take a break from LLC HTML elements and introduce© Jones character & Bartlett references. Learning, Character LLC NOT FOR SALEreferences OR allow DISTRIBUTION you to generate characters that are not NOTon a standard FOR SALEkeyboard. OR For DISTRIBUTION example, if you need to display the half character (½) on a web page, you can do that with a character reference. © Jones & Bartlett Learning, LLC© Jones & Bartlett Learning, LLC.© NOTJones FOR SALE& Bartlett OR DISTRIBUTION Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 9781284093698_CH02_Pass06.indd 34 07/11/17 9:36 PM © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 2.2 HTML Coding Conventions 35 © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC 2.2 HTMLNOT CodingFOR SALE Conventions OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION Browsers are very lenient in terms of requiring web developers to write high-quality code. So even if a web page’s code uses improper syntax or improper style, web browsers won’t display an error message; instead, they’ll try to render the code in a reasonable manner. You might think that’s a © Jonesgood thing, & Bartlett but it’s not. Learning, If a web page usesLLC improper syntax, different browsers© Jones might & render Bartlett the web Learning, LLC NOTpage FOR differently. SALE In ORa worst-case DISTRIBUTION scenario, the web developer tests the NOTweb page FOR on a SALEbrowser ORwhere DISTRIBUTION no errors are evident, mistakenly concludes that all is well, and publishes the web page on the Web. And then a user loads the web page using a different browser, and that browser renders the page in an inappropriate manner. So as a web developer, how do you deal with this problem? You should test with multiple browsers and check the syntax using the W3C’s HTML validation service. © Jones & Bartlett Learning,As you may recall, LLC coding-style convention rules© Jones pertain to& theBartlett format of Learning, code. For example, LLC NOT FOR SALE thereOR DISTRIBUTIONare rules about when to use uppercase versusNOT lowercase, FOR SALE when to OR insert DISTRIBUTION blank lines, and when to indent. Those rules help programmers understand the code more easily, but the browsers don’t care about such things. Consequently, for all those people who create web pages on their own, there’s nothing to stop them from using horrible style. If they want to put the code for their entire web page© Joneson one line, & browsersBartlett will Learning, treat that code LLC the same as code with proper© newlinesJones & Bartlett Learning, LLC and indentations.NOT However, FOR SALE if you areOR taking DISTRIBUTION a course in web programming, your teacherNOT FORwill SALE OR DISTRIBUTION (I hope) deduct points for poor style. More importantly, if you create web pages for a company, your company will require you to follow their coding-style conventions. Companies like their programmers to follow standard coding conventions so the resulting programs are easier to maintain (program maintenance means debugging and enhancing a pro- © Jonesgram after & Bartlett it has been Learning, released initially). LLC This is particularly true ©for Jones medium- & and Bartlett large-sized Learning, LLC NOTcompanies, FOR SALE where OR programs DISTRIBUTION are debugged and enhanced by a largerNOT number FOR of SALE people. OR With DISTRIBUTION more people involved, there’s a greater need to understand other people’s code, and adhering to standard coding conventions helps with that. In this book, we attempt to use coding-style conventions that are as widely agreed upon as possible. And how does one find such conventions? It’s the same as for everything else in the © Jones & Bartlettworld—by Learning, googling LLC it. If you google “html style guide,”© Jones you will & getBartlett the coding-style Learning, conventions LLC NOT FOR SALE usedOR byDISTRIBUTION Google, the company. Because Google is ubiquitous,NOT FOR Google’s SALE style OR rules DISTRIBUTION have gained huge support from the web developer community. Consequently, this book uses coding conventions that match Google’s coding conventions. In this section, we’ll go over some of the more import- ant style rules, but for a more comprehensive description, see Appendix A, HTML5 and CSS Coding-Style ©Conventions. Jones & For Bartlett now, it’s OKLearning, to remember LLC just the following style rules:© Jones & Bartlett Learning, LLC ▸ For evNOTery container FOR SALE element, OR include DISTRIBUTION both a start tag and an end tag. So even thoughNOT it’s FOR SALE OR DISTRIBUTION legal to omit a p element’s end tag, don’t do it. ▸ Use lowercase for all tag names (e.g., meta) and attributes (e.g., name). ▸ Use lowercase for attribute values unless there’s a reason for uppercase. For a meta © Jones &author Bartlett element, Learning, use title case LLC for the author’s name because© that’s Jones how people’s & Bartlett names are Learning, LLC NOT FOR normallySALE ORspelled DISTRIBUTION (e.g., name="Dan Connolly").