What are some of the new features in HTML5?
What is semantic HTML?
Semantic HTML is a method of writing HTML in which the tags you use in your code correlate meaningfully with the content that they enclose. For example, using <strong></strong> over <b></b> when making text boldface places more emphasis on the semantic purpose of the content instead of using the tag solely as a formatting agent. The same applies for using <em></em> over <i></i>, and so on. In HTML5, new structural element tags like <main>, <nav>, <article>, <section>, <aside>, <header>, and <footer> expand the applicability of semantic HTML.
What are web workers and why are they important?
Introduced in HTML5, web workers are scripts that run in the background so that a loading page doesn’t have to wait for them to complete. This is called multi-threading, in which the script runs in a different thread and doesn’t interfere with the user’s ability to interact with the webpage. Because web workers can be executed asynchronously, there is less risk of the webpage freezing or crashing.
What is the difference between Canvas and SVG graphics?
Both of these features draw graphics in the browser, but with some major differences. <Canvas> works with two-dimensional pixels and is a “draw and forget” feature, in which once something is drawn, it cannot be modified again. SVG (Scalable Vector Graphics) works with two- or three-dimensional vectors and is a “draw and remember” feature. Something drawn using SVG can be manipulated after the fact and rendered again by the browser. <Canvas> is generally faster than SVG as it doesn’t have to retain coordinates, but it is resolution dependent and less powerful when it comes to more involved graphics.
What is the difference between cookies, sessionStorage, and localStorage?
Cookies are mini text files that websites use to store data locally in a user’s browser – typically for login purposes. They are limited to 4 KB of data and set to expire after a certain amount of time elapses. In HTML5, sessionStorage and localStorage are new web storage features that provide a more secure alternative to cookies, in that data is only transferred to the server when requested. Web storage permits up to 5MB of data, with no temporal expiration restrictions.
The two forms of web storage vary in their lifetime and scope. Data stored in sessionStorage expires when the tab in which the script is running is closed, while data stored in localStorage is permanent and can only be deleted manually. In terms of scope, localStorage is website-specific, while sessionStorage operates on a per-window basis. Identical scripts from different tabs cannot read or overwrite each other.
What are the application cache and manifest file?
The application cache is a new feature in HTML5 that enables users to create offline versions of web applications and locally fetch website content such as HTML and CSS files. Unlike regular HTML browser caching, the application cache does not require that the user visit website content in order for it to be cached. Ultimately, the application cache improves website performance.
The application cache can be enabled by adding the manifest attribute to the <html> tag and providing a link to the manifest file. The manifest file is read by the browser to determine what to cache while the application cache is enabled. It is made up of three components: CACHE MANIFEST, which lists the files to be cached; NETWORK, which lists the files to be ignored; and FALLBACK, which provides backup pages for inaccessible pages.
What do some of the new form elements do?
date: displays a calendar dialogue box
keygen: generates a key-pair field for authentication
color: displays a color picker dialogue box
email: creates an email address validation text box
url: creates a URL validation text box
telephone: creates a text box that takes phone numbers as input
range: displays a slider to select a value within a specified range
number: denotes an input field that should contain a numeric value
search: creates a search engine box
Can a <section> element contain <article> elements, and vice versa?
Yes, for both. The <section> element delineates different sections of a webpage, and one of these sections could be used for listing articles via the <article> element. Likewise, an <article> element can contain <section> elements at the end for comments, reviews, links to other related articles, and so on.
What is the difference between the <header>, <hgroup>, and <h1>-<h6> tags?
The <header> element is used to delineate the header of a page or section, which can include a title, metadata, logo, and so on. This element is the most inclusive. The <hgroup> element is a particular type of <header> that can only include <h1>-<h6> elements. It is used to contain titles with multiple subtitles, as per the <h1>-<h6> hierarchy. In HTML5, the <h1>-<h6> elements function the same as in previous specifications, but with more emphasis on correctly maintaining the hierarchy.
What browsers support HTML5, and is it compatible with older browsers?
HTML5 is generally supported by the latest versions of Chrome, Safari, Firefox, and Opera. Internet Explorer has had patchy support for HTML5 in the past, and even now it may not be completely functional all the time. HTML5 is designed to be as compatible as possible with older browsers, but there is some functionality that is not supported. However, since older browsers will recognize unknown elements as inline elements, HTML5 elements can be added or “taught” to older browsers.