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

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.