Ingus.info

 

"Introducing HTML5 - Second Edition" book review

30.04.2013

Front-End Development, Books

Last week I've finished reading "Introducing HTML5 - Second Edition" book written by Bruce Lawson and Remy Sharp. Since the first edition of this book came out in July 2010, much has changed: support for HTML5 is much more widespread, Internet Explorer 9 and 10 came out, Google Chrome announced it would drop support for H.264 video, Opera experimented with video streaming from the user’s webcam via the browser, and HTML5 fever became HTML5 hysteria with any new technique or technology being called HTML5 by clients, bosses, and journalists.

Introducing HTML5 - Second Edition book review

In general this book concentrates on the problems that HTML5 can solve, rather than on an academic investigation of the language. One of the first tasks of HTML5 was to document the undocumented, in order to increase interoperability by leaving less to guesswork for web authors and implementors of browsers. So after reading it I want to highlight TOP 5 things that I've found to be the most exciting and useful for me, as well as mention things that is worth knowing.

5. Role attribute
Imagine that you have scripted a slider control. In HTML 4 there is no native slider, so you just have some HTML elements (an input, some images) with some JavaScript attached to act and look like a slider. There is no way to tell the operating system that the role of this widget is a slider and what its current state and value are. If the operating system doesn’t know that vital information, assistive technology such as a screen reader can’t convey it to the user either. So roles help human and the machine understand the purpose of every block. But the best thing is that roles are not just informative, you can actually call the element using roles instead of classes. The syntax is simple: div[role=main] { float: right; }

4. Drag & Drop
Yes, drag and drop actually is part of the real HTML5 spec. Well, it’s here because Microsoft Internet Explorer added drag and drop back in 1999 in IE5—yep, that long ago. Since then, Safari had implemented IE’s API, so Ian Hick- son, the HTML5 editor, reverse engineered the API, did all the hard work to understand exactly what was going on (describing the MSDN documentation as having a “vague hand-wavy description”), and documented the API. Now we’re in the position where Firefox, Safari, Chrome, and IE support this API.
This API, as its name implies, allows you to drag items and drop them anywhere in the browser. But this functionality is not limited to the browser. You can drag elements from the browser to external applications—like another browser window, or Photoshop, or a text editor—and the applica- tion can prepare the dragged data so that it’s compatible with the drop target. This lends itself very well to the idea that HMTL5 is a web applications spec, and is giving us developers more functionality that borrows from desktop computing.

3. Built-in validation
One of the coolest features for developers—which will be transparent to bosses and consumers, but they’ll make our lives much easier— are new form input types which can give us special UIs and built-in error reporting. From now on you just need to specify a "type" inside your "input field" and the browser will validate automatically. For example "<input type=number>" will validate input field for numbers only.

2. Forms
Of of the problems with HTML 4 forms is that they’re just dumb fields. Validation is required on the server, of course, but you have to duplicate it in the user’s browser with JavaScript to give them the seamless experience they deserve. Given that almost every web page has some kind of form—search, comments, sign-up, and so on—wouldn’t it be great if browsers had built-in validation for some of the most common data types that we collect? You guessed it: HTML5 forms provide exactly that. In fact each data type now comes with some cool widgets. For example using "<input type=date"> solves this problem by providing a native datepicker widget that’s rendered directly by the browser. Opera, for example, pops up a calendar widget. Until now you'd have to use jQuery UI or other frameworks.

1. HTML5 structural elements
The best thing of all is probably the main soul of HTML5. Finally your web page doesn't have to consist of just simple "div" blocks. Where you have to assign a class name to every one of them to understand and change the styles if them. In fact now you actually can ditch "div" blocks all together. Thanks to HTML5 new implemented tags and elements you can build your web page from the blocks that would be understandable to other people or machines. HTML5 reflects the Web as it was during its development: in general 30 elements are new, many of them inspired by the class and id developers have used so far all over the world like (header, footer, banner, post, section, nav, article, etc). You can see on the illustration how it used to be in HTML4 and how things have changed now with introduction of HTML5.

HTML4 vs HTML5 structure

So here are the TOP5 things that I've found the most important to mention. Of course there is plenty of other cool stuff which is really important so I would suggest you definitely reading this book too.

And now TOP 5 interesting facts that is worth knowing:
1. <!DOCTYPE html> It’s required by browsers that need the presence of a DOCTYPE to trigger standards mode, and this is the shortest string that does this reliably. So this if why we still include the DOCTYPE.
2. HTML, HEAD and BODY tags. These three elements are (XHTML authors, are you sitting down?) entirely optional, because browsers assume them anyway. But don't forget that IE8 and below require these elements before they will apply CSS.
3. In HTML 4, the start attribute on <ol> was deprecated, as it was deemed presentational. Luckily, HTML5 reverts this wrong decision. If you want an ordered list to start at line five rather than line one, use: <ol start=5> Also there is a "reversed" option that will create a reverse list.
4. You can begin the value of ID with a digit.
5. Form tag is replaced with form attribute.

Forget the marketing BS of “Web 2.0.” We’re at the beginning of Web Development 2.0: powerful languages like HTML5, SVG, and CSS3 will revolutionise the way we build the Web. Browsers support more and more aspects of these languages, and you can be certain that further support is being added daily.