Simply sort out the basic features and syntax of HTML5

Time:2021-10-21

HTML5 overview
HTML5 is the next important version of HTML standard, which is used to replace HTML 4.01, XHTML 1.0 and XHTML 1.1. HTML5 is also a standard for building and presenting content on the world wide web.

HTML5 is a collaboration between the World Wide Web Consortium (W3C) and the web Hypertext Technology Working Group (whatwg).

This new standard adds features such as video playback and drag and drop. In the past, it relied on third-party browser plug-ins, such as Adobe Flash, Microsoft Silverlight and Google Gears.

Browser support
The latest versions of Apple Safari, Mozilla Firefox and opera support most HTML5 features, and IE9 also supports some HTML5 features.

Mobile browsers pre installed on iPhones, iPads and Android phones all have good support for HTML5.

New features
HTML5 introduces many new elements and attributes to help us build a modern website. The following are the main features introduced by HTML5:

New semantic elements: such as < header >, < footer > and < section >.

Form 2.0: improved HTML web forms and introduced some new attributes for < input > tags.

Persistent local storage: in order not to be implemented through third-party plug-ins.

Websocket: the next generation of two-way communication technology for web applications.

Server push events: HTML5 introduces events from web servers to web browsers, also known as server push events (SSE).

Canvas: supports two-dimensional drawing in a programmatic way with JavaScript.

Audio and video: embed audio or video in web pages without the help of third-party plug-ins.

Geolocation: users can choose to share their geographic location with our web page.

Microdata: allows us to create custom vocabularies outside HTML5 and extend web pages with custom semantics.

Drag and drop: drag and drop items on the same web page from one location to another.

Backward compatibility
HTML5 is designed to be backward compatible with existing browsers as much as possible. New features are built on existing features and allow us to provide alternative content for old browsers.

It is recommended to use a small amount of JavaScript code to detect the support of a single HTML5 feature.

HTML5 syntax

HTML5 has its own HTML syntax, which is compatible with HTML 4 and XHTML 1 documents already published on the web, but not the more complex SGML features in HTML 4.

HTML5 does not require lowercase tag names in XHTML, attributes must be quoted, attributes must have a value, and syntax rules that must close all empty elements.

However, HTML5 is more flexible and supports the following forms:

Label names are capitalized.
Property is optional.
The attribute value is optional.
Closed empty element optional.
DOCTYPE
In the old version of HTML, DOCTYPE is very long, because the HTML language is based on SGML and needs to reference a DTD.

HTML5 authors can use simple syntax to specify DOCTYPE in the following form:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html>  

The above syntax is case insensitive.

Character encoding
HTML5 authors can specify character encoding using simple syntax, as follows:

XML/HTML CodeCopy contents to clipboard
  1. <meta charset=“UTF-8”>  

The above syntax is case insensitive.

< script > label
A common practice is to add a type attribute with a value of “text / JavaScript” to a script element, as shown below:

XML/HTML CodeCopy contents to clipboard
  1. <script type=“text/javascript” src=“scriptfile.js”></script>  

In addition to the additional information required by HTML5, we can use a simple syntax as follows:

XML/HTML CodeCopy contents to clipboard
  1. <script src=“scriptfile.js”></script>  

< link > label
So far, we have written < link >:

XML/HTML CodeCopy contents to clipboard
  1. <link rel=“stylesheet” type=“text/css” href=“stylefile.css”>  

In addition to the additional information required by HTML5, we can use a simple syntax as follows:

XML/HTML CodeCopy contents to clipboard
  1. <link rel=“stylesheet” href=“stylefile.css”>  

HTML5 element
HTML5 elements are marked with start tags and end tags. Tags are qualified with tag names between angle brackets.

The difference between the start tag and the end tag is that the latter contains a slash in front of the tag name.

Here is an example of an HTML5 element:

XML/HTML CodeCopy contents to clipboard
  1. <p></p>  

HTML5 standard signatures are case insensitive and can be all uppercase or mixed, although the most common convention is to always use lowercase.

Most elements contain some content, such as < p >… < / P > contains a paragraph. However, some elements cannot contain any content. They are called blank elements. For example, Br, HR, link, meta and so on.

HTML5 document
In order to get a better structure, the following labels are introduced:

Section: this label represents a general document or application section. It can be used with h1-h6 to represent the document structure.

Article: this tag represents a separate block of document content, such as blog entries or newspaper articles.

Aside: this label represents a block of content that is slightly related to the rest of the page.

Header: this label represents the header of a section.

Footer: this label represents the footnote of a section, which can contain author, copyright and other information.

NAV: this label represents the section used to navigate the document.

Dialog: this tag can be used to mark the session.

Figure: this tag can be used to associate the title with some embedded content, such as charts and videos.
The tag of an HTML5 document looks like this:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <meta charset=“utf-8”>  
  5.    <title></title>  
  6. </head>  
  7. <body>  
  8.   <header></header>  
  9.   <nav></nav>  
  10.   <article>  
  11.     <section>  
  12.       …   
  13.     </section>  
  14.   </article>  
  15.   <aside></aside>  
  16.   <footer></footer>  
  17. </body>