Building the User Interface by Using HTML5: Text, Graphics ... - server

More documents

Recommendations

Info

30 | Lesson 2Let’s look at some of the text elements carried over from HTML 4 that have slightly differentmeaning or functionality in HTML5:• : This commonly used element has always represented boldface, and was often usedfor emphasis or to convey importance. The W3C suggests you now use it to indicate“stylistically offset” text without conveying importance. Use for keywords, productnames, and actionable items (such as items you click or press in a list of how-to steps).For example:LICENSED PRODUCT NOT FOR RESALEClick the Check button, and then clickOK. • : The italic element is now used for text in an “alternate voice or mood.” Thiscould be spoken text, thoughts, or something similar that doesn’t convey importanceor emphasis. It may also include technical terms and transliterated foreign words.For example:He truly has a kind heart, she thought.• : The strong element is for strong importance, where the content is moreimportant than nearby words. For example:Courtney wore the same outfit to work threedays in a row.• : The emphasis element indicates emphatic stress. For example:You should always validate your HTMLmarkup before sharing it with others.• : The small element should be used for small print or side comments. Thiselement is useful for copyright lines or adding a source line to an image. For example:Copyright 2012 by XYZCorporationThe intended functionality for some of these elements in HTML5 can be confusing, such asknowing when to use the italic element. The best approach is to strive for consistency withina page or Web site, and watch how other developers use the same elements.MODIFY TEXT-RELATED TAGS IN A WEB PAGEGET READY. To modify tags in a Web page, perform the following steps:1. In your editing tool, open L2-pet-copyright.html if it’s not already open.2. In the following paragraph, replace the italic and bold tags with the strong element.Make sure your pet has plenty of freshwater during hot weather.The resulting markup will look like this:Make sure your pet has plenty of freshwater during hot weather.Note that the strong element will look like the bold element. The W3C prefersthat you use over , although they seem to produce nearlyidentical results.3. Add start and end tags to the copyright line, nesting them properly withinthe paragraph tags.4. Save the file as L2-pet-modified.html and view it in a Web browser. See Figure 2-7.
Building the User Interface by Using HTML5: Text, Graphics, and Media | 31Figure 2-7Using and tagsLICENSED PRODUCT NOT FOR RESALEStrong element applied to “fresh water”Small element applied to copyright line5. Leave the editing tool and Web browser open if you’re continuing immediately to thenext section.New Text Elements in HTML5New text-related elements in HTML5 include , , and , alongwith a few others. The element creates a command button. When the userclicks a command button, a command executes. The element highlights text ona page, similar to the highlighting feature in Microsoft Word. The element displaysa machine-readable time and date, such as 10:10 A.M., CST, July 19, 2012, whichis handy for blogs and calendars, and potentially helps search engines provide betterresults when time and date are part of the search criteria.CERTIFICATION READYWhich HTML text-relatedelements are new inHTML5?2.1Let’s take a look at some of the new text elements in HTML5 along with some examples:• : The command element is used to define a command button that users clickto invoke a command. The command element has many attributes you can use, such astype, label, title, icon, disabled, checked, and radiogroup. For example:• : The mark element is very handy for highlighting text on a page. You could useit on a search results page, for example, or to set off a block of text that you want to drawto the reader’s attention. For example:Since I started jogging last fall, I have lost 35 pounds.• : The time element indicates content that is a time or date, which can be mademachine-readable with the datetime attribute. The time element defines time on a24-hour clock and a date in the Gregorian calendar. One benefit of making times and
Page 1 and 2: Building the UserInterface by Using
Page 3 and 4: Building the User Interface by Usin
Page 5: Building the User Interface by Usin
Page 9: Building the User Interface by Usin

Building the User Interface by Using HTML5: Text, Graphics ... - server

Create successful ePaper yourself

Delete template?

Save as template?