【Popular Science Popularization】Understanding H5 from scratch in 10s

Have you noticed recently that the dynamic content of many WeChat public accounts has increased? We can often see that there are many dynamic pictures and even animations in the content of the official account, and you can switch pages by swiping your fingers, or have some small click interactions.

This kind of small work that looks a bit advanced is actually an "interactive multimedia advertising page", which is the mobile web page of H5.

What is H5

H5 is actually an abbreviation. What we generally call H5 actually refers to HTML5, the fifth-generation hypertext markup language. The Hypertext Markup Language HTML is a markup language. It includes a series of tags, through which the document format on the network can be unified, and the scattered Internet resources can be connected into a logical whole. It should be noted that HTML is not a programming language, so HTML is extremely easy to get started with. So why didn't HTML appear so hot until the 5th generation?

Because in the past, web pages were mainly accessed on computers, and now the devices for accessing web pages have gradually shifted from computers to mobile devices. However, if the original webpage is viewed on a mobile phone, it is difficult to see the content clearly, which has promoted the emergence of HTML5.

And HTML5 lived up to expectations, with some new features to almost perfectly meet the needs of a variety of devices.

Features of HTML5

Semantic Tag

Semantics refers to the correct interpretation of the meaning of a word or sentence. HTML semantics allows us to see the general structure of a page only through HTML elements. The new semantic elements of HTML5 allow us to judge the content of the tag by the tag name. These elements are:

• The <header> tag is usually placed at the top of the page or a certain area of the page to set the header;
• The <nav> tag can be used to define a collection of navigation links, and clicking on a link can jump to other pages;
• The content in the <article> tag is relatively independent, it can be a news report, a blog, it can be read independently of other content on the page;
• The <section> tag represents an area in the page, which usually blocks the page or segments the content. The <section> tag and the <article> tag can be nested in each other;
• The <aside> tag is used to indicate content other than the main content of the page, such as a sidebar;
• The <footer> tag is located at the bottom of the page or a certain area of the page and is used to set the footer, usually containing copyright information, contact information, etc.

Enhanced Form

The functions of the previous HTML version, such as date, color, text box, etc., need to be supported by separate controls. In HTML5, these common functions are directly entered into the form tag. For example, you can directly control the color through <color>.

In addition, HTML also adds new form attributes:

• placeholder provides a hint value for the input field
• required specifies whether the input field is required before the form is submitted
• pattern specifies the regular expression used to validate the input field
• min specifies the minimum value allowed for the input field
• max specifies the maximum value allowed by the input field
• multiple input field can select multiple values, applicable to email and file types

DOM extension

HTML5 has made some special extensions for the DOM, including the classList attribute, focus management, HTMLDocument changes, character set attributes, insertion tags, getElementByClassName() methods, etc. Of these, the getElementByClassName() method is the most popular and allows adding event handlers beyond just using IDs or tag names (getElementsByTagName).

Media element

HTML5 adds two new media-related tags <audio> and <video>, which allow developers to embed cross-browser audio and video content in web pages without relying on plugins. <audio> and <video> also include new attributes such as autoplay, controls, and src, allowing developers to write custom audio and video players with little HTML and JavaScript.

Web Storage

Web Storage has two main goals:

• Provides a way to store session data outside of cookies
• Provides a mechanism for storing large amounts of data that can exist across sessions

Two commonly used objects are:

• localStorage: The object stores data for a specific session, which persists only until the browser is closed.
• sessionStorage: The purpose is to store objects across sessions, but with specific access restrictions that vary by browser.

WebSockets

HTML5 supports WebSockets. WebSockets can allow duplex, two-way communication to persist on a single connection. The WebSocket protocol better saves server resources and bandwidth, and enables more real-time communication. But this requires a dedicated server that supports this protocol. Of course, we can also choose to use cloud services to solve it. For details, see "Talking about WebSocket, and HTTP"

The pros and cons of

If any feature alone may not directly appreciate its advantages, let's take a straightforward look at how many advantages these features add to HTML5 over previous versions:

• Improved user experience and improved usability: These features allow the site to incorporate more multimedia elements and use audio and video more widely. At the same time it replaces FLASH and Silverlight
• For websites: SEO is more friendly to crawling and indexing, making it easier for users to find websites.
• Improved portability: This allows a large number of applications and games to be accessed using mobile phones instead of being confined to the PC side.
• Save development costs: fully present the concept of "responsive design", as long as you use a set of codes, you can adapt to any device, any system, and any resolution.

But as a brand new version, HTML5 has the same pain points as new things. The most important thing is that it cannot be supported by all browsers, such as IE. The current browsers below IE9 are not compatible with HTML5.

But at the moment when mobile devices are becoming more and more popular and their functions are becoming more and more powerful. It’s only a matter of time before HTML5 takes over the entire market. You see HTML5 is starting to appear in WeChat public accounts, right?

Recommended reading

Network Security (a): common network threats and prevention

Attack on Ansible (2): How to quickly get the Ansible project layout in the production environment?