Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the new main structural elements of html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Article element

Article tags are documents and pages semantically. Usage: usually an article, a page, an independent and complete content. The emphasis is on independence. Article can be nested within each other and usually have header tags, which can be seen as special section elements (explained later). High frequency of use, the code is as follows:

< !DOCTYPE HTML>

< html>

< body>

< article>

< header>

< h2>

Apple tutorial

< /h2>

< p>

Time:

< time pubdate="pubdate">

2020-2-1

< /time>

< /p>

< /header>

< p>

Easy to learn apple tutorials, come right away

< /p>

< a href="http://www.apple.com">

Www.apple.com

< /a>

< br />

< p>

< small>

Copyright information at the bottom: all owned by apple.com

< /small>

< /p>

< /footer>

< /article>

< /body>

< /html>

Section element

Section element semantics is partial, usage: used for a section of content on a page, such as a paragraph of an article, usually made up of title and content, and section is not recommended for parts without a title. Section can nest article elements because article is more independent. The frequency of use is low, and the emphasis is on segmentation and blocking. The code is as follows:

< !DOCTYPE HTML>

< html>

< body>

< section>

< h3>

How to use section element

< /h3>

< p>

The section element is used to block content on pages in a Web site or application.

< /p>

< /section>

< /body>

< /html>

Note: div is recommended when a container needs to be defined by a style or behavior on the back of the foot. Do not use section.

Nav element

Nav element semantics for navigation, usage: generally as a part of page navigation, high frequency of use. The code is as follows:

< html>

< body>

< nav>

< ul>

< li>

< a href="">

Menu 1

< /a>

< /li>

< li>

< a href="">

Menu 2

< /a>

< /li>

< li>

< a href="">

Menu 3

< /a>

< /li>

< /ul>

< /nav>

< /body>

< /html>

Aside element

The semantics of aside elements are side, side, and usage: when used in article tags, they are used as subsidiary information parts of the main content, such as relevant references, noun explanations, etc. When used outside the article tag, it is used as a subsidiary information part of the page or site, such as the sidebar, the links section of the blog, the advertising area, etc. The frequency of use is low. The code is as follows:

< !DOCTYPE HTML>

< html>

< body>

< !-- 在article标签内使用时 -->

< article>

< h2>

Who is Jack Ma?

< /h2>

< p>

Jack Ma, male, was born in Hangzhou, Zhejiang Province on October 15, 1964. he is a famous Chinese entrepreneur and founder of Alibaba Group, Taobao and Alipay.

< /p>

< aside>

< h2>

references

< /h2>

< p>

Baidu, Wikipedia.

< /p>

< /aside>

< /article>

< !-- 在article标签外使用时 侧导航栏-->

< aside>

< nav>

< ul>

< li>

< a href="">

Lao Zhao's blog

< /a>

< /li>

< li>

< a href="">

Brother Ghost's blog

< /a>

< /li>

< li>

< a href="">

Uncle puma's blog

< /a>

< /li>

< /ul>

< /nav>

< /aside>

< /body>

< /html>

Time element

The time element is a time tag. Usage: represents a time or a date in 24 hours, it is allowed to have a time difference, many formats of date and time can be defined, and the frequency is low. The code is as follows:

< !DOCTYPE HTML>

< html>

< meta charset='utf-8'>

< body>

< aside>

< time datetime="2013-3-6">

March 6, 2014

< /time>

< br/>

< !-- datetime属性中日期与时间之间要用"T" 文字分隔，"T"表示时间 -->

< time datetime="2013-3-6T20:00">

20:00 on March 6, 2014

< /time>

< br/>

< !-- 时间加上"Z"表示给机器编码时使用UTC标准时间 -->

< time datetime="2013-3-6T20:00Z">

20:00 on March 6, 2014

< /time>

< /aside>

< /body>

< /html>

This is the end of the content of "what are the new main structural elements of html5". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.