The difference between H5 and traditional HTML-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

The difference between H5 and traditional HTML

Y2J

May 23, 2017 pm 01:36 PM

htmlhtml5

This article mainly introduces the relevant information about the difference between HTML5 and traditional HTML in HTML5 study notes. Friends in need can refer to 1. 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...
二.New structural 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 the navigation link 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 definition Audio , such as music or other audio streams;
•embed element is used to insert various multimedia, 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 in search results;
•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
•canvas elements represent graphics, such as charts and other images
•cammand elements represent commands Button, such as radio button, checkbox or 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:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>form属性</title> 
</head> 
<body> 
<form action="" id="testform"> 
<input type="text" name="" /> 
</form> 
<textarea form="testform" name="" cols="30" rows="10"></textarea> 
</body> 
</html>

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!

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

Mastering Microdata: A Step-by-Step Guide for HTML5May 14, 2025 am 12:07 AM

MicrodatainHTML5enhancesSEOanduserexperiencebyprovidingstructureddatatosearchengines.1)Useitemscope,itemtype,anditempropattributestomarkupcontentlikeproductsorevents.2)TestmicrodatawithtoolslikeGoogle'sStructuredDataTestingTool.3)ConsiderusingJSON-LD

What's New in HTML5 Forms? Exploring the New Input TypesMay 13, 2025 pm 03:45 PM

HTML5introducesnewinputtypesthatenhanceuserexperience,simplifydevelopment,andimproveaccessibility.1)automaticallyvalidatesemailformat.2)optimizesformobilewithanumerickeypad.3)andsimplifydateandtimeinputs,reducingtheneedforcustomsolutions.

Understanding H5: The Meaning and SignificanceMay 11, 2025 am 12:19 AM

H5 is HTML5, the fifth version of HTML. HTML5 improves the expressiveness and interactivity of web pages, introduces new features such as semantic tags, multimedia support, offline storage and Canvas drawing, and promotes the development of Web technology.

H5: Accessibility and Web Standards ComplianceMay 10, 2025 am 12:21 AM

Accessibility and compliance with network standards are essential to the website. 1) Accessibility ensures that all users have equal access to the website, 2) Network standards follow to improve accessibility and consistency of the website, 3) Accessibility requires the use of semantic HTML, keyboard navigation, color contrast and alternative text, 4) Following these principles is not only a moral and legal requirement, but also amplifying user base.

What is the H5 tag in HTML?May 09, 2025 am 12:11 AM

The H5 tag in HTML is a fifth-level title that is used to tag smaller titles or sub-titles. 1) The H5 tag helps refine content hierarchy and improve readability and SEO. 2) Combined with CSS, you can customize the style to enhance the visual effect. 3) Use H5 tags reasonably to avoid abuse and ensure the logical content structure.

H5 Code: A Beginner's Guide to Web StructureMay 08, 2025 am 12:15 AM

The methods of building a website in HTML5 include: 1. Use semantic tags to define the web page structure, such as, , etc.; 2. Embed multimedia content, use and tags; 3. Apply advanced functions such as form verification and local storage. Through these steps, you can create a modern web page with clear structure and rich features.

H5 Code Structure: Organizing Content for ReadabilityMay 07, 2025 am 12:06 AM

A reasonable H5 code structure allows the page to stand out among a lot of content. 1) Use semantic labels such as, etc. to organize content to make the structure clear. 2) Control the rendering effect of pages on different devices through CSS layout such as Flexbox or Grid. 3) Implement responsive design to ensure that the page adapts to different screen sizes.

H5 vs. Older HTML Versions: A ComparisonMay 06, 2025 am 12:09 AM

The main differences between HTML5 (H5) and older versions of HTML include: 1) H5 introduces semantic tags, 2) supports multimedia content, and 3) provides offline storage functions. H5 enhances the functionality and expressiveness of web pages through new tags and APIs, such as and tags, improving user experience and SEO effects, but need to pay attention to compatibility issues.

See all articles