The difference between H5 and traditional HTML

This article mainly introduces the relevant information about the difference between HTML5 and traditional HTML in HTML5 study notes. Friends in need can refer to1. Changes in HTML5 syntax
The The changes mentioned in the knowledge points refer to the changes defined based on HTML4, which are mainly as follows:
1. The file extension (.html or .htm) and content type (text/html) of HTML5 remain unchanged.
2. In HTML5, version declarations are deliberately not used, and one document will apply to all versions of HTML.
3. Starting from HTML5, it is recommended to use UTF-8 for the character encoding of files.
4.HTML5 ensures maximum compatibility with previous HTML versions.
In order to ensure compatibility, we need to start with the element. In HTML5., the mark of the element can be omitted. Specifically, the tags of elements are divided into three types: "the end tag is not allowed to be written", "the end tag can be omitted" and "the start tag and the end tag can be omitted".
• End tag elements are not allowed to be written: area, base, br, col....
• End tags can be omitted: li, dt, dd, p, rt...
• Both the start tag and the end tag can be omitted: html,head, body...
二.Newstructural elements
•The section element represents a content block in the page, such as a chapter, header, footer or other part of the page;
•The article element represents a block of the page that is not relevant to the context Independent content, such as an article in a blog or an article in a newspaper;
•aside element represents auxiliary information related to the content of the article element in addition to the content of the article element;
•header element Represents the title of a content block in the page or the entire page;
•hgroup element is used to combine the titles of the entire page or a content block in the page;
•footer element represents the entire page or a piece of content in the page Block footer. Generally speaking, it will contain the name of the creator, the date of creation, and the creator's contact information;
•nav element represents thenavigationlink part of the page;
•figure element represents an independent paragraph Stream content generally represents an independent unit in the main stream content of the document. Use the figcaption element to add a title to the figure element group
2. Other new elements
•audio element definitionAudio, such as music or other audio streams;
•embed element is used to insert variousmultimedia, the format can be Midi, Wav, AU, MP3, etc.;
•mark element To visually present text that needs to be highlighted or highlighted to users, a typical application is to highlight search keywords to users insearchresults;
•progress element represents The running process
•ruby element represents rubycomment(Chinese phonetic or character)
•rt element represents the interpretation or pronunciation of the character (Chinese phonetic or character)
•rp element in Used in ruby annotations to define content displayed by browsers that do not support ruby elements.
•The wbr element represents soft line breaks, and when the width is not enough, line breaks are automatically performed here
•canvaselements represent graphics, such as charts and other images
•cammand elements represent commandsButton, such asradio button,checkboxor button
•the details element represents the detailed information that the user requires and can get
• The datagrid element represents a list of optional data, which is displayed in the form of a tree list
•keyThe gen element represents the generated key
•The output element represents different types of output, such as scripts Output
•The source element defines media resources for media elements (such as

The code is as follows:

The input element belongs to the form. It is written inside the form, and there is no need to set the form attribute for it. The textarea element is written outside the form, but it is subordinate to the form, so the id of the form is set to the form attribute of the textarea element.
The advantage of this is that when you need to add styles to the elements on the page, you can add them more conveniently, because they are no longer scattered among the forms.

【Related Recommendations】

1.HTML5 Free Video Tutorial

2.The input box appears when making a virtual keyboard in H5 What to do if there is occlusion?

3.Detailed explanation of the method of implementing full-screen playback on WeChat in HTML5

4.Detailed explanation of browser compatibility issues with H5 new tags

5.Overall overview of how to use H5 to create web pages

The above is the detailed content of The difference between H5 and traditional HTML. For more information, please follow other related articles on the PHP Chinese website!