About this book

HTML5 and CSS3 are the way for the future. Prior to HTML5 and CSS3, it was difficult to design complicated animations and transformations. With the advent of HTML5 and CSS3, web design has become much simpler, and the new features that are now available help us design complex web pages with ease. These cool new features will be the standard for the future; hence, it is imperative to learn about them now.

HTML5 and CSS3 Transition, Transformation, and Animation will help you take advantage of the real power behind HTML5 and CSS3 and will give you a good grounding for using it in your own web pages. Each and every code sample and concept is explained in detail, and you will be provided with all the information you need to take your web pages to the next level – before all your competitors do!

The book starts by covering the basic concepts of HTML5 and CSS3 such as semantics, Microdata, and the Flexbox model. You will then quickly progress to intermediate concepts such as form elements and some exciting features with JavaScript APIs. The code samples provided in this book will give you a solid base by which you will then be able to understand, write, and execute your own HTML/CSS projects with transition and animations.

Instead of wading through loads of theory, the concepts in this book are explained in a practical manner using code samples to demonstrate the new features of HTML5 and CSS3. The code samples are such that you can copy the code (the entire code is written instead of code snippets) and execute it for better understanding. Transition, transformation, and animation are also explained in a lucid manner, and there is a gradual increase in the difficulty level throughout the book.

By the end of the book, you will be thoroughly acquainted with HTML5 and CSS3, enabling you to design a web page using the included code samples with ease.

Publication date:
November 2013
Publisher
Packt
Pages
136
ISBN
9781849519946

 

Chapter 1. Introduction to HTML5

HTML originated from a prototype created by Tim Berners-Lee in 1992. He felt that there was a possibility of linking documents together by the use of hypertext and the concept of HTML evolved. The drawback was that the commercial hypertext packages available at that time such as ZOG and Intermedia were customized to suit different types of computers and were too ambiguous in nature.

He developed HTML (HyperText Markup Language) and in conjunction, developed a protocol for accessing text from other documents via hyperlinks. The protocol was called HTTP, and this paved the way for the future. HTML itself was derived from a markup language called SGML (Standard Generalized Markup Language).

 

Standardizing HTML


Standardization is an ongoing process. Modifications were made constantly and versions were released accordingly. The various versions of HTML that have been released are as follows:

  • HTML 2.0 (November 1995)

  • HTML 3.2 (January 1997)

  • HTML 4.0 (December 1997)

  • HTML 4.01 (December 1999)

A breakthrough in the field was the introduction of CSS along with HTML 4.0. Prior to the introduction of CSS, web designers and developers used HTML for formatting purposes. Formatting and styling a web page using HTML defeats the purpose of HTML, as HTML elements and attributes must only define the structure of the web page. The purpose of CSS was to break styling out from structural markup. With the introduction of CSS, we could separate presentation from content.

As a result, formatting could be separated from the HTML document and stored in a separate file, which could then be included in the document using a link tag. Hence, all the presentational HTML elements and attributes were replaced by CSS to provide versatility and better accessibility. Now, we can define a look or modify the look of a web page by making changes in the style sheet without actually altering the code.

As far as HTML is concerned, the latest version, which is HTML5, is still in the development stage. The Web Hypertext Application Technology Working Group (WHATWG) and the World Wide Web Consortium (W3C) are working together on HTML5. The proposed year for the release is around 2014.

 

Differences between HTML 4 and HTML5


HTML5 will soon be accepted as the benchmark. It differs from the previous versions of HTML in various ways. HTML5 works with modern browsers and also offers backward compatibility. HTML5 has a lot of new features that will change the approach in designing websites. Some of the features present in the older versions of HTML have been omitted from HTML5.

Let's take a look at the difference between HTML 4 and HTML5:

  • The document type declaration in HTML5 is very simple. All we need to do is type <!DOCTYPE html> so that the browser can recognize that we will be working with HTML5.

  • Character encoding in HTML5 is far simpler. Earlier it was written in the following manner:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-  8">

    In HTML5, it is written in the following way:

    <meta charset="UTF-8">
  • Elements such as center, frame, frameset, and noframes have been omitted from HTML5. Key elements such as basefont, big, font, and blink do not exist in HTML5. All the things that have been omitted indicate that CSS will be used for styling purposes.

  • New elements have been introduced in HTML5. The new elements are as follows:

    • <header>

    • <footer>

    • <nav>

    • <section>

    • <aside>

    • <article>

    We will look at these new elements in detail in the following chapters.

  • Attributes such as border, cellpadding, and nowrap to mention a few have been removed from HTML5 as their functionality can be handled better by CSS.

  • Since HTML5 is used extensively for web-based applications, modifications have been made in the present APIs and new APIs have been introduced. APIs have been developed for media elements such as audio and video. Drag-and-drop APIs and elements such as canvas have been included in HTML5. Facilities such as offline data storage, are a feature of HTML5 and APIs have been developed for this purpose.

  • Error handling is another feature of HTML5, which will make it easier to write valid HTML code. HTML5 has strict parsing rules to handle errors in the code.

Although it is still in the development stage, let's see why we should start using HTML5 right away.

 

Why we must start using HTML5


HTML5 is still in the development stage. However, the following are the reasons why we must start implementing it right away.

  • The content becomes much more accessible with the use of tags such as aside, article, header, footer, and section. Earlier, there was no way to understand the div element in the code even if there was an ID assigned to it. That has changed after incorporating tags such as header, footer, and so on. HTML assists the developer in writing cleaner code. For example, copyright data can be indicated using the footer tag. It makes things much more systematic.

  • We can embed audio and video, thereby eliminating the need for additional plugins. We can control the audio and video elements using HTML or JavaScript whereas the styling will be taken care of by CSS.

  • Web storage is an impressive feature of HTML5. The data is stored in the user's browser. This feature is of great use when we surf through e-commerce sites as user preferences can be stored on the browser.

  • We can develop offline applications with HTML5. In this case, the user can access the application offline and also sync the data back with the remote server once he is back online.

  • HTML5 is extensively used to develop mobile web applications. Tablets and mobile web applications are in vogue. For example, HTML5, along with JQM (jQuery for Mobiles), is used for developing complex mobile applications. The look of a web-based application on a mobile phone or tablet is different than that on a desktop computer. Most of the latest browsers (such as Google Chrome, Safari, Opera, Mozilla Firefox, IE9) support HTML5. HTML5 offers cross-browser compatibility and hence, it is the markup language of the future. HTML5 is not compatible with earlier versions of IE but there is a workaround for that. We can add a JavaScript Shiv to the code, which will make the browser aware of HTML5. JavaScript Shiv, created by Remy Sharp, is found on Google codes and can be included in the HTML document header in the following manner:

    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
  • An advantage of HTML5 is that it includes form-related attributes that provide enhanced functionality. Earlier we had to use JavaScript for this purpose. HTML5 has new elements and attributes that support the input type and form elements. For example, we have date pickers and also input types such as e-mail which account for entry of e-mail addresses.

 

Myths about HTML5


There are some misconceptions about HTML5. Let's look at some of the myths and facts surrounding HTML5:

  • We need to understand that HTML5 is not a replacement for Flash. We can embed audio and video in HTML5 but to think that it will replace Flash is a myth. Some things can be easily done in Flash than in HTML5. For example, live video streaming is not possible with HTML5.

  • Another misunderstanding is that HTML5 is still in the nascent stage and cannot be used. One has to understand that standardization is an ongoing process. However, HTML5 has a lot of impressive features that would encourage any web designer to use it. Moreover, browsers are getting updated regularly and the latest versions of some of the browsers already support it.

  • HTML5 works well with IE (Internet Explorer). That IE and HTML5 are not compatible at all is a myth. It is true that versions prior to IE9 are not fully compatible with HTML5, however, developers can always write a fallback code in such situations. Browsers are coming out with their latest versions quite frequently and IE9 already supports it.

  • Most people assume that CSS comes along with HTML5. However, that is not true. CSS is used for styling and presentation whereas HTML5 deals with content. An HTML page without CSS will be good enough to use but might not look that good in terms of presentation.

  • One more misconception is that HTML5 does not have a development environment. We can create an HTML file with just a simple text editor. However, as a developer, we can definitely use an integrated development environment (IDE) such as Eclipse, Visual Studio, or even Dreamweaver CS5 to work with HTML5.

Note

Suppose we add <!DOCTYPE html> to the code, do you think that it would become an HTML5 code? My answer would be a firm "No". HTML5 is not just some kind of a document type. HTML5 has a lot of new elements, attributes, input types, and so on. It is a whole set of rules that enables the developer to define a web page in an impressive manner.

 

Summary


We had a look at the differences between HTML 4 and HTML5 along with the facts and myths of HTML5. In the coming chapters, we will be learning about HTML5 in detail. In the next chapter, we will learn how to use the new markup to build a semantic page.

About the Authors

  • Aravind Shenoy

    Aravind Shenoy is an in-house author at Packt Publishing. An engineering graduate from the Manipal Institute of Technology, his core interests lie in technical writing, web designing, and software testing. He was born, and is based, in Mumbai, India. A music buff, he loves listening to Oasis, R.E.M, The Doors, Dire Straits, and U2. Rock n' Roll and Rap rule his playlists. He is also the author of several other books such as Thinking in HTML and Hadoop Explained, both by Packt Publishing. You can find out more about him on the Amazon Author Central page at http://www.amazon.com/Aravind-Shenoy/e/B00ITSR2WE.

    He can be contacted at [email protected]

    Browse publications by this author
  • Gianluca Guarini

    Gianluca Guarini is a 25-year-old web developer, with strong design skills, working currently in Zurich. He was born in Avellino, a sunny city in the south of Italy, and he grew up designing things and playing video games from an early age on a Commodore 64. He graduated in Psychology of Communication in Milan and has worked collaborating with small web agencies as a freelancer, always searching for new projects to enhance his skills. In 2011, he wrote an HTML5 guide for the biggest Italian web design e-learning portal HTML.it and in the same year he started a long collaboration with Radio Deejay pushing the HTML5 technology into the mainstream in Italy thanks to an amazing working group. He won, with Radio Deejay team, the first prize for the best Design/UX in Dev Unplugged (an HTML5 contest for the launch of Internet Explorer 9) realizing The Visual Player, an amazing project that combines the use of HTML5 Canvas, Video, Audio, and SVG features. In 2012, he moved to Zurich to work as frontend developer for Gold Interactive, then a brand-new web agency that likes to start any new project always by exploiting the coolest HTML5 features needed to make them unique and great. He believes in open source and is always sharing his tricky codes on Twitter from his account @gianlucaguarini. You can contact him at [email protected] and https://github.com/GianlucaGuarini.

    Browse publications by this author