Introduction to HTML5 semantic tags

HTML5 specifications include a series of new semantic elements used to provide the meaning of each area or part of a Web page, such as the header, footer, navigation, and so on. In previous versions of HTML, the <div> element is usually used to create these parts and the ID or class attribute is used to distinguish them. The problem is that this does not have any semantic meaning, because there is no strict rule to specify the class name or ID to be used, making it extremely difficult for the software to determine the operation in a specific region. HTML5 should help solve these problems, making it easier for Web browsers to analyze the semantic structure of documents.

It is worth noting that the use of the <div> element in HTML5 is still valid. However, to check your work in the future, we recommend that you use the semantic element in the relevant area. On the other hand, we recommend that you avoid using these new elements for purposes they should not be used. For example, the <nav> element should not be used in any link group. It is intended to wrap the main navigation block on the page.

The main semantic elements introduced by HTML 5 include:

• <Header>

This element defines the titles of some parts of a Web page. It can be an entire page, An <article> element, or a <section> element.

• <Footer>

Similar to the

• <Nav>

This is the container of the main navigation link on the Web page. This element should not be used for all link groups, but for main navigation blocks only. If you have a <footer> element that contains navigation links, you do not need to encapsulate these links in the <nav> element, because the <footer> element can include these links independently.

• <Article>

<Article> elements are used to define independent projects that can be independently distributed on a page, such as news projects, blogs, or comments. This type of project usually uses RSS feed for combination.

• <Section>

This element represents a part of a document or application, such as a chapter or section of an article or tutorial. For example, you can use the <section> element in html5. <Section> An element usually has a header, Though strictly speaking, it is not required. For example, the header of the section you are currently reading will contain the text "semantic element ".

• <Aside>

This new element can be used to mark the sidebar or something that will be considered unrelated to the content around it. An example of this item is the advertisement block.

• <Hgroup>

In some cases, a page, article, or area may require multiple titles. For example, you have a title and a subtitle. For example, this tutorial has the title "use HTML5 and CSS3 to create a modern Web site" and the subtitle "implement canvas and video elements in HTML5 ". You can encapsulate these headers in the

In addition, the <audio> and <video> elements are used to replace the current Web dependency on Flash as a multimedia delivery platform.

<Canvas> element

<Canvas> the element was originally created by Apple? Developed for Mac OS X Dashboard components and Safari, but later developed by Mozilla? And Opera? Used in their Web browsers. This element has been standardized and is included in HTML5 specifications with a series of 2D drawing APIs that can be used to create shapes, text, transitions, and animations within the element.

Many believe that the <canvas> element is one of the most important aspects of HTML5, because it can facilitate quick creation of charts, interactive games, drawing applications, and other graphics without external plug-ins such as Adobe Flash.

<Canvas> elements are very basic and define the width, height, and unique ID of an object. Then, developers must use a series of JavaScript APIs to actually draw objects on the canvas, usually after the Web page has been rendered. These APIs allow developers to draw shapes and lines, apply colors, opacity, and skew, convert canvas objects, and execute animations. These APIS also allow <canvas> to become interactive and respond to user input such as mouse and key operations, facilitating the creation of games and Web applications on the canvas.

Use <audio> and <video>

Over the past few years, the popularity of video sharing sites such as YouTube and content delivery platforms such as Hulu have demonstrated the huge growth of Web applications for Multimedia Streams. Unfortunately, the Web itself does not build such content. Therefore, the Video and audio configuration is basically achieved through the Flash Video (. flv) file format and the Adobe Flash Platform.

However, HTML5 supports two new elements: <audio> and <video>, so that Web developers can include multimedia content without relying on users to install additional browser plug-ins. If you choose to use these elements, multiple browsers (including Mozilla Firefox, Apple Safari, and Google Chrome) have begun to support these new elements and provide standard browser playback controls. In addition, if developers want to create their own playback controls, they have provided a set of standard JavaScript APIs to allow developers to do so. An important advantage of native multimedia playback control is that theoretically it requires less CPU resources to save energy.

However, an important issue with these new multimedia elements is the file formats supported by each browser and the various codec patent licenses that these files can be used to encode. Mozilla and Opera want to use the open source Theora video container and codec. They do not require a patent license to include codec in Web browsers. On the other hand, Apple and Google are not satisfied with Theora's quality, especially for delivering high-definition (HD) content, similar to YouTube. They prefer H.264 codec, which is usually included in MP4, MOV, or MKV files.

However, this issue exists not only in videos, but also in audio codec. The MP3 and AAC formats are patented, but the Vorbis format is not. Vorbis is not widely used because it is not supported by portable media players and many media software applications.

In the near future, many decisions will be made on HTML5 <video> and <audio>, and people will be very interested in understanding which codec and format will be promoted in the final suggestions. At the same time, you can try to support all browsers by making videos available in various formats and by providing Flash videos as the final choice. Let's hope we can make a final decision, instead of leaving it to the browser vendor to determine the format to be supported, which will basically indicate that these new elements are useless.