A Book Apart Publishing HTML5 for Web Designers

This book is meant for those who create web content, who mark up web pages for sense and semantics, and who design accessible interfaces and experiences. Call it the user guide to HTML5.

Jeremy Keith

95 Pages

12744 Reads



PDF Format

13.5 MB

HTML Learning

Download PDF format

  • Jeremy Keith   
  • 95 Pages   
  • 13 Feb 2015
  • Page - 1

    i^ A BOOK APARTBriefbooks forpeople who make websitesforeword by Jeffrey Zeldman read more..

  • Page - 2

    Jeremy Keith read more..

  • Page - 3

    Copyright © 2010 by Jeremy KeithAll rights reservedPublisher: Jeffrey ZeldmanDesigner: Jason Santa MariaEditor: Mandy BrownTechnical Editor: Ethan MarcottcCopyeditor: Krista StevensISBN 978-0-9844425-0-8A Book ApartNew York, New Yorkhttp://books.alistapart.com1234567890 read more..

  • Page - 4

    TABLE OF CONTENTSCHAPTER1A Brief History of MarkupCHAPTER 2The Design of HTML5CHAPTER 3Rich MediaCHAPTER 4Web Forms 2.00CHAPTER 5SemanticsCHAPTER 6Using HTML5 TodayIndex read more..

  • Page - 5

    FOREWORDWhen Mandy Brown, Jason Santa Maria and I formed A BookApart, one topic burned uppermost in our minds, and therewas only one author for the job.Nothing else, not even "real fonts" or CSS3, has stirred thestandards-based design community like the imminent arrivalof HTML5. Born out of dissatisfaction with the pacing andpolitics of the W3C, and conceived for a web of applications(not just documents), this new edition of the web's linguafranca has in equal measure excited, angered, read more..

  • Page - 6

    html is the unifying language of the World Wide Web.Using just the simple tags it contains, the human race has created an astoundingly diverse network of hyperlinkcd documents, from Amazon, eBay, and Wikipedia, to personal blogsand websites dedicated to cats that look like Hitler.HTML5 is the latest iteration of this lingua franca. While it isthe most ambitious change to our common tongue, this isn'tthe first time that HTML has been updated. The language hasbeen evolving from the start.As with read more..

  • Page - 7

    format. Rather than inventing a new standard, Sir Tim sawthe benefit of building on top of what already existed—a trendthat can still be seen in the development of HTML5.FROM IETF TO W3C: THE ROAD TO HTML 4There was never any such thing as HTML 1. The first officialspecification was HTML 2.0, published by the IETF, theInternet Engineering Task Force. Many of the features in thisspecification were driven by existing implementations. Forexample, the market-leading Mosaic web browser of read more..

  • Page - 8

    they wrote theirelements and attributes, XHTML requiredauthors to follow the rules of XML, a stricter markup languageupon which the W3C was basing mostof their technologies.Having stricter rules wasn'tsuch a bad thing. It encouragedauthors to use a single writingstyle. Whereas previously tagsand attributes could be written in uppercase, lowercase, orany combination thereof, a valid XHTML 1.0 document required all tags and attributes to be lowercase.The publication of XHTML 1.0coincided with the read more..

  • Page - 9

    Although the name XHTML 2 sounded very similar toXHTML 1, they couldn't have been more different. UnlikeXHTML 1, XHTML 2 wasn't going to be backwards compatible with existing web content or even previous versions ofHTML. Instead, it was going to be a pure language, unburdened by the sloppy history of previous specifications.It was a disaster.THE SCHISM: WHATWG TF?A rebellion formed within the W3C. The consortium seemedto be formulating theoretically pure standards unrelated to theneedsof web read more..

  • Page - 10

    On the face of it, the W3C process sounds more democraticand fair. In practice, politics and internal bickering can bogdown progress. At the WHATWG, where anyone is free tocontribute but the editor has the last word, things move at afaster pace. Butthe editor doesn't quite have absolute power:an invitation-only steering committee can impeach him in theunlikely event of a Strangelove scenario.Initially, the bulk of the work at the WHATWG was split intotwo specifications: Web Forms 2.0 and Web read more..

  • Page - 11

    Any web designers trying to make sense of this situationwould have had an easier time deciphering a movie marathonofMemento, Primer, and the complete works of David Lynch.XHTML IS DEAD: LONG LIVE XHTML SYNTAXThe fog of confusion began to clear in 2009. The W3C announced that the charter for XHTML 2 would not be renewed. The format had been as good as dead for several years;this announcement was little more than a death certificate.Strangely, rather than passing unnoticed, the death of XHTML 2was read more..

  • Page - 12

    "space or no space?" question (it's HTML5 with no space, justin case you were interested).Perhaps the most confusing issue for web designers dippingtheir toes into the waters of HTML5 is getting an answer tothe question, "when will it be ready?"In an interview, Ian Hickson mentioned 2022 as the year heexpected HTML5 to become a proposed recommendation.What followed was a wave of public outrage from some webdesigners. They didn't understand what "proposed read more..

  • Page - 13

    Remember, HTML5 isn't a completely new language createdfrom scratch. It's an evolutionary rather than revolutionarychange in the ongoing story of markup. If you are currentlycreating websites with any version of HTML, you're alreadyusing HTML5.8HTML5 FOR WEB DESIGNERS read more..

  • Page - 14

    ^^Mithe French revolution was an era of extreme politicaland social change. Revolutionary fervor was applied to timeitself. For a brief period, the French Republic introduced adecimal time system, with each day divided into ten hoursand each hour divided into one hundred minutes. It was thoroughly logical and clearly superior to the sexagesimal system.Decimal time was a failure. Nobody used it. The same couldbe said for XHTML 2. The W3C rediscovered the lesson ofpost-revolutionary France: read more..

  • Page - 15

    Where XHTML 2 attempted to sweep aside all that had comebefore, HTML5 builds upon existing specifications and implementations. Most of HTML 4.01 has survived in HTML5.Some of the other design principles include "Do not reinventthe wheel," and "Pave the cowpaths," meaning, if there's awidespread way for web designers to accomplish a task—evenif it's not necessarily the best way—it should be codified inHTML5. Put another way, "If it ain't broke, don't fix it."Many read more..

  • Page - 16

    specification strays too far in one direction, it will suffer thesame fate as XHTML 2. But if it goes too far in the other direction, the specification will enshrine <font> tags and tables forlayout because, after all, that's what a huge number of webpages are built with.It's a delicate balancing act that requires a pragmatic, levelheaded approach.ERROR HANDLINGThe HTML5 specification doesn't just declare what browsersshould do when they are processing well-formed markup. Forthe first read more..

  • Page - 17

    trainspotters who enjoy a nice game of chess while indexingtheir stamp collection.GIVE IT TO ME STRAIGHT, DOCTYPEA Document Type Declaration, or doctype for short, hastraditionally been used to specify which particular flavor ofmarkup a document is written in.The doctype for HTML 4.01 looks like this {line wrapsmarked »):<!DOCTYPEHTMLPUBLIC»"-//W3C//DTD HTML 4.01//EN" »"http://www.w3.org/TR/html4/strict.dtd">Here's the doctype for XHTML 1.0:<!DOCTYPEhtml PUBLIC read more..

  • Page - 18

    When I first saw the doctype for HTML5,1 thought it was theheight of arrogance. I asked myself, "Do they really believethat this will be the final markup specification ever written?"It seemed to be a textbook case of Year Zero thinking.In fact, though, the doctype for HTML5 is very pragmatic.Because HTML5 needs to support existing content, the doctype could be applied to an existing HTML 4.01 or XHTML1.0 document. Any future versions of HTML will also need tosupport the existing read more..

  • Page - 19

    If you want to specify the character encoding of a markupdocument, the best way is to ensure that your server sendsthe correct Content-Type header. If you want to be doublycertain, you can also specify the character set using a <meta>tag. Here's the meta declaration for a document written inHTML 4.01:<meta http-equiv="Content-Type" content="text/html; »charset=UTF-8">Here's the much more memorable way of doing the samething in HTMLS:<meta read more..

  • Page - 20

    You can simply write:<link rel="stylesheet" href="file.css">SYNTAX: MARKING IT UP YOUR WAYSome programming languages, such as Python, enforce aparticular way of writing instructions. Using spaces to indentcode is mandatory—the white space is significant. Other programming languages, such as JavaScript, don't pay any attention to formatting—the white space at the start of a line isn'tsignificant.If you're looking for a cheap evening's entertainment, get anarray of read more..

  • Page - 21

    must have a closing tag. In the special case of standalone elements such as br, the requirement for a closing tag is replacedwith a requirement for a closing slash: <br />.With HTML5, anything goes. Uppercase, lowercase, quoted,unquoted, self-closing or not; it's entirely up to you.I've been using the XHTML 1.0 doctype for years. I like thefact that I must write in one particular style and I like the waythat the W3C validator enforces that style. Now that I'm usingHTML5, it's up to me to read more..

  • Page - 22

    not to use deprecated elements, or send them Christmascards, or even mention them in polite company.There are no deprecated elements or attributes in HTMLS. Butthere are plenty of obsolete elements and attributes.No, this isn't a case of political correctness gone mad. "Obsolete" has a subtly different meaning from "deprecated."Because HTML5 aims to be backwards compatible with existing content, the specification must acknowledge previouslyexisting elements even when those read more..

  • Page - 23

    abbreviations—acronyms are spoken as single words, likeNATO and SCUBA—but just remember: all acronyms are abbreviations, but not all abbreviations are acronyms.Presentational elements such as font, big, center, and strikeare obsolete in HTMLS. In reality, they've been obsolete foryears; it's much easier to achieve the same presentationaleffects using CSS properties such as font-size and text-align. Similarly, presentational attributes such as bgcolor,cellspacing, cellpadding, and valign are read more..

  • Page - 24

    These changes might sound like word games. They are;but they also help to increase the device-independence ofHTML5. If you think about the words "bold" and "italic," theyonly make sense for a visual medium such as a screen or apage. By removing the visual bias from the definitions of theseelements, the specification remains relevant for non-visualuser agents such as screen readers. It also encourages designers to think beyond visual rendering environments.Out of citeThe cite read more..

  • Page - 25

    The a element is, without a doubt, the most importantelement in HTML. It turns our text into hypertext. It is theconnective tissue of the World Wide Web.The a element has always been an inline element. If you wanted to make a headline and a paragraph into a hyperlink, youwould have to use multiple a elements:<h2xa href="/about">About me</ax/h2><pxa href="/about">Find out what makes me tick.</ax/p>In HTML5, you can wrap multiple elements in a single read more..

  • Page - 26

    do you go for documentation on JavaScript APIs such asdocument .write, innerHTML, and window, history? TheJavaScript specification is all about the programming language—you won't find any browser APIs there.Until now, browsers have been independently creating andimplementing JavaScript APIs, looking over one another'sshoulders to see what the others are doing. HTML5 will document these APIs once and for all, which should ensure bettercompatibility.It might sound strange to have JavaScript read more..

  • Page - 27

    the history of the web is punctuated with technologicalimprovements. One of the earliest additions to HTML was theimg element, which fundamentally altered the web. Then, theintroduction of JavaScript allowed the web to become a moredynamic environment. Later, the proliferation of Ajax madethe web a viable option for full-fledged applications.Web standards have advanced so much that it's now possibleto build almost anything using HTML, CSS, and JavaScript—almost anything.There are some gaps in read more..

  • Page - 28

    help to fill the holes on the web. They make it relatively easyto get games, films, and music online. But these technologiesare not open. They are not created by the community. Theyare under the control of individual companies.Flash is a powerful technology, but using it sometimes feelslike a devil's bargain. We gain the ability to publish richmedia on the web, but in doing so, we lose some of ourindependence.HTMLS is filling in the gaps. As such, it is in direct competition with proprietary read more..

  • Page - 29

    •ccanvas id="my-first-canvas" width="360" height="240"><p>No canvas support? Have an old-fashioned image »instead:</p><img src="puppy.jpg" alt="a cute puppy"></canvas>fic 3.01: Users without canvasNo canvas Support?support will see the image ofHaye &n old.fashioned image instead;All the hard work is done in JavaScript. First of all, you'll needto reference the canvas element and its context. The read more..

  • Page - 30

    of using a Graphical User Interface, you have to specify everything using JavaScript.Dancing about architecture: drawing with codeThis is how you specify that the stroke color should be red:context.strokeStyle = '#990000';Now anything you draw will have a red outline. For example,if you want to draw a rectangle, use this syntax:strokeRect ( left, top, width, height )If you want to draw a rectangle that's 100 by 50 pixels in size,positioned 20 pixels from the left and 30 pixels from the top ofthe read more..

  • Page - 31

    Canvas. Huh! What is it good for?It's all well and good using JavaScript and canvas to create images on the fly, but unless you're a hardcore masochist, what'sthe point?The real power of canvas is that its contents can be updated atany moment, drawing new content based on the actions of theuser. This ability to respond to user-triggered events makes itpossible to create tools and games that would have previouslyrequired a plug-in technology such as Flash.One of the first flagship demonstrations read more..

  • Page - 32

    Access deniedA code editor, by its nature, handles text. The Bespin codeeditor handles text within the canvas element—except that itisn't really text anymore; it's a series of shapes that look liketext.Every document on the web can be described with a Document Object Model. This DOM can have many differentnodes, the most important of which are element nodes, textnodes, and attributes. Those three building blocks are enoughto put together just about any document you can imagine.The canvas read more..

  • Page - 33

    as dynamic as in a JavaScript-capable environment. Thismulti-tiered approach, called Unobtrusive JavaScript, can alsobe applied to canvas. Instead of using canvas to create content,use it to recycle existing content.Suppose you have a table filled with data. You might want toillustrate the trends in the data using a graph. If the data isstatic, you can generate an image of a graph—using the GoogleChart API, for example. If the data is editable, updating in response to user-triggered events, read more..

  • Page - 34

    XML format that can describe the same kind of shapes as canvas. Because XML is a text-based data format, the contents ofSVG are theoretically available to screen readers.In practice, SVG hasn't captured the imagination of developers in the same way that canvas has. Even though canvas isthe new kid on the block, it already enjoys excellent browsersupport. Safari, Firefox, Opera, and Chrome support canvas.There's even a JavaScript library that adds canvas support toInternet Explorer read more..

  • Page - 35

    for my attention: QuickTime, Windows Media Player, RealAudio—I spent far too much time worrying about relativemarket share and cross-platform compatibility.In the intervening years, the MP3 format has won the battlefor ubiquity. But providing visitors with an easy way to listento a sound file still requires a proprietary technology. TheFlash player has won that battle.Now HTML5 is stepping into the ring in an attempt to take onthe reigning champion.Embedding an audio file in an HTML5 document read more..

  • Page - 36

    Don't confuse Boolean attributes with Boolean values. You'd beforgiven for thinking that a Boolean attribute would take thevalues "true" or "false." Actually, it's the very existence of theattribute that is Boolean in nature: either the attribute is included or it isn't. Even if you give the attribute a value, it willhave no effect. Writing autoplay="false" or autoplay="nothanks" is the same as writing autoplay.If you are using XHTML syntax, you can write read more..

  • Page - 37

    fic 3.05: Use controls to display play,. . •. y^ •. ji u.pause, and volume controls foryouraudio.^the Audio API, which gives you access to methods such asplay and pause and properties such as volume. Here's aquick 'n' dirty example using button elements and nastyinline event handlers (fig 3.06):<audio id="player" src="witchitalineman.mp3"></audio><div><button»onclick="document.getElementById('player').play()"> read more..

  • Page - 38

    rz\ rrr.rr^> rm~\fig 3.06: The controls producedPauseVolume UoVolume Downby the button elements.that—although the audio file shouldn't play automatically—itwill probably be played at some point, so the browser shouldstart pre-loading the file in the background.This would have been a useful attribute, but unfortunatelySafari went a step further. It preloaded audio files regardlessof whether or not the autobuff er attribute was present. Remember that because autobuffer was a Boolean read more..

  • Page - 39

    Although the MP3 format has become ubiquitous, it is notan open format. Because the format is patent-encumbered,technologies can't decode MP3 files without paying the patentpiper. That's fine for corporations like Apple or Adobe, butit's not so easy for smaller companies or open-source groups.Hence, Safari will happily play back MP3 files while Firefoxwill not.There are other audio formats out there. The Vorbis codec—usually delivered as an .ogg file—isn't crippled by any patents.Firefox read more..

  • Page - 40

    The source element is a standalone—or "void"—element, so ifyou are using XHTML syntax, remember to include a trailingslash at the end of each <source /> tag.Falling backThe ability to specify multiple source elements is very useful. But there are some browsers that don't support the audioelement at all yet. Can you guess which browser I might betalking about?Internet Explorer and its ilk need to be spoon-fed audio filesthe old-fashioned way, via Flash. The content model of read more..

  • Page - 41

    <object type="application/x-shockwave-flash" »data="player.swf?soundFile=witchitalineman.mp3"><param name="movie" »value="player.swf?soundFile=witchitalineman.mp3"><a href="witchitalineman.mp3">Download the song</a></object></audio>This example has four levels of graceful degradation:• The browser supports the audio element and the Ogg Vorbis format.• The browser supports the audio element and the MP3 read more..

  • Page - 42

    <audiocontrols><source src="witchitalineman.ogg" type="audio/ogg"><source src="witchitalineman.mp3" type="audio/mpeg"></audio><p>I am a lineman for the county...</p>VIDEOIf browser-native audio is exciting, the prospect of browser-native video has web designers salivating in anticipation. Asbandwidth has increased, video content has grown increasingly popular. The Flash plug-in is currently the technology ofchoice for read more..

  • Page - 43

    fig 3.07: This placeholderimage is displayed using theposter attribute.THE FOLLOWING PREVIEW HAS BEEN APPROVED FORAPPROPRIATE AUDIENCESBY THE MOTION PICTURE ASSOCIATION OF AMERICA. INC.THE FILM ADVERTISED H/lPG PARENTAL GUIDANCE!•::••!:•>::i»ii*wwl.!mrj1lngtcom.....mpMtKSThe battleground of competing video formats is even bloodierthan that of audio. Some of the big players are MP4—whichis patent-encumbered—and Theora Video, which isn't. Onceagain, you'll need to provide alternate read more..

  • Page - 44

    the img element. Big players like Google have not been shy inexpressing their enthusiasm. You can get a taste for what theyhave planned for YouTube at http://youtube.com/HTML5.One of the problems with relying on a plug-in for rich mediais that plug-in content is sandboxed from the rest of the document. Having native rich media elements in HTML meansthat they play nicely with the other browser technologies-JavaScript and CSS.The video element is not only scriptable, it is also styleable(fig read more..

  • Page - 45

    when javascript was introduced into web browsers, itwas immediately seized upon for two tasks: Image rolloversand form enhancements. When CSS came along with its: hover pseudo-class, web designers no longer needed to reachfor JavaScript just to achieve a simple rollover effect.This is a recurring trend. If a pattern is popular enough, itwill almost certainly evolve from requiring a scripted solutionto something more declarative. That's why CSS3 introduceseven more animation capabilities that read more..

  • Page - 46

    These features were originally part of a WHATWG specification called Web Forms 2.0, based upon existing work at theW3C. That specification has now been rolled into HTMLS.PLACEHOLDERHere's a common DOM Scripting pattern, often used forsearch forms:1. When a form field lias no value, insert some placeholder text into it.2. When the user focuses on that field, remove the placeholder text.3. If the user leaves the field and the field still has no value, reinstate theplaceholder text.The placeholder read more..

  • Page - 47

    might decide to fall back on a JavaScript solution. In that case,you need to make sure that the JavaScript solution is onlyapplied to browsers that don't understand the placeholderattribute.Here's a generic little JavaScript function that tests whether anelement supports a particular attribute:function elementSupportsAttribute(element, attribute) {var test = document.createElement(element);if (attribute in test) {return true;} else {return false;}}This works by creating a "phantom" read more..

  • Page - 48

    This is a simple one-step pattern, easily programmed inJavaScript:l. When the document loads, automatically focus one particularform field.HTMLS allows you to do this using the Boolean autof ocusattribute:•clabel for="status">What's happening?</label><input id="status" name="status" type="text" autofocus>The only problem with this pattern is that it can be annoyingas hell. When I'm surfing the web, I often hit the space bar toscroll down read more..

  • Page - 49

    The autofocus attribute doesn't only work on the inputelement; it can be used on any kind of form field, such astextarea or select, but it can only be used once perdocument.REQUIREDOne of the most common uses of JavaScript is client-side formvalidation. Once again, HTML5 is moving this solution fromscripting to markup. Just add the Boolean attribute required:<label for="pass">Your password</label><input id="pass" name="pass" type="password" read more..

  • Page - 50

    <form action="/selfdestruct" autocomplete="off">By default, browsers will assume an autocomplete value of"on," allowing them to pre-fill the form.You can have your auto-completion cake and eat it. If youwant to allow pre-filling for a form but disable pre-filling forjust one or two fields in that form, you can do so:<input type="text" name="onetimetoken" »autocomplete="off">There isn't any JavaScript fallback for browsers read more..

  • Page - 51

    <option value="Earth"><option value="Mars"><option value="Dupiter"><option value="Saturn"><option value="Uranus"><option value="Neptune"></datalist>This allows users to select an option from the list provided orto type in a value that isn't in the list at all. This is very handyfor situations that would normally require an extra form fieldlabeled, "If'other', please specify . . ." (fig read more..

  • Page - 52

    SearchingAn input element with a type value of "search" will behavemuch the same way as an input element with a type value of"text":<label for="query">Search</label>•cinput id="query" name="query" type="search">The only difference between "text" and "search" is that abrowser might display a search input differently to be moreconsistent with the styling of search fields in the operatingsystem. That's read more..

  • Page - 53

    Safari claims to support these new input types but a quicklook at a form in the desktop browser reveals no differencesto simply using type="text". However, if you start interacting with the same form in Mobile Safari, the differencesbecome apparent. The browser displays a different on-screenkeyboard depending on the value of the type attribute (fig4-05).Email address iWebsite iTelephoneEmail addressWebsite ndeplume|q_werWERTYU I OP]!Q W E RITIYIUI I |0|PASDFGHJKL• AlSlDlF|GIHI JEmail read more..

  • Page - 54

    HTML5, thanks to type="range", browsers can now offer anative control:<label for="amount">How much?</label><input id="amount" name="amount" type="range">Both Safari and Opera currently support this input type, offering similar-looking controls (fig 4.06).H..„ -....l,<-.fic 4-o6: The range input type in bothnow muui.Safari and Opera.By default, the input will accept a range from zero to one hundred. You can set your own read more..

  • Page - 55

    Here's some sample code, although I'm sure you can writesomething far more elegant than this:function inputSupportsType(test) {var input = document.createElement('input');input.setAttribute('type' ,test);if (input.type == 'text') {return false;} else {return true;}}You can then use this function to ensure that a JavaScript widget is only provided to browsers that don't natively support aparticular input type:if (!inputSupportsType('range')) {// JavaScript fallback goes here.}A native input read more..

  • Page - 56

    As well as allowing the user to input a value directly into a textfield, browsers can also display "spinner" controls to allowusers to increase or decrease the value (fig 4.07).How much?mF,c *-°7: sP'nner controls wheretype="number"is used.The number input type is a hybrid of text and range. Itallows users to enter values directly, like a text field, but italso allows browsers to ensure that only numerical valuesare entered, like a range control.Dates and timesOne of the read more..

  • Page - 57

    time at which World War One ended, 11:11am on November11th, 1918:• date: 1918-11-11• datetime: ioi8-]i-nTli:il:oo+oi• datetime-local: ioi8-ii-nTii:ii:oo• time: 11:11:00• month: 1918-11There is no year input type, although there is a week inputtype that takes a number between 1 and 53 in combinationwith a year.Using the date and time input types is straightforward:<label for="dtstart">Startdate</label>•cinput id="dtstart" name="dtstart" read more..

  • Page - 58

    generate a widget. Make sure to check for native support first:if (!inputSupportsType('date')) {// Generate a calendar widget here.}Even the most elegantly written JavaScript calendar widget isgoing to require some complexcode to generate the table ofdays and handle the date-picking events. Browser-native calendar widgets should be considerably smoother and faster, aswell as being consistent from site to site.Color pickersPerhaps the most ambitious widget replacement in HTMLSis the color input read more..

  • Page - 59

    The good news is that you can use the pattern attribute tospecify exactly what kind of value is expected. The bad newsis that you have to use a regular expression:<label for="zip">US Zip code</label><input id="zip" name="zip" pattern="[\d]{5}(-[\d]{4})">Most of the time, you'll never need to use the pattern attribute. On the occasions that you do, you have my sympathy.LOOKING TO THE FUTUREForms have been given a huge boost in HTML5. Much read more..

  • Page - 60

    I'd like you to think about a differentquestion: "Should I stylethem?"Remember, the web isn't about control. If a visitor to your siteis familiar with using a browser's native form doodad, youwon't be doing them any favors if you override the browserfunctionality with your own widget, even if you think yourwidget looks better.Personally, I'd like to see browser vendors competing on theprettiness and usability of their HTML5 form controls. That'sa browser war I could support.Let's put read more..

  • Page - 61

    HTML DOESN'T PROVIDE A HUGE NUMBER OF ELEMENTS forus to work with. The selection available is more like that of acorner store than a Walmart.We have paragraphs, lists, and headlines but we don't haveevents, news stories, or recipes. HTML gives us an elementfor marking up a string as an abbreviation, but it doesn't giveus an element for marking up a number as a price.Clearly, this limitation hasn't been a show-stopper; just lookat the amazing variety of websites out there. Even thoughHTML might read more..

  • Page - 62

    EXTENSIBILITYOther markup languages allow you to invent any elementyou want. In XML, if you want an event element or a priceelement, you just go right ahead and create it. The downsideto this freedom is that you then have to teach a parser whatevent or price means. The advantage to HTML's limited setof elements is that every user agent knows about every element. Browsers have a built-in knowledge of HTML. Thatwouldn't be possible if we were allowed to make up elementnames.HTML provides a handy read more..

  • Page - 63

    Microformats are limited by design. They don't attempt tosolve every possible use case. Instead, they aim for the "low-hanging fruit." They solve 80% of the use cases with 20% ofthe effort. Deciding what qualifies as "low-hanging fruit"is pretty straightforward: Just look at what kind of contentpeople are already marking up. In other words, pave thecowpaths.Sound familiar? Microformats and HTML5 are built on verysimilar philosophies. In fact, the way I described read more..

  • Page - 64

    documents. But unlike microformats—which simply use anagreed set of class names—RDFa uses namespaces to allow aninfinite variety of formats. So where a microfonnat might usemarkup such as <hl class="summary">, RDFa would use<hl property="myformat:summary">.There's no doubt that RDFa is potentially very powerful, butits expressiveness comes at a price. Namespaces introduce anextra layer of complexity that doesn't sit well with the relatively simple nature of read more..

  • Page - 65

    NEW ELEMENTSHTML5 introduces a handful of new inline elements to augment our existing arsenal of span, strong, em, abbr, et al. Oh,and we don't call them "inline" anymore. Instead, they describe "text-level semantics."markWhen browsing a list of search results, you'll often see thesearch term highlighted within each result. You could markup each instance of the search term with a span element, butspan is a semantically meaningless crutch, good for little morethan hanging read more..

  • Page - 66

    timehCalendar is one of the most popular microformats becauseit scratches a very common itch: marking up events so thatusers can add them straight to their calendar.The only tricky bit in hCalendar is describing dates and timesin a machine-readable way. Humans like to describe dates as"May 25th" or "next Wednesday" but parsers expect a nicely-formated ISO date: YYYY-MM-DDThh:mm:ss.The microformats community came up with some clever solutions to this problem, such as using the read more..

  • Page - 67

    <time>2010-04-07</time>meterThe meter element can be used to mark up measurements,provided that those measurements are part of a scale withminimum and maximum values.<meter>9 out of 10 cats</meter>You don't have to expose the maximum value if you don't wantto. You can use the max attribute instead:<meter max="10">9 cats</meter>There's a corresponding min attribute. You also get high, low,and optimum attributes to play with. If you want, you can read more..

  • Page - 68

    The progress element is most useful when it used in combination with DOM Scripting. You can use JavaScript to dynamically update the value, allowing the browser to communicatethat change to the user—very handy for Ajax file uploads.STRUCTUREBack in 2005, Google did some research to find out what kindof low-hanging fruit could be found on the cowpaths of theweb (http://code.google.com/webstats/).A parser looked at over a billion web pages and tabulated themost common class names. The results read more..

  • Page - 69

    headerThe HTML5 spec describes the header element as a containerfor "a group of introductory or navigational aids." That soundsreasonable. That's the kind of content I would expect to findin a masthead, and the word "header" is often used as a synonym for masthead.There's a crucial difference between the header element inHTML5 and the generally accepted use of the word "header"or "masthead." There's usually only one masthead in a page,but a document can read more..

  • Page - 70

    That maps quite nicely onto the mental model that webdesigners have for the word "footer." The difference is that,whereas we are used to having one footer for an entire document, HTML5 allows us to also have footers within sections.<section><header><hl>DOM Scripting</hl></header><p>The book is aimed at designers»rather than programmers.</p><footer><p>By Deremy Keith</p></footer></section>asideJust as the header read more..

  • Page - 71

    for example, to place an author bio in a sidebar. That kind ofdata is best suited to the footer element—the specificationexplicitly mentions authorship information as being suitablefor footers (fig 5.01).200520002007200820OTCOMMENTS CZJGiven its relativelylimitodsccpo. HTML can DoremarkaBlyexpressive. Witha bit o(lateral thinking, wo can mark up content such as Mo.clouds and nropreaa matafa.wnen we don't have oxplicit HTML elements for those patterns..:.-,•: :•. mark up • at on com read more..

  • Page - 72

    Actually, I'd better clarify that. The nav element is intended formajor navigation information. Just because a group of linksare grouped together in a list isn't enough reason to use thenav element. Site-wide navigation, on the other hand, almostcertainly belongs in a nav element.Quite often, a nav element will appear within a header element. That makes sense when you consider that the headerelement can be used for "navigational aids."articleIt's helpful to think of header, footer, read more..

  • Page - 73

    <p>Published•ctime datetime="2005-10-08T15:13" pubdate>3:13pm on October 8th, 2005</time>by Glenn 3ones</p></footer></article>If you have more than one time element within an article,only one of them can have the pubdate attribute.The article element is useful for blog posts, news stories,comments, reviews, and forum posts. It covers exactly thesame use cases as the hAtom microformat.The HTML5 specification goes further than that. It alsodeclares that read more..

  • Page - 74

    A cure for div-itis?HTML5 gives us the handful of new structural elementsdescribed above. They're especially handy if you're puttingtogether a conventional site, such as a blog. Most blog designsconsist of a header followed by a series of articles, with sometangential content in an aside, and finished off with a footer(fig 5.02).Friday, December 11th, 2009Belfastthoroughly enjOY*bie t•: I en;Oy any opooetur..ty to geek ojT aoojtbjicmg ".'/*/_'!»; m from of a captrve Ml er.ee!M:: seems• read more..

  • Page - 75

    These new elements weren't created just to replace div elements. They provide web browsers with a completely newway of understanding your content.CONTENT MODELSPrevious flavors of markup divided elements into twocategories: inline and block. HTML5 uses a more finegrained approach, dividing elements into a wider range ofcategories.Inline elements now have a content model of "text-levelsemantics." Many block level elements now fall under thebanner of "grouping content": read more..

  • Page - 76

    That gives us this outline:• An Event Apart• Cities• Seattle• Boston• MinneapolisThis works well enough. Any content that follows a headingelement is presumed to be associated with that heading.Now look at the final small element. That should be associated with the entire document. But a browser has no way ofknowing that. There's no way of knowing that the small element shouldn't fall under the heading "Minneapolis."The new sectioning content in HTML5 allows you to explicitly read more..

  • Page - 77

    Ican subdivide this content even further, placing each city inits own section:<hl>An Event Apart</hl><section><header><h2>Cities</h2></header><p>3oin us in these cities in 2010.</p><section><header><h3>Seattle</h3></header><p>Follow the yellow brick road.</p></section><section><header><h3>Boston</h3></header><p>That's Beantown to its read more..

  • Page - 78

    The outline algorithmSo far, the new sectioning content isn't giving us much morethan what we could do with previous versions of HTML.Here's the kicker: In HTML5, each piece of sectioning contenthas its own self-contained outline. That means you don't haveto keep track of what heading level you should be using—youcan just start from hi each time:<hl>An Event Apart</hl><section><header><hl>Cities</hl></header><p>Doin us in these cities in read more..

  • Page - 79

    • An Event Apart• Cities• Seattle• Boston• MinneapolisIn HTML5, the outline is accurate:• An Event Apart• Cities• Seattle• Boston• MinneapolishgroupThere are times when you might want to use a heading element but you don't want its contents to appear in the document outline. The hgroup element allows you to do just that:<hgroup><hl>An Event Apart</hl><h2>For people who make websites</h2></hgroup>In this case, the level two heading "For read more..

  • Page - 80

    Sectioning rootsSome elements are invisible to the generated outline. In otherwords, it doesn't matter how many headings you use withinthese elements, they won't appear in the document's outline.The blockquote, f ieldset, and td elements are all immuneto the outline algorithm. These elements are called "sectioningroots"—not to be confused with sectioning content.PortabilityBecause each piece of sectioning content generates its ownoutline, you can now get far more heading levels than read more..

  • Page - 81

    <article><hl>Cheese sandwich</hl><p>My cat ate a cheese sandwich.</p></article>Now the content is truly portable. It doesn't matter whetherit's appearing on its own page or on the home page:<hl>My awesome blog</hl><article><hl>Cheese sandwich</hl><p>My cat ate a cheese sandwich.</p></article>HTML5's new outline algorithm produces the correct result:• My awesome blog• Cheese sandwichScoped stylesThe fact that read more..

  • Page - 82

    <hl>My awesome blog</hl><article>cstyle scoped>hi { font-size:75% }</style><hl>Cheese sandwich</hl><p>My cat ate a cheese sandwich.</p></article>In that example, only the second hi element will have a font-size value of 75%. That's the theory anyway. No browsers support the scoped attribute yet.Therein lies the rub. Before you can start using a new additionto HTML5, you need to consider the browser support for thatfeature. I have a few read more..

  • Page - 83

    if you want to start using HTML5's new structural elements today, there's nothing stopping you. Most browsers willallow you to style the new elements. It's not that browsersactively support these elements, it's just that most browsersallow you to use and style any element you care to invent.STYLINGBrowsers won't apply any default styling to the new elements.So, at the very least, you will want to declare that the newstructural elements should force a line break:section, article, header, footer, read more..

  • Page - 84

    unless an exemplar of each element is first created withJavaScript, like this:document.createElement('section');JavaScript genius Remy Sharp has written a handy little scriptthat generates all of the new HTML5 elements. Load thisscript within a conditional comment so that it's only servedup to the needy Internet Explorer:<!--[if IE]><script src= »"http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><! [endif]-->Now you can style the new elements to read more..

  • Page - 85

    h2,section hi, article hi,aside hi {font-size:1.8em;}h3,section h2,article h2, aside h2,section section hi, section article hi, section aside hl;article section hi, article article hi, article aside hi,aside section hi, aside article hi, aside aside hi{font-size:1.6emj}That's just the first three levels and it doesn't even cover allthe possible combinations of headings within sectioningcontent.Fortunately, the HTMLS outline algorithm is pretty flexible.If you want to use heading levels the read more..

  • Page - 86

    The most basic ARIA unit is the role attribute. You can addrole="search" to your search form, role="banner" to yourmasthead, and role="contentinfo" to your page footer.There's a full list of values in the ARIA specification athttp://bkaprt.com/html5/10.2You can also use these role values in HTML 4.01, XHTML1.0, or any other flavor of markup, but then your documentwill no longer validate—unless you create a custom doctype,which is a world of pain.But ARIAroles are read more..

  • Page - 87

    FEATURE DETECTIONIf you want to start using some of the more advanced inputtypes in HTML5, you'll need a way of testing for browser support so that you can provide JavaScript alternatives.Modernizr is a useful JavaScript file that will detect supportfor input types as well as audio, video, and canvas (http://www.modernizr.com/).The script creates an object in JavaScript called Modernizr.By querying the properties of this object, you can determinewhether the browser supports a particular input read more..

  • Page - 88

    If you're nervous about using the new structural elements,you can still get used to the new semantics by using classnames as training wheels:<divclass="section"><divclass="header"><hl>Hello world!</hl></div><!--/.header--></div><!--/.section-->Further down the road, when you're feeling more confidentabout using new FITML5 elements, you can replace those divelements and class names with the corresponding structuralelements.While read more..

  • Page - 89

    If you fancy getting into the more complex side ofHTML5, Remy Sharp is pushing the boundaries:http://html5demos.com/Mark Pilgrim has written an exhaustive book calledDive Into HTMLS. Buy it from O'Reilly or read it online:http://diveintohtml5.org/For those occasions when you need to go straight tothe source, keep the HTML5 specification on speed dial:http://whatwg.org/html5The HTMLS specification includes a lot of informationintended for browser makers. The W3C hosts an up-to-date version of the read more..

  • Page - 90

    There's also an IRC channel. Sometimes you want to go whereeverybody knows your handle: irc://irc.freenode.org/whatwgDon't be shy. The IRC channel is a great place to ask questions and get answers from Ian Hickson, Anne van Kesteren,Lachlan Hunt, and other WHATWG members.THE FUTUREI hope that this little sashay 'round HTMLS has encouragedyou to start exploring this very excitingtechnology. I alsohope that you will bring the fruits of your exploration back tothe WHATWG.HTML is the most important read more..

  • Page - 91

    INDEX2012, 7, 112022, 7Ajax, 22, 63, 76, 80Allsopp, John, 58API, 20-21, 24-25, 28, 32Apple, 4, 29, 34ARIA, 80, 82article, 67, 75, 76aside, 65, 67, 78audio, 22, 29-37, 82autobulTer, 32-33autocomplete, 44-45autofocus, 42-44autoplay, 30-31, 37BBerners-I.ee, Sir Tim, 1, 5Bespin, 26big, 18canvas, 23-29, 70, 82character encoding, 14Chrome, 29cite, 19class, 57color, 53, 83controls, 31, 33-38CSS, 3, 7, 14, 18, 20, 39, 40. 57> 76, 79datalist, 45-46date, 51-53datetime, 51-52datetime-local, 51-52div, read more..

  • Page - 92

    month, 51, 52Mosaic, 2, 23Mozilla, 4, 26MP3, 30, 34MP4, 38Nnav, 66-67,78,80Nottingham, Mark, 59number, 50-51obsolete, 17Ogg Vorbis, 34, 36Opera, 4, 29,49, 52outline, 70-76, 79-80pattern, 54Pilgrim, Mark, 84placeholder, 41-42poster, 37, 38preload, 33, 37progress, 62-63pubdate, 67Python, 15QuickTime, 30range, 49-51,83RDFa, 58-59Real Audio, 30required, 44role, 81Safari, 29, 33, 47,49, 50scoped,76-77search, 47,60,81, 83sectioning content, 70-75, 79sectioning roots, 75SGML, 1Sharp, Remy, 79,82, read more..

  • Page - 93

    ABOUT A BOOK APARTWeb design is about multi-disciplinary mastery and laserfocus, and that's the thinking behind our new line of briefbooks for people who make websites.A Book Apart publishes highly detailed and meticulouslyedited examinations of single topics. We are pleased to launchour new publishing venture with Jeremy Keith's HTMLSforWeb Designers.COLOPHONThe text is set in FF Yoga and its companion, FF Yoga Sans,both by Xavier Dupre. Headlines and cover are set in TitlingGothic by David read more..

  • Page - 94

    ABOUT THE AUTHOR^^^^Jeremy Keith is an Irish web devel-jMJ^loper living in Brighton, England,where he works with the web1-Eg ^ Wconsultancy firm Clearleft. He has™written two previous books, DOMScripting and BulletproofAjax, butwhat he really wants to do is direct.His online home is adactio.com andhis latest project is Huffduffer, aservice for creating podcasts of found sounds. When he's notmaking websites, Jeremy plays bouzouki in the band SalterCane. His loony bun is fine benny lava. read more..

  • Page - 95

    HTML5 is the longest HTML specification everwritten. It is also the most powerful, and in someways, the most confusing. What do accessible,content-focused standards-based web designers andfront-end developers need to know? And how can weharness the power of HTML5 in today's browsers?In this brilliant and entertaining user's guide, JeremyKeith cuts to the chasewith crisp, clear, practicalexamples, and his patented wit and charm.Crack open this book afteryoufasten your seatbelt in Boston. read more..

Write Your Review