Introduction to HTML5

HTML5 Introduction

What is HTML5?

HTML5 is the next generation HTML standard.

HTML, the previous version of HTML 4.01 was born in 1999. The world of the Web has changed dramatically since then.

HTML5 is still a work in progress. However, most modern browsers already have some HTML5 support.

How did HTML5 get started?

HTML5 is the result of collaboration between W3C and WHATWG, which stands for Web Hypertext Application Technology Working Group. .

The WHATWG focuses on web forms and applications, while the W3C focuses on XHTML 2.0. In 2006, the two parties decided to collaborate to create a new version of HTML.

Some interesting new features in HTML5:

Canvas element for drawing

Video and audio elements for media playback

Better support for local offline storage

New special content elements, such as article, footer, header, nav, section

New form controls, such as calendar, date , time, email, url, search

1, audio and video playback

Video has been widely popular on the Web, but its formats are almost always proprietary. YouTube uses Flash, Microsoft uses Windows Media®, and Apple uses QuickTime. The tags used to embed this content in one browser will not be valid in another browser.

HTML5’s new

There is still debate over which format and codec is preferred. Ogg Theora may be strongly recommended or required. There is also optional support for proprietary formats such as QuickTime and patent-restricted formats such as MPEG-4. The actual format used is likely to be determined by the market, as is the case with GIF, JPEG, and PNG (which competed to become the format of choice for img elements, beating out competitors such as BMP, X-Bitmap, and JPEG 2000).

2. Animation Canvas

HTML 5 introduces many new features, one of the most anticipated is the canvas element. HTML 5 canvas provides a simple but powerful way to draw graphics through JavaScript. Each canvas element has a "context" (think of a page on a drawing board) in which any shape can be drawn. Browsers support multiple canvas contexts and provide graphics drawing capabilities through different APIs. The picture below shows the Invaders classic game based on the HTML5 Canvas object.

　3. Geographic information

Click the circle above the yellow man in the map to tell Google Maps your geographical location.

Another function of HTML5 is the geographical information positioning function. Some browsers provide geolocation API. This API is also managed by W3C and can be combined with HTML5 to realize your current geographical location positioning. Google Maps uses this feature. On Google Maps, there is a small circle that, with one click, tells Google Maps your current location. Currently, the Geolocation API is not widely adopted by many desktop browsers (only Chrome and Firefox 3.6+), but the Google Gears plug-in can help those older browsers implement this feature.

Twitter uses this to implement geographical information-aware tweets. When the browser supports the geolocation API, it will automatically use the API. Otherwise, Google Gears will be used.

　4. Hardware acceleration, WEB SOCKET

　5. Local offline application (even after the Internet connection is interrupted)

　6. Local storage

relative Unlike HTML4, which can only use cookies to store data on the client side, which is limited in size, takes up bandwidth, and has complex operations, HTML5 supports the use of Web Storage to store data on the client side, which has a larger capacity, reduces bandwidth pressure, and is easy to operate.

7. Semantic tags

The biggest significance of HTML5 is to change the structure of Web documents. With the help of header, footer, section, article tags, we can achieve a more structured, Semantic Web documents. In this way, search engines can index the Web site more easily, and we can search for faster and more accurate information.

In addition, with Microdata, HTML5 can also achieve a more powerful semantic structure. This standardized data format (similar to microformats) allows your site to not only provide data, but also provide data definitions. Microdata is of great significance to both browsers and search engines. Search engines can use Microdata to discover your friends on the Internet, and browsers can use it to connect to your social network friends' sites.

HTML5

## The declaration must be located on the first line in the HTML5 document. It is very simple to use:

Semantic Elements

HTML5 adds a lot of semantic elements as shown below ：

##

Advantages of HTML5

1. Improve usability and improve user-friendly experience; 2. New tags that will help developers define important content ;

3. Can bring more multimedia elements (video and audio) to the site;

4. Can be a good substitute for FLASH and Silverlight;

5. It is very SEO-friendly when it comes to crawling and indexing websites;

6. It is widely used in mobile applications and games.

Disadvantages of HTML5

1. HTML5 itself is still in development. It is not the most urgent need for user applications, but more of a strategy for manufacturers to try to change the software ecological pattern. need.

　2. The compatibility of HTML5 is limited by the performance of major browsers. For example, there are many differences between Microsoft's IE and Fireforx.

　3. HTML5 requires a mature and complete development environment, which is currently lacking.

　4. With the rapid increase of HTML5 functions, the browser must have an efficient graphics engine and script engine.

　5. HTML5 needs a killer application to attract and guide users to upgrade their browsers, and ultimately complete the deployment of HTML5 terminals.

Future Prospects

Judging from the data in January 2012, more than 34% of the world’s websites have used HTML5 technology. Except for IE6-8 browsers, all other mainstream browsers support HTML5, among which only iPhone/iPad does not support Flash.

According to IDC research, 1 billion people around the world will use HTML5 browsers in 2013, and 2 million developers will develop applications for HTML5 browsers. HTML5 will become an important factor in mobile development in the next 5-10 years.