Changes in the Web era and the difference between html5 and html4

HTML5 is the next version of the HTML standard. More and more programmers are starting to build websites in HTML5. If you use both HTML4 and HTML5, you will find that building from scratch with HTML5 is much more convenient than migrating from HTML4 to HTML5. Although HTML5 does not completely subvert HTML4, they still have many similarities, but they also have some key differences in HTML5 being the next version of the HTML standard. More and more programmers are starting to build websites in HTML5. If you use both HTML4 and HTML5, you will find that building from scratch with HTML5 is much more convenient than migrating from HTML4 to HTML5. Although HTML5 does not completely subvert HTML4, they still have many similarities, but they also have some key differences. Next, let’s learn the difference between html5 and html4 through this article

New structure tags for HTML5

In the previous HTML pages, everyone basically used the Div+CSS layout method. When search engines crawl the content of the page, they can only guess that the content in one of your Div is an article content container, a navigation module container, or a container introduced by the author, etc. In other words, the entire HTML document structure is not clear. In order to solve this problem, HTML5 specially added structural element tags related to structure such as header, footer, navigation, article content, etc.

Before talking about these new tags, let’s first look at the layout of an ordinary page:

In the above picture, we can see very clearly that an ordinary page will have header, navigation, article content, attached right bar, bottom and other modules. We distinguish it through class and process it through different css styles. But relatively speaking, class is not a common standard specification. Search engines can only guess the functions of a certain part. In addition, if this page program is handed over to people with visual impairment to read, the document structure and content will not be very clear. The new layout brought by the new HTML5 tag is the following situation:

The standards of the previous generation of HTML: HTML 4.01 and XHTML 1.0 have been released more than 10 years ago today, and the applications on the web side have also changed drastically. Moreover, there is no unified and common Internet standard on the web front-end, and there are too many incompatibility between browsers, which wastes too much time maintaining compatibility of these browsers. Another thing is that previous multimedia operations, animations, etc. all require the support of third-party plug-ins, which creates the problem of compatibility of multiple platforms. All of this will become a standard in HTML5, which fundamentally solves the differences in browsers and the problems of some third-party plug-ins, making web applications more standard, more versatile, and more device-independent.

Since h5 officially came out in 2010, it has been welcomed and supported by major browsers. At present, the industry is moving towards h5, and the era of h5 is coming soon.

HTML5 is not a revolutionary change, but a developmental one. Moreover, many of the previous HTML4 standards were compatible, and all web applications made through the latest HTML5 standards can also be easily run on old browsers. The HTML5 standard does integrate many practical functions such as audio and video, local storage, Socket communication, animation, etc., which were all considered and upgraded in previous application development. I believe that if you have relevant experience, you will be very touched.

The goal of HTML5 is: it provides standards for developing simpler, independent, and standard general web applications through some new tags and new features.

The new standard solves three major problems: browser compatibility issues, solves the problem of unclear document structure, and solves problems such as limited functions of web applications.

1. Some outdated HTML4 tags were canceled

These include markers that display purely effects, such as <font> and <center>, which have been completely replaced by CSS.

Other canceled properties: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt.

2. Added some new elements

For example: smarter form tags: date, email, url, etc.; more reasonable tags: section, video, progress, nav, meter, time, aside, canvas, etc.

3. New global attribute: contentEditable designMode hidden spellcheck tabindex

4. Markup method: There is only one type of file type declaration (<!DOCTYPE>): <!DOCTYPE HTML>.

Specify character encoding <meta charset=UTF-8>

5. New JS API

6. Ensure compatibility

Tag elements can be omitted

End marks are not allowed: such as area base br

The end mark can be omitted: such as li dt

All tags can be omitted: such as html head