search

Home >Web Front-end >H5 Tutorial >Summary of the main changes and improvements in HTML5 compared to HTML4

Summary of the main changes and improvements in HTML5 compared to HTML4

黄舟
黄舟Original
2017-02-20 13:56:042113browse

I have been very busy helping teachers with projects during this period. I often didn’t go to class and just stayed in the laboratory. I didn’t have much time to read other things. I was assigned the front-end page design in the project. Sometimes when I browse the web, I see that mobile APPs and html5 are quite popular recently. With the rapid development of the mobile Internet, especially the 4G era has arrived, and Microsoft has implemented it in win10 The new browser edge has replaced IE, so now many websites are beginning to abandon IE and move towards html5. This is a trend, especially on mobile web pages, while on the PC side, there is still a gap between different browsers. There are some compatibility issues that need to be resolved urgently, but in the near future, html5 will become the dominant browser markup language.

What is html5?
html5 is a hypertext markup language first named by WHATWG (Web Hypertext Application Technology Working Group), and then combined with xhtml2.0 (standard) organized by W3C to produce the latest generation of hypertext. Markup language. It can be simply understood as: HTML 5 ≈ HTML+CSS 3+javascript+API

The static web pages we currently develop on the web front-end are generally html4.01. It also complies with W3C specifications. So what are the substantial differences between the two?

1. On the document type declaration
　html:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

    　　<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">



　html5:

XML/HTML Code复制内容到剪贴板
    
    
        <!DOCTYPE html>




It can be seen from the comparison between the two: In the document declaration, html4 has a long section of code, and it is difficult to remember this code. I think many people Is it generated directly by tools? But html5 is different. There are only simple declarations, which is also convenient for people to remember.


2. Set the page character encoding
In HTML5, you can specify the character encoding by directly appending the charset attribute to the element, as shown below:

​ 

html:<meta charset= “UTF-8 ”>
    　　html5:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Starting from HTML5, it is recommended to use UTF-8 for the character encoding of files.

3. In terms of structural semantics
 HTML: There is no tag that reflects structural semantics. We usually name it like this: p id="header". This represents the website head.

html5: It has great advantages in semantics. Some new tags are provided, such as: header, article, footer

What are the benefits of providing such tags? I think the most important thing is SEO optimization, whether we name the web page modules ourselves or have such labels. Because the ultimate goal of building a website is only one, and that is to make money. If you want to make a profit, you can only improve your website ranking through SEO optimization technology, so that your website will be valuable. It is precisely this point that html5 meets. Why do you say that? Because the tags he defined are more conducive to optimization and spiders can identify you.

4. Other new contents
New input types include: number (number), date (date), color (color), range (range), etc.

New inline elements include time, meter and progress.

The new embedded elements are video and audio. New interactive elements are details, datagrid and command.

5. tag replaces Flash
Flash has brought trouble to many web developers. Playing Flash on a web page requires a bunch of code and plug-ins. The tag allows developers to interact with users through UI using only one tag. Although the tag cannot yet implement all the functions of Flash, soon will make Flash look old-fashioned, haha!

6. Obsolete elements
Elements that can be replaced by CSS: For basefont, big, font, s, tt, u, these elements, because their functions are pure Screen display service, and HTML5 advocates putting the screen display functions in CSS styles for unified editing, so these elements are abolished.

Frame is no longer used: Due to the negative impact of frame on web page usability, html5 does not support frame, only iframe, or a composite page composed of multiple pages created by the server.

Only elements supported by some browsers: applet, bgsound, blink, marquee and other elements. bgsound and marquee are only supported by ie and are abolished by html5. The applet element can be replaced by an embed element or an object element, the bgsound element can be replaced by an audio element, and the marquee can be replaced by JavaScript programming.

Summary: Although html5 has come out in the past few years, it was not popular at that time because it was not mature enough and the timing was not right. At this time when the Internet is developing rapidly, the era of 4G is also coming. If we don’t learn hml5+css3, we will be out!

The above is a summary of the main changes and improvements in HTML5 compared to HTML4. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A brief discussion on h5 custom audio (problems and solutions)Next article：A brief discussion on h5 custom audio (problems and solutions)

Related articles

See more