New Structured tags introduced by HTML5

What is HTML5?

HTML5 is the latest version of Hypertext Markup Language (HTML) and the most radical version so far. This article introduces many new features in various fields. Some notable new features:

Develop this skill

This is part of a progressive learning roadmap that helps you improve your skills. Refer to basic HTML5 knowledge

• Built-in multimedia tags for audio and video
• Canvas label used to draw content in the browser
• Flexible Forms allow you to perform operations such as authentication by using necessary attributes.

HTML5 uses a new set of structured tags to improve the HTML document construction method. The new tag focuses on how to divide an HTML document into several logical parts. The tag name describes the content types contained in the plan. In this article, we will learn more about these new tags.

Background Knowledge

Tim Berners-Lee created HTML in 1989 and used it to solve some defects of existing methods for accessing information on the Internet. It is a difficult task to find a suitable method on the Internet since HTML is created. Content on the Internet is considered as a personal document and there is no easy way to navigate between them. In essence, you must know the address of the document you want to search for, and then manually enter the address. To solve this problem, Berners-Lee created two technologies: Hypertext Transfer Protocol (HTTP) and HTML.

HTTP is the service protocol used by the Web server to deliver content. In a Web browser (assuming the browser displays the complete URL), the URL usually starts with http. This part of the URL tells the protocol type used by the browser to send a request to the Web server. When the Web server receives a document request, it can write or convert the document to HTML. Then, send the HTML document back to the browser that sends the request.

HTML is a scripting language that tells the Web browser how to render content. Links to other documents may also appear in this content and provide a user-friendly way to navigate between files on the Internet.

The combination of HTTP and HTML provides easy navigation for content on the Internet. You only need to click a text link to navigate between documents. After creating these two technologies, Berners-Lee then created the World Wide Web Consortium (W3C ). W3C is the guiding force of the first four versions of HTML.

The original intention of Internet is to provide simple text documents. The earliest browsers were all text-based (without beautiful windows, there was only text on the screen ). Adding images was a great thing when we first introduced images. Now, people can do anything on the Internet, from sending emails to watching TV programs. The Internet is no longer a mechanism for transmitting simple text. New Features and new usage bring unprecedented challenges and problems for the HTML language.

W3C tries to solve the current Internet problem using the Extensible Hypertext Markup Language (XHTML) 2.0 standard. However, this standard is not recognized by users, and most of them are discarded. In 2004, with W3C's attention to the XHMTL 2.0 standard, a team called the Web hypertext Application Technology Workgroup (WHATWG) began to develop the HTML5 standard, which is more popular than XHMTL 2.0. Therefore, W3C gave up XHTML 2.0 and began to work with WHATWG to develop HTML5.

Supported browsers

At the time of writing this article, html5. Most of the content on the Web is still written according to the HTML4 specification. Although some browsers provide HTML5 standard support, Each browser can only support some HTML5 features, which makes things quite tricky. Before writing an HTML5-based website, check the target browsers to ensure that they support the features you will use for your website.

Back to Top

New Document Type

No matter what features the target browser supports, you must inform the browser that you want to use HTML5 specifications to present your content. You can use the document type declaration to achieve this purpose.

The document type declaration tells the browser which version of the markup language is used to compile the page. This can be achieved by referencing a Document Type Definition (DTD. The DTD specifies the rules used by the markup language, so that the browser can correctly render the content.

Document types may be confusing. There are many document type definitions in the current HTML specification, and the differences between them are not very clear. Table 1 shows the currently available document types and their functions.

Table 1. document types and functions

Document Type	Function	Example
HTML 4.01 strict	All HTML elements and attributes are supported, but representation labels, such as font labels, are not supported. The framework set is not supported.	<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 transitional	It is the same as HTML strict, but supports the use of obsolete elements, such as font labels. The framework set is not supported.	<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 frameset	It is the same as HTML transitional, but supports the framework set.	<! Doctype html public "-// W3C // dtd html 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 strict	It is the same as HTML strict, but must be able to write all the content into well-formed XML. For example, all start tags must have corresponding end tags. The framework set is not supported.	<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 transitional	It is the same as HTML transitional, but it must be able to write all the content into well-formatted XML. The framework set is not supported.	<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 frameset	It is the same as XHTML transitional, but supports the framework set.	<DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Frameset // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1, 1.1	Like XHTML strict, but supports module functions. For example, Ruby supports the East Asian language.	<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Fortunately, document type declarations are greatly simplified in HTML5. In fact, there is only one document type in HTML5. If you want to use HTML5 to display your browser, add the document type shown in Listing 1.

Listing 1. HTML5 Document Type

<!DOCTYPE html>

The document type declaration should be the first part of the HTML document and should be placed inThe front of the tag.

Back to Top

New Structure Element

The basic principle for creating a new structured tag is to divide a Web page into logical parts using tags that describe the content types contained in the page. In terms of concept, a Web page can be regarded as a document. The document contains the header, footer, chapter, and other conventions that divide the document into logical parts.

This section describes how to use common sample code to divide HTML documents. Later in this article, we will use the new structured tag introduced by HTML5 to revise the original code and learn how to gradually convert the document into a logical part.

HTML 4 Method

If you have created HTML documents (even the simplest ),divHave some knowledge about labels.divTags are the main mechanism in the era before html5. they are used to create content blocks in HTML documents. For example, listing 2 shows how to usedivCreate a simple page that only contains the header, content area, and footer.

List 2. UsedivSimple HTML page for tag Creation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Running well;divA label is a good generic label. HoweverdivLabelidIn addition to attributes, it is difficult to understand eachdivTag indicates the part of the document. Although you may think that, as long as the name is reasonable,idEnough to be an indicator,idAttributes are arbitrary. Many variants are considered equally valid.id. The tag itself does not specify the content type. It is only responsible for display.

HTML5 Method

HTML5 provides a set of tags to solve this problem. These tags can clearly define the main content blocks that constitute an HTML document. No matter how the Web page displays the content, most Web pages are composed of different combinations of common pages and elements.

Listing 2 HTML5 contains tags that can break down a document into common parts and indicate the content contained in each part. New logo signatures include:

• header
• section
• article
• aside
• footer
• nav

The rest of this article will briefly introduce each label. You can also modify the originaldivSample Code to understand the intended use of these tags, so as to learn how to use the new structured tags introduced by html5.

Back to Top

headerTag

As the name suggests,headerTags are used to mark a part of an HTML page as a header. Listing 3 shows the sample code in Listing 2. You can modify this example to useheaderLabel.

Listing 3. AddheaderTag

<!DOCTYPE html> <div id='content'>Content</div> <div id='footer'>Footer</div> </body>

The document type in listing 3 has also been changed, indicating that the browser should use HTML5 to display the page. From now on, all examples assume that you use the correct document type.

Back to Top

sectionTag

sectionLabels are used to identify important content on a page. This label is similar to dividing a book into several chapters. SetsectionAdd the tag to the sample code result in Listing 4.

Listing 4. AddsectionTag

<!DOCTYPE html> <section> <p> This is an important section of the page. </p> </section> <div id='footer'>Footer</div> </body>

Back to Top

articleTag

articleThe tag identifies the main content on the Web page. Taking a blog as an example, each post forms an important content. SetarticleAdd the tag to the sample code result in listing 5.

Listing 5. AddarticleTag

<!DOCTYPE html> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> </article> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> </article> </section> <div id='footer'>Footer</div> </body>

Back to Top

asideTag

asideThe tag indicates that the content contained in the tag is related to the main content of the page, but is not part of the page. This is a bit similar to commenting on the body using arc (just like this ). The content in Arc provides additional information about the element. SetasideAdd the tag to the sample code result in Listing 6.

Listing 6. AddasideTag

<!DOCTYPE html> <aside> <p> This is an aside for the first blog post. </p> </aside> </article> <article> <p> This is an important section of content on the page. Perhaps a blog post. </p> </article> </section> <div id='footer'>Footer</div> </body>

Back to Top

footerTag

footerLabel marks the content of the contained elements as the footer of the document. SetfooterAdd the tag to the sample code result in listing 7.

Listing 7. AddfooterTag

<!DOCTYPE html> <footer>Footer</footer> </body>

At this time, all the originaldivAll tags have been replaced by HTML5 structured tags.

Back to Top

navTag

navThe tag content is mainly used for navigation. SetnavAdd the tag to the sample code result in listing 8.

Listing 8. AddnavTag

<!DOCTYPE html> <nav> <a href='#'>Some Nav Link</a> <a href='#'>Some Other Nav Link</a> <a href='#'>A Third Nav Link</a> </nav>

Back to Top

Example of completion

Listing 9 shows how to replace the original with a new HTML5 structured tagdivThe result of the tag.

Listing 9. Example of completion

<!DOCTYPE html>

Although this example is relatively simple (for demonstration ),divWhen comparing the original example with the result in listing 9, you should have a clear understanding of the purpose of the new structured tag.

Back to Top

Conclusion

The new tags introduced by HTML5 describe the types of the content they contain and help to divide the document into several logical parts. It is up to you to decide when and where to use these new tags in the document, just as the author determines when and where to write a book. Although the two authors of the same book may choose to use different methods to segment the book, the use of this line is still consistent. Similarly, the two authors of a given Web page may choose to use different structures. The new structured tags introduced by HTML5 provide new conventions. Web page developers can use the olddivThe tag does not provide the function.

References

Learning

• "New Elements in HTML5" (developerWorks, August 2007): learn more about HTML5 structures.



• WHATWG: explores the WHATWG community, which is responsible for compiling HTML5 specifications.



• W3C: learn more about W3C. This community has created the original HTML specification and is currently working with WHATWG to develop the HTML5 specification.



• HTML5 (Wikipedia): learn more about HTML 5.



• HTML5 differences from HTML4 (W3C): Further understanding of the differences between HTML4 and html5.



• "HTML5 First Look" (lynda.com): explores what HTML5 is (not ).



• DeveloperWorks Web Development Area: find articles on various Web-based solutions.