Home > Developer > Web Develop

HTML5: Introduction and document basic structure

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML (hypertext Markup Language, Hypertext Markup Language) was born in the early 1990s to specify the elements of a Web page, most of which are used to describe web page content, such as headings, paragraphs, lists, links to other web pages, and so on. HTML5 is the latest version of HTML, and most of its content is compatible with new and old browsers, and adds a lot of new features. The HTML5 also introduces native audio and video playback capabilities.
The latest specifications for HTML can be viewed through the following URLs:
1) html5:http://www.w3.org/tr/html5/

2) html5.1:http://www.w3.org/tr/html51/

HTML5 Introduction
HTML5 is actually a series of related technologies used to make modern, rich Web content, the most important of which is the HTML5 core specification, CSS (cascading style Sheets, cascading style sheets), and JavaScript.
1) The HTML5 Core specification defines the element that is used to mark the content and clarifies its meaning.
2) CSS is used to control the appearance of tagged content in front of the user.
3) JavaScript is used to manipulate the contents of HTML documents and respond to user actions.
At the same time HTML5 introduced native multimedia support and introduced programmable content (canvas elements, JavaScript required) and Semantic Web.
If you want to learn more about the history of HTML5, you can refer to Wikipedia.
Browser support for HTML5
Browser function Verification
The ability of the HTML5 to be used depends on whether the browser supports it, there are many browsers, there are many versions of each browser, and as a web developer it is difficult to fully test whether a particular version of each browser supports a feature. However, there is a website http://caniuse.com/can help you, this website detailed list each mainstream browser to HTML5 support situation.
Usage status of the browser
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 of a particular region.
Detecting Browser Capabilities
If you want to use some of the new features of HTML5, but some users ' browsers do not support these features, do not worry, you can use Modernizr, it is a small, continuously updated tool, specifically to test the browser for many HTML5 and related features of the support situation.
Here's how to use it:
to Modernizr's download page, as follows:
Select the feature you want to probe on this page (click the + next to the corresponding feature), then click Build when you are finished, and you will get:

Then download the resulting build (modernizr-custom.js) and add it to your HTML document; 
Thus, after the page is loaded, the Modernizr script can run, it detects many new features in milliseconds, and then creates a JavaScript object called Modernizr, which is stored in the object. By detecting the properties of this object, you can determine what features 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 Brower has flash. ". For more Modernizr features, refer to the MODERNIZR documentation. HTML Document BASIC structure
An HTML document is a description of a document, with a fixed structure, divided into sections, each containing one or more elements. Some elements are used to describe the basic information of a document, some describe the structure of a document, and the following is the structure of a basic HTML document:
<! DOCTYPE html>
The HTML document describes a blank page that determines the outline of the HTML document and the initial environment of the browser.
DOCTYPE elements
DOCTYPE elements can be omitted, most browsers still display the contents of the document correctly, but relying on the browser's performance is not a good habit. This element tells the browser two things:
1) It deals with HTML documents;
2) The version of HTML that is used to mark the contents of the document indicates that the HTML5 is used.
HTML elements
An HTML element is the root element that indicates the beginning of the HTML part of the document. The Lang property specifies the default language for page content, for example: En for English, es for Spanish, and so on.
Head element
The head element contains the metadata for the document, provides information about the document's content and markup to the browser, and can contain references to scripts and external resources such as CSS style sheets.
BODY element
The body section of the document contains what visitors can see.

With this basic structure in place, we can add the other elements of HTML incrementally, constantly enrich the document, and finally get the page we want.
HTML5: Introduction and document basic structure

                

                    
This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or
reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or
complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

                

            


                                                                    

        

            

                

                                        

                        

                    

                

                

    

                    
Contact Us

            
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
                products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
                content of the page makes you feel confusing, please write us an email, we will handle the problem
                within 5 days after receiving your email.

            

                If you find any instances of plagiarism from the community, please send an email to:
                info-contact@alibabacloud.com
                and provide relevant evidence. A staff member will contact you within 5 working days.
            

            



                

                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •