ptg 264 Chapter 5: Building Websites noticeable in the preview from messing up the blog’s front page. is can hap- pen, for example, when a link at the end of a post is missing the closing anchor tag (</a>). When reproduced on the front page, the link may extend into the title of the post below it in the listing. not teSting in DiFFerent BroWSerS Browsers are getting better all the time and are converging on HTML5 as a common standard. But many of the HTML5 specications for browser behav- ior are recommendations, not requirements. Also, a wider variety of browsers are in use, across more device types and operating systems, than ever before. Furthermore, browsers are getting bigger and incorporating more features. As a consequence of all this complexity, there are bugs and edge conditions where browser behavior is not well dened. erefore, there is no way to ensure that your web pages will perform awlessly without testing them in all the major browsers. It is human nature to become attached to your favorite tools. When other people encounter problems with your website, it’s tempting to blame their poor choice of browser. Avoid falling into this unproductive attitude by mak- ing it a point to use dierent browsers as you work on your website. Testing in Internet Explorer, Firefox, Chrome, Safari, and Opera covers about 98 per- cent of all browser use, according to data collected on Wikipedia. (Search for “browser share” to nd the latest statistics.) Unfortunately, that also means testing on older versions of Internet Explorer. Currently, Internet Explorer, version 6, running on Windows XP, NT, 2000, and earlier versions of Micro- so’s operating systems, still accounts for a h of all browser usage! is is in spite of the fact that this browser is ten years old and is widely derided for its security issues and lack of support for modern web standards. It is a persistent fact that many people are forced to work with the tools they are given, not the ones they would prefer. Major web service companies such as Google do not provide support for IE6 users of their advanced applications. Whether you choose to support IE6, or any particular browser, is up to you and your regard for your target audience. Social media provides a solution to the dilemma of too many browsers. You can join a web authors’ or developers’ community and ask your friends to check out your work in the environments you don’t have access to. Make a formal checklist that includes browser name, version, operating system, and device type. If you are doing web work for a client, you will impress that client by presenting the checklist before putting changes into production. From the Library of Wow! eBook ptg Summary 265 not putting in enough CommentS Do yourself a big favor and add a lot of comments to your HTML, CSS, and JavaScript code. Use comments within the code to explain the relationship of the markup to the content. Put comments at the beginning of every page to explain the purpose of that page and to provide authorship information and version history. You will thank yourself later, as will anyone else who has to work on the code you le behind aer you move on to bigger and betterthings. Summary Here are the important points to remember from this chapter: . Good websites are the result of good planning. ere are many approaches to building a website, and even more tools to help you do it. Spending the time to analyze your requirements will help you choose the best approach to putting your content online. . A website is essentially a directory of les on a computer running web server soware. ere are common conventions for naming the subdi- rectories and les in a website. Some important protocols require the presence of les with specic names. . Good website organization and good navigation go hand in hand. ere are dierent techniques for providing navigation. Menu bars, drop menus, buttons, imagemaps, and embedded hyperlinks all play a part. . Content can be hidden on a page and then later revealed in response to a click, tap, or other user action. is provides a way to oer more rich content to search engine robots while avoiding clutter for humans. . You can add a large variety of information about a page to the head sec- tion of an HTML document, including its relationships to other pages on the Web. e head section is also where CSS styles are dened and other resources are associated with the page. . Search engine optimization is an important part of most website proj- ects. Good SEO starts with the proper use of HTML as a semantic markup language. From the Library of Wow! eBook ptg This page intentionally left blank From the Library of Wow! eBook ptg 267 A A: HTML Q R T he tables in this appendix list the HTML elements in the HTML5 dra specication, along with a brief description, the applicable content model, and the important attributes for each element. e content model for any element roughly denes what types of content the element may contain. An asterisk (*) next to the element’s name indicates that it is new or signi- cantly changed in HTML5. Content Model Description text A string of characters containing no HTML markup phrasing Text content plus HTML inline elements and comments ow Phrasing content plus HTML body elements empty e element is not usually written as a container; a self-closing element metadata e content consists of HTML head elements and comments about the document element name e content depends on the named child element(s) From the Library of Wow! eBook ptg 268 Appendix A: HTML5 Quick Reference R E Element Description Content Model Attributes html Provides the container for all other HTML markup and content One head followed by one body element D H E Element Description Content Model Attributes head Provides a container for elements containing information about the document and its relation to other documents and resources metadata title Provides the title for the document’s window text none base Sets the base URL for any hyperlinks using relative addressing empty href, target link Provides a URL to a related resource empty rel, href meta Provides data values relating to the page empty name, content, http-equiv style Provides a container for CSS statements CSS statements media, type script Provides a container for client- side executable code, such as JavaScript code statements src, type noscript Provides content for user agents that do not execute scripts metadata, ow From the Library of Wow! eBook ptg Section Elements 269 S E Element Description Content Model Attributes body Provides the container for all content elements: HTML markup and content ow section* Marks a section of a document that can have its own header and footer elements ow nav* Marks content containing navigation elements ow article* Denes a document section that may have its own headings as in a blog index or archive ow aside* Marks content that is tangential to other information in the document ow header* Marks content that appears above the main contents of a web page ow footer* Marks content that appears below the main contents of a web page ow address Provides information about the document’s author ow hgroup* Groups other elements into a heading section heading elements From the Library of Wow! eBook ptg 270 Appendix A: HTML5 Quick Reference H E Element Description Content Model Attributes h1 Highest-level heading phrasing h2 Second-level heading phrasing h3 ird-level heading phrasing h4 Fourth-level heading phrasing h5 Fih-level heading phrasing h6 Sixth-level heading phrasing B E Element Description Content Model Attributes div Marks a division of a page or document section ow p Represents a paragraph of content phrasing hr Inserts a horizontal rule empty size, width br Inserts a line break into the content empty clear pre Contains preformatted content; white space and line breaks are kept as is phrasing blockquote Marks a quote from an external source ow cite gure Provides annotation for gures, photos, diagrams, code listings, and so on ow gcaption Marks a caption for a gure element phrasing From the Library of Wow! eBook ptg Inline Elements 271 L E Element Description Content Model Attributes ol Creates an ordered list li type, start ul Creates an unordered list li type li Marks an item of an ordered or unordered list ow dl Creates a denition list dt, dd dt Marks the term part of a denition list item phrasing dd Marks the denition part of a denition list item ow I E Element Description Content Model Attributes a Creates an anchor that represents either a hypertext link or a link’s in-page destination noninteractive ow href, name, target em Marks contents as emphasized phrasing strong Marks contents as strongly emphasized phrasing small* Represents content such as “the ne print” phrasing cite Marks the title of a referenced work phrasing q Represents content quoted from another source phrasing cite dfn Marks the dening instance of a term phrasing title abbr Represents an abbreviation or acronym phrasing title continues From the Library of Wow! eBook ptg 272 Appendix A: HTML5 Quick Reference Element Description Content Model Attributes time* Provides a machine-readable timestamp that is equivalent to the element’s content phrasing datetime, pubdate code Represents a fragment of computer code inline phrasing var Represents a variable name phrasing samp Represents sample output of a computer program phrasing kbd Represents user input to a computer program phrasing sub Marks the content as a subscript phrasing sup Marks the content as a superscript phrasing i Indicates that the content is in an alternative voice or should be italicized but not emphasized phrasing b Indicates that the content should be in boldface without signifying any special importance phrasing mark* Indicates a highlight that was added by an editor or author to quoted text phrasing ruby* Marks content in Asian languages that includes accompanying phonetic or other linguistic info phrasing, rt, rp rt* Marks the text component of a ruby element phrasing rp* Marks the annotation part of a ruby element phrasing bdo Provides bidirectional override for text direction phrasing dir I E (continued) From the Library of Wow! eBook ptg Embedded Elements 273 Element Description Content Model Attributes span Provides a meaningless inline container phrasing ins Marks content as inserted by an editing process phrasing cite, datetime del Marks content as deleted by an editing process phrasing cite, datetime E E Element Description Content Model Attributes img Inserts an inline image into the content empty src, width, height, alt, usemap, ismap iframe Represents a nested browsing context—one document embedded inside another ow, HTML document src, width, height, name, sandbox, seamless embed Inserts content from an external source (typically non-HTML from a plugin) into a document empty src, width, height, type object Represents an external resource, possibly an image or other media type from a plugin param data, type, width, height, name, form param Provides parameters for a plugin invoked by an object element empty name, value video* Inserts a video or movie, possibly with accompanying audio, into the content source src, width, height, controls, poster, loop, autoplay, preload continues From the Library of Wow! eBook . computer code inline phrasing var Represents a variable name phrasing samp Represents sample output of a computer program phrasing kbd Represents user input to a computer program phrasing sub Marks. Attributes h1 Highest-level heading phrasing h2 Second-level heading phrasing h3 ird-level heading phrasing h4 Fourth-level heading phrasing h5 Fih-level heading phrasing h6 Sixth-level heading phrasing B. would prefer. Major web service companies such as Google do not provide support for IE6 users of their advanced applications. Whether you choose to support IE6, or any particular browser, is up to