ptg 44 Chapter 2: The HTML Language element occupies the full width of its container minus whatever is needed for the element’s margins, borders, and the padding of the containing element. Block elements also have a float property: ey are allowed to oat alongside other elements if there is sucient room. e float property can take the values left, right, or none, which is the default. left means that the element adheres to the le margin of the containing element and that other HTML elements fol- lowing the oated element wrap around it on the right. right does the opposite. e element sticks to the right margin, and the HTML elements following it wrap around to the le. Example 2.6 illustrates a common use of oating ele- ments to create a page with a leading thumbnail image. e contents are from a Wikipedia article on the America’s Cup regatta. Example 2.6: Flowing text around an image <!DOCTYPE html> <html> <head> <title>Example 2.6</title> <style type="text/css"> body { padding: 2em; } .image-left { float: left; padding-right: 1em; } </style> </head> <body> <div class="image-left"> <img src="images/Americas_Cup.jpg" alt="The America's Cup trophy"> </div> <p> The America's Cup is a trophy awarded to the winner of the America's Cup sailing regatta match. It is the oldest active trophy in international sport, predating the Modern Olympics by 45 years. Originally named the Royal Yacht Squadron Cup, it became known as the "America's Cup" after the first yacht to win the trophy, the schooner America. The trophy remained in the hands of the New York Yacht Club (NYYC) from 1857 (when the syndicate that won the Cup donated the trophy to the club) until From the Library of Wow! eBook ptg HTML5 Semantics 45 1983 when the Cup was won by the Royal Perth Yacht Club, with their yacht, Australia II, ending the longest winning streak in the history of sport. </p> <p> The America's Cup regatta is a challenge-driven series of match races between two yachts which is governed by the Deed of Gift which was the instrument used to convey the cup to the New York Yacht Club. Any yacht club that meets the requirements specified in the Deed of Gift has the right to challenge the yacht club that holds the Cup. If the challenging yacht club wins the match, the cup's ownership is transferred to that yacht club. </p> </body> </html> e body of Example 2.6 consists of a division element, with an image tag inside it, followed by two paragraphs of text. e division has a class attribute with the value "image-left". ere is nothing special about that name. "Garfield" would have worked as well, but image-left is more helpful. In the style element in the document’s head, two CSS rules, in curly braces, are assigned to the division with the image-left class attribute value: float: left; padding-right: 1em; e rst rule assigns the value "left" to the float property, which forces the following paragraph elements to wrap around the division. e second rule provides one em 2 of padding on the right of the image to give the page a professional, typeset look. e image is 120 pixels wide. at plus the one em of padding leaves plenty of room for the text. Figure 2.6 shows the page in a browser window. Notice how the paragraph text returns to the le margin once it extends below the image. 2. An em is a typographic unit equal to the width of the letter M. From the Library of Wow! eBook ptg 46 Chapter 2: The HTML Language Figure 2.6: A page with a floating image Le and right oating elements can be used together to create a two- column page. Example 2.7 uses CSS classes named floatleft and floatright. Example 2.7: Using floating elements to create columns <!DOCTYPE html> <html> <head> <title>Example 2.7</title> <style type="text/css"> <! styles for two columns > h2 { text-align: center; } p { text-align: justify; padding: 2%;} p.floatleft { float: left; width: 46%; } p.floatright { float: right; width: 46%; } </style> </head> <body> <h2>Points Of Interest</h2> <p class="floatleft">Notable buildings in the district include the Flatiron Building, one of the oldest of the original New York skyscrapers, and just to east at One Madison Avenue is the Met Life From the Library of Wow! eBook ptg HTML5 Semantics 47 Tower, built in 1909 and the tallest building in the world until 1913. </p> <p class="floatright">Nearby, on Madison Avenue between 26th and 27th Streets, on the site of the old Madison Square Garden, is the New York Life Building, built in 1928 and designed by Cass Gilbert, with a square tower topped by a striking gilded pyramid. </p> </body> </html> e content of the body element in Example 2.7 is simple—one level-two heading followed by two paragraphs. All the magic happens in the CSS style element in the document head. e rst statement in the style element centers the text of the level-two heading. e second statement says to block-justify all paragraphs, reserving 2 percent of the available width (and height) for pad- ding. e nal two statements apply only to paragraph elements having the class attribute with values of floatleft and floatright, respectively. Because each paragraph has enough content to ll the full width of the page, each oated paragraph must be constrained to a width small enough to provide enough room for the other. Instead of giving these paragraphs a xed width, they are each allowed to occupy 46 percent of the document body’s width. us, with the 2 percent padding, the two columns occupy the full width of readers’ browsers, neatly dividing the page. Figure 2.7 shows the result. Figure 2.7: A web page with two columns and block-justified text From the Library of Wow! eBook ptg 48 Chapter 2: The HTML Language Inline elements provide the content with the semantic meaning that makes for interesting reading. Browsers interpret inline markup by changing the typography of the text. Browsers for the visually impaired respond to inline markup with changes in tone or volume. Inline HTML elements include markup for explicit semantic purposes: <em></em> Emphasis; the content has some importance. <strong></strong> Strong emphasis; the content is very important. <abbr></abbr> Abbreviation of a term in the content. <cite></cite> Citation—the title of another work. <code></code> e content is an example of computer code. <var></var> e content is a computer variable. <q> </q> Inline quotation. <sup> </sup> Superscript; reduce the size and raise the content. <sub> </sub> Subscript; reduce the size and lower the content. e strikeout text element, <strike> </strike>, used to designate deleted text in edited documents, may be recognized by many browsers for backward compatibility with earlier versions of HTML. But it is not in the HTML5 specication. ere is a set of inline markup elements for typographic styles that are inherited from earlier versions of HTML: <b></b> Bold text; increase the font weight. <i></i> Italics; change the font style to italic. <u></u> Underline the content. ese typographic elements say nothing about the content they enclose, other than that the author wants the text underlined or displayed with a bold or italic font. No special importance or emphasis should be given to the content, although it may look that way to a human reader. e strong empha- sis and/or emphasis elements should always be used when the content to be marked up is important or needs emphasis. e big and small elements are also from early versions of HTML and are supported by most browsers for backward compatibility: From the Library of Wow! eBook ptg HTML5 Semantics 49 <big></big> Increases the font size somewhat. <small></small> Decreases the font size somewhat. e big element is not in the HTML5 specication. e small element has a semantic purpose in HTML5: It is the element for marking up the “ne print” of a document—the disclaimers, legal terms, and conditions that nobody ever reads. e time element is new with HTML5. Its purpose is to provide machine- readable publication dates and times of articles and indexes of articles, as found on the front pages of online magazines and blogs. If a document has multiple article elements, there should be no more than one time element per article. If a document has no article elements, there should be only one time element. It provides the publication date and time of the document itself. e time element’s datetime attribute holds the machine-readable value, and the element’s content can hold the human-readable version. For example: <time datetime="2003-03-13">March 13th</time> e mark element is also new in HTML5. Its purpose is to highlight words or phrases in a quotation that were not given emphasis by the quote’s author but that have signicance in the current context. You would use the mark ele- ment to highlight an important point in quoted text, for example: <blockquote> nor be deprived of life, liberty, or property, without <mark>due process</mark> of law;</blockquote> Or you would use the mark element in a passage copied from a historic or religious text to indicate phrases where the translation is in dispute among scholars. e emphasis element used in Example 2.5 could be replaced with the mark element; however, consideration should be given to readers with older browsers that do not recognize this HTML5 element. You could do this by using both elements, for example: <mark><em>due process</em><mark> e span element is a general-purpose inline element that is semantically neutral. It is very useful when given a class or style attribute: wishing you a <span style="color:red">Happy Valentine's Day</span> From the Library of Wow! eBook ptg 50 Chapter 2: The HTML Language is is particularly useful when you need to post some temporary content quickly and do not want to bother editing the CSS style sheet. Note: Netscape introduced a special inline element for text formatting before its Navigator browser supported CSS. Known as the font element, it takes three attributes: size, which is required, and face and color. The blink element was another Netscape innovation. Guess what that does? Both elements are now deprecated, although they are still supported by many browsers for backward compatibility. The blink element is especially annoying and almost universally hated. Two inline HTML elements are especially important. e anchor element, <a></a>, creates hyperlinks to other pages on the Web, and the image element, <img/>, inserts images into the content. To give the links on a page a consistent look, the anchor element should be the innermost nested element. It can contain other inline elements, such as images, but it should not contain any elements that change the color or typographic styles of the linked text in a way that suggests that some links are dierent from others. If a heading is to be hyperlinked to another web page, the anchor element should be nested inside the heading: <h3><a href="chapter_5.html">Chapter 5, Building A Website</a></ h3> However, the HTML5 specication allows the anchor element to enclose any other content as long as that content does not itself contain interactive items— links or buttons that are sensitive to the actions of mice and ngers. e image element is self-closing. It has two required attributes specifying the image’s source le and the alternative text to be used if the image itself cannot be displayed. Here’s a typical image element: <img src="logo.png" alt="The Logo Corporation"/> Although the alt attribute is required, it can be le empty for image elements that are solely decorative. Not every image needs to have a tooltip window pop up when you hover over it. <img src="blue_square.gif" alt=""/> It is important to remember that images are not block elements. Even though each image has its own height and width, it is still an inline element, From the Library of Wow! eBook ptg HTML Attributes 51 and there is no implied white space before, aer, above, or below an image. Unless otherwise specied, the bottom of the image is aligned with the base- line of the text it is embedded in. Unless it is oated, it wraps with the words immediately before and aer the image tag. You’ll read more about images, anchors, and links later in this chapter. HTML Attributes A number of HTML attributes can be used with any HTML element. e class and style attributes, used earlier in this chapter, belong to this set of global attributes. Here are a few global attributes recognized by most HTML4 and HTML5 browsers: id Species a unique identier that references the element in CSS and scripts class Species a semantic class that the element should be consid- ered a member of style Species CSS style rules that should be applied to the element title Species a title for the element lang Species the natural language of the element’s text content dir Species the direction, le-to-right or right-to-le, of the ele- ment’s text content hidden Species whether the user agent should hide the element’s content e language attribute, lang, aects how punctuation is applied to an ele- ment’s content, including hyphenation and the choice of ligatures and quota- tion marks. Content enclosed in the quote element shows a dierent pair of quotation marks, depending on the value of the language attribute set for that element or inherited from one of its enclosing containers. An element’s language is a concept separate from the character set that is used to display the page’stext. e title attribute’s original purpose was to provide a window title for links created by anchor and area elements that would display non-HTML data such as images, text les, and directory listings. Internet Explorer was the rst browser to display the title attribute’s value in a Windows tooltip when the From the Library of Wow! eBook ptg 52 Chapter 2: The HTML Language user’s mouse hovered over the linked element. Users seemed to like tooltips, and web developers provided them by enclosing elements in anchor tags with null links just so that the tooltip would appear. Seeing the usefulness of the title attribute to search engine robots, the HTML4 specication extended its application to all HTML elements. e next two global attributes can be added to any element, but they are most useful when used in user input elds and controls: accesskey Species a shortcut key to be assigned to the element to give it focus tabindex Species the ordering of elements when tabbing through a document ese four HTML attributes are new with HTML5 and are designed to be used with editable web page content: contenteditable Species that the content may be editable if the host permits such operation contextmenu Species a menu that may be presented when the user Alt-clicks the element draggable Species whether the user may reposition the element spellcheck Species whether the browser can spell-check the ele- ment’s content ese last three HTML5 global attributes provide a means for HTML ele- ments to be related to each other across the DOM in scripting applications: subject Species that the element is the subject of an element with a corresponding item attribute item Species that the element is an item of an element with a corresponding subject attribute itemprop Species the properties of an element with an item attribute A number of HTML attributes existed before CSS. ese attributes are sup- ported for backward compatibility even though web authors are encouraged to use CSS in their place. From the Library of Wow! eBook ptg HTML Attributes 53 e align attribute when used in block elements species whether the text of the element should be aligned with the le or right margin, or centered within the containing element. is is similar to how the CSS text-align property is used. However, when the align attribute is used in an image (img) or table (table) element with a value of left or right, it acts like the CSS float property. It causes the content following the image or table to wrap around the element on the right or le, respectively. Sometimes, it is necessary to stop wrapping content around a oated ele- ment before all of the available space is used. e clear attribute does this. e valid values for the clear attribute are left, right, and both. Adding this attribute to an HTML element causes the browser to add enough vertical white space before rendering the element to clear it from any oating element. It aligns normally with the le or right margin of the containing element. e clear attribute works the same way as the clear CSS property. e following two statements have the same eect: <h3 clear="left">A heading for this section</h3> <h3 style="clear:left">A heading for this section</h3> e second level-three heading is the preferred usage because CSS is more exible. For example, if a page had many such level-three heading elements, instead of adding the clear attribute to each, the web author could just add a class attribute to accomplish the same thing using CSS. An example would be <h3 class="clearfloat"> </h3>. e CSS statement to clear all h3 elements in the clearfloat class would go in a style element in the document head, along with any other styling needed for the headings: <style type="text/css"> h3.clearfloat { clear: left; margin-top: 1.5em; /* provide extra space before each heading */ } </style> HTML block elements can have width and height attributes. If the value of one of these attributes is a positive integer, it species the element’s width or height in pixels. A number followed by the percent sign (%) species a width From the Library of Wow! eBook . tower topped by a striking gilded pyramid. < /p& gt; </body> < /html& gt; e content of the body element in Example 2 .7 is simple—one level-two heading followed by two paragraphs. All. class="image-left"> <img src="images/Americas_Cup.jpg" alt="The America's Cup trophy"> </div> < ;p& gt; The America's Cup is a trophy awarded. <span style="color:red">Happy Valentine's Day</span> From the Library of Wow! eBook ptg 50 Chapter 2: The HTML Language is is particularly useful when you need to post