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

More documents

Recommendations

Info

62 | Lesson 3 Learning HTML5 The New Elements New HTML5 tags make Web page and application development easier than ever. One of the very handy new features of HTML5 is the use of semantic markup. semantic markup gives better meaning, or definition, to tags so they make more sense to humans, programs, and Web browsers Not all HTML tags have been replaced or updated for HTML5, but some new tags introduced in HTML5 make the work of creating Web pages a lot easier. Published: September 3, 2012 LICENSED PRODUCT NOT FOR RESALE The markup would appear in a Web page as shown in Figure 3-8. Figure 3-8 An example of an aside element Aside As you can see in Figure 3-8, the aside content doesn’t really stand out from the rest of the content. You could add the horizontal rule tag before and after the aside content, which would appear in a Web browser as shown in Figure 3-9.
Building the User Interface by Using HTML5: Organization, Input, and Validation | 63 Figure 3-9 Using the tag to add horizontal rules to set off aside content LICENSED PRODUCT NOT FOR RESALE You could also use CSS to adjust the margins of the aside content so it’s indented on the left and right. In later lessons, you’ll learn CSS layout techniques to display similar content in a box along the left or right side of the corresponding body text. ADD THE ASIDE ELEMENT TO AN HTML DOCUMENT GET READY. To add the aside element to an HTML document, perform the following steps: 1. In your HTML editor or app development tool, open the L3-MyPage-nav.html file (if it’s not already open) and save it as L3-MyPage-art-aside.html to create a new file. 2. Include an aside element just before the footer, as follows: Note: The U.S. Drug Enforcement Administration is also interested in raves. Go to http://www.justice.gov/dea/ ongoing/raves.html to learn more. 3. Resave the file as L3-MyPage-art-aside.html and view it in a Web browser. The page should look similar to Figure 3-10. 4. Validate the document using the W3C Markup Validation Service at http://validator. w3.org. 5. Close the file, and then leave the editing tool and Web browser open if you continue to the next exercise during this session. ✚ MORE INFORMATION To find out about new features of HTML5, browse the “Learn HTML5 in 5 Minutes!” Web page at http://msdn. microsoft.com/en-us/hh549253 and the W3C “HTML elements” Web page at http://dev.w3.org/html5/markup/ elements.html#elements.
Page 1 and 2: Building the User Interface by Usin
Page 9: Building the User Interface by Usin

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

Create successful ePaper yourself

Delete template?

Save as template?