Building the User Interface by Using HTML5: Organization ... - server

More documents

Recommendations

Info

56 | Lesson 3 TAKE NOTE * As you learned in Lesson 1, the HTML5 standard won’t be finalized for several years, which means changes to the specification are still occurring. The major Web browsers, like Microsoft Internet Explorer and Mozilla Firefox, support many HTML5 elements but not all of them. The “When Can I Use” Web site at http://caniuse.com/ is an excellent source for determining which browsers support specific HTML5 features. The Web site is updated regularly, so you should make it a part of your essential HTML5 resources. In addition, you can test any browser’s support for HTML5 by browsing to the HTML5 Test Web site at http://html5test.com. LICENSED PRODUCT NOT FOR RESALE Let’s look more closely at the HTML5 tags shown in Figure 3-1, which are the most commonly used structure-related HTML5 tags. THE HEADER AND FOOTER ELEMENTS The header element defines a header for a document, section, or article. In HTML 4.01, you use the header div as mentioned in the previous section (). The footer element defines a footer for a document or section, and typically contains information about the document or section, such as the author name, copyright data, links to related documents, and so on. The footer element doesn’t automatically appear at the bottom (or foot) of the document—you need to use CSS to instruct the browser where to display the footer. Footers that appear at the bottom of every Web page or document are known as “sticky footers.” An example of an article with a header tag and a footer tag is as follows: Learning HTML5 The New Elements New HTML5 tags make Web page and application development easier than ever. Published:
Building the User Interface by Using HTML5: Organization, Input, and Validation | 57 CERTIFICATION READY When should I use the tag versus another type of element? 2.4 THE SECTION ELEMENT The section element defines a section in a document, such as a chapter, parts of a thesis, or parts of a Web page whose content is distinct from each other. The WC3 specifies uses for the section element to differentiate it from other structure-related elements, mainly that it contain at least one heading and that it define something that would appear in the document’s outline. For example, you should use the section element to divide different parts of a one-page Web site or to create a portfolio of images. The following is an example of a simple section: LICENSED PRODUCT NOT FOR RESALE Eight Count Hip-hop dance instructors often teach moves that have eight counts per set. Table 3-2 lists situations in which you should avoid using the section element, and provides the better technique. Table 3-2 Situations in which you should not use the section element TAKE NOTE * The new HTML5 structure-related tags don’t replace the tag entirely, but HTML5 tags greatly reduce the number of tags needed in an HTML document. SITUATION Separate content that is independent from the rest of the content on the Web page or document Plan to syndicate a block of content Create a sidebar Wrap and position multiple sections that are not related to each other Add a drop shadow to or border around an item USE article article aside Knowing when to use the tag versus a different element can be tricky at times. When you’re working on an HTML document and are unsure which element to use, browse the W3C HTML5 specification or research the Web to see how other developers have handled a similar situation. When defining a section header, which may contain h1 through h6 headings, you can use the hgroup element to group headings. The hgroup element affects organization but not presentation. Consider using hgroup when you have a heading and a subheading one right after the other, as follows. Hip-Hop Dance Routines The Eight-Count Method Hip-hop dance instructors often teach moves that have eight counts per set. div div This markup would appear in a Web page as shown in Figure 3-3.
Page 1 and 2: Building the User Interface by Usin
Page 3: Building the User Interface by Usin

Building the User Interface by Using HTML5: Organization ... - server

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?