Notable Changes in HTML5 - dummies

By Andy Harris

The HTML language is actually only one part of a much bigger picture that is HTML5. In truth, HTML5 is the integration of several different technologies (HTML, CSS, JavaScript, and server-based technologies), which each have their own role.

Changes from HTML to HTML5

Changes to the HTML language itself are evident in HTML5. A few tags have been added to the HTML 4 standard, and a number have been taken away. However, HTML5 remains backward-compatible with HTML 4, so there’s no absolute requirement to write your code in the HTML5 standard. Adapting from HTML 4 to HTML5 is probably the easiest part of moving to the complete HTML mindset.

The main changes include:

  • Semantic markup: HTML5 now includes new tags that describe parts of a document. Now there are dedicated tags for navigation elements, articles, sections, headers, and footers.

  • New form elements: HTML5 forms have some major updates. There are several new versions of the <input> element, allowing users to pick colors, numbers, e-mail addresses, and dates with easy-to-use elements.

  • Media elements: At long last, HTML5 has native support for audio and video with tags similar to the <img> tag.

  • canvas tag: The canvas tag allows the programmer to build graphics interactively. This capability will allow for very intriguing capabilities like custom gaming and interface elements.

The relationship between CSS and HTML5

Probably the biggest adjustment from HTML 4 is the changing relationship between HTML and CSS. CSS is central to the HTML5 way of thinking. In HTML5 (like in XHTML), the markup language only describes what various elements mean; CSS is used to describe how things look.

Along with the HTML5 standard comes a new standard for CSS, called CSS3. It’s nearly impossible to talk about HTML5 without also including CSS3 because they’re so closely related. Here are the main new features:

  • Embedded font support: With this long-awaited tool, you can include a font with a web page, and it will render even if the user doesn’t have the font installed on her operating system.

  • New selectors: Selectors are used to describe a chunk of code to be modified. CSS3 now supports new selectors that let you choose every other element, as well as specific sub-elements (different types of input tags, for example).

  • Columns: HTML has never had decent support for columns, and all kinds of hacks have been used to overcome this shortcoming. Finally, CSS includes the ability to break an element into any number of columns easily.

  • Visual enhancements: CSS has a number of interesting new capabilities: transparency, shadows, rounded corners, animations, gradients, and transformations. These provide a profound new level of control over the appearance of a page.

JavaScript and HTML5

If HTML describes what parts of the document are, and CSS describe how these parts look, JavaScript defines how elements act. JavaScript is a full-blown programming language and a very critical part of the HTML5 point of view. A few of HTML5’s most interesting features are accessible only through JavaScript.

  • Vector graphics support: Vector-based graphics provide an interesting alternative to traditional graphics because they can be created on the fly through code. HTML5 actually has two ways to do this: through SVG (Scalable Vector Graphics) and the canvas tag.

  • New selectors: Most JavaScript programming begins by grabbing an element by ID. HTML5 now allows you to select elements by tag name, or by the same mechanisms you use to select elements in CSS.

  • Local storage mechanisms: Previous versions of HTML allowed very limited storage of information on the client. HTML5 now allows the developer to store data on the client. There is even a built-in database manager that accepts SQL commands.

  • Geolocation: This interesting feature uses a variety of mechanisms to determine where the user is located.

Server technologies and HTML5

Modern web development is about communication. All the technologies that make up HTML5 reside in the web browser, which is an important part of the web. However, an equally important part of web development is a raft of technologies that live on the web server. Many of the most interesting things happening today use technologies like PHP or ASP to run programs that create web pages or use database programs like Oracle or MySQL to manage large amounts of data. The advent of AJAX has made integration between those technologies and the browser much easier. You can expect to use a host of other applications and technologies in tandem with HTML5.