Introduction to HTML5

Time:2019-12-7

HTML (Hypertext Markup Language) was born in the early 1990s. It is used to specify the elements of building web pages. Most of these elements are used to describe the content of web pages, such as titles, paragraphs, lists, links to other web pages, etc. HTML 5 is the latest version of HTML. Most of its content can be compatible with new and old browsers, and a lot of new features have been added. HTML5 also introduces native audio and video playback capabilities.

You can view the latest specifications of HTML through the following URL:

1)HTML5:http://www.w3.org/TR/html5/

2)HTML5.1:http://www.w3.org/TR/html51/

HTML5 introduction

HTML5 is actually a collection of related technologies used to produce modern rich web content. The three most important technologies are HTML5 core specification, CSS (cascading style sheets) and JavaScript.

1) the HTML5 core specification defines the elements used to mark the content and defines their meanings.

2) CSS is used to control the appearance of marked content in front of users.

3) JavaScript is used to manipulate the content of HTML documents and respond to user’s operations.

At the same time, HTML5 introduces native multimedia support, programmable content (canvas element, JavaScript must be used) and semantic web.

Browser support for HTML5

Browser function verification

Whether the functions of HTML5 can be used or not depends on whether the browser supports it. Now there are many browsers, and each browser has many versions. As a web developer, it is difficult to fully test whether a certain version of each browser supports a certain function. However, there is a website http://caniuse.com/ to help you, which details the support of each mainstream browser for HTML5.

Browser usage

If you need to determine whether you need to support a browser, or a version of the browser (usually IE), then http://gs.statcounter.com/ can help you, through which you can view the browser usage in a certain region.

Check browser function

If you want to use some new features of HTML5, but some users’ browsers don’t support these features, and don’t worry, you can use modernizr, which is a small and continuously updated tool specially used to test the browser’s support for many HTML5 and related functions.

The method of use is as follows:

Go to the download page of modernizr as follows:

On this page, select the feature you want to detect (click + next to the corresponding feature), and then click build to get:

Then download the build result (modernizr-custom.js) and add it to your HTML document;


<head>  
    <meta charset="utf-8">  
    <title>title</title>  
    <script src="modernizr-custom.js"></script>  
    ...  
</head>  

In this way, after the page is loaded, the modernizr script can run. It can detect many new functions in a few milliseconds, and then create a JavaScript object called modernizr. The detection results are saved in this object. By detecting the properties of this object, you can determine what functions the browser supports. For example:


<body>  
    <p>The verdict is ...<span id="result"></span></p>  
    <script>  
        Modernizr.on('flash', function( result ) {  
            if (result) {  
               document.getElementById("result").innerHTML = "Rejoice! Your brower has flash.";  
            }  
        });  
    </script>  
</body>  

If your browser supports flash, the page will print “Rejoice! Your browser has flash.”. Please refer to the documentation of modernizr for more functions.

Basic structure of HTML document

”HTML document is the description of a document. It has a fixed structure and is divided into many parts. Each part contains one or more elements. Some elements are used to describe the basic information of the document, while others describe the structure of the document. Here is a basic HTML document structure:


<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8" />  
    <title>Your page title</title>  
</head>  
<body>  
  
  
</body>  
</html>  

The HTML document describes a blank page. These basic elements determine the outline of the HTML document and the initial environment of the browser.

DOCTYPE element

The DOCTYPE element can be omitted. Most browsers can still display the document content correctly, but it is not a good habit to rely on the browser. This element tells the browser two things:

1) it deals with HTML documents;

2) the version of HTML used to mark the content of the document. The above method indicates that HTML5 is used.

html element

The HTML element is the root element, which indicates the beginning of the HTML part of the document. The lang attribute specifies the default language for the page content, for example: en for English, ES for Spanish, and so on.

Head element

The head element contains the metadata of the document, provides information about the content and markup of the document to the browser, and can also contain scripts and references to external resources, such as CSS style sheets.

Body element

The body section of the document contains what visitors can see.

With this basic structure, we can add other elements of HTML gradually later, enrich documents continuously, and finally get the page we want.