What are the main structural elements of html5-Front-end Q&A-php.cn

Table of Contents

article element

section element

nav element

aside element

time element

Home

Web Front-end

Front-end Q&A

What are the main structural elements of html5

青灯夜游

Feb 25, 2022 pm 05:15 PM

html5

html5 The main structure elements are: 1. article element, defining independent content; 2. section element, defining sections in the document; 3. nav element, defining part of the navigation link; 4. aside element, defining The sidebar part of the document; 5. The time element defines the date or time.

What are the main structural elements of html5

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

The main structure element is for structuring semantics, for better SEO, and for browsers to better capture data. The elements included mainly include article, section, nav, aside, and time.

article element

The article tag is semantically considered a document or a page. Usage: Usually an article, page, an independent complete content. The emphasis is on independence. Articles can be nested within each other and usually have header tags, which can be regarded as special section elements (explained later). Highly used, the code is as follows:

<!DOCTYPE HTML>
<html>
<body>
<article>  
  <header>    
    <h1> apple教程</h1>   
    <p>时间：<time pubdate="pubdate">2013-2-1</time></p>   
  </header>   
  <p>轻松学习apple教程，就来</p>
  <a href="http://www.apple.com">www.apple.com</a><br />   
  <footer>  
    <p><small>底部版权信息：apple.com公司所有</small></p>   
  </footer>  
 </article>
</body>
</html>

Copy after login

section element

section element semantics is section, usage: used for a certain paragraph of content in the page, such as a paragraph of an article, usually composed of title and content , section is not recommended for sections without titles. Sections can nest article elements because articles are more independent. The frequency of use is low and the emphasis is on segmentation and chunking. The code is as follows:

<!DOCTYPE HTML>
<html>
<body>
   <section>
   <h2>section元素使用方法</h2>
    <p> section元素用于对网站或应用程序中页面上的内容进行分块。</p>
   </section>
</body>
 </html>

Copy after login

Note: When a container needs to be styled or instep defined, it is recommended to use p. Do not use section.

nav element

The nav element semantics is navigation. Usage: Generally used as the navigation part of the page, it is used frequently. The code is as follows:

<html>
<body>
<nav>
    <ul>
        <li><a href="">菜单1</a></li>
        <li><a href="">菜单2</a></li>
        <li><a href="">菜单3</a></li>
    </ul>
</nav> 
</body>
 </html>

Copy after login

aside element

aside element semantics are beside and side. Usage: When used in the article tag, it is used as ancillary information part of the main content, such as relevant reference materials, Glossary of terms, etc. When used outside the article tag, it serves as the global ancillary information part of the page or site, such as the sidebar, the friendly link part of the blog, the advertising area, etc. Frequency of use is low. The code is as follows:

<!DOCTYPE HTML>
<html>
<body>
<!-- 在article标签内使用时 -->
<article>
    <h1>马云是谁</h1>
    <p>马云，男，1964年10月15日出生于浙江省杭州市，中国著名企业家，阿里巴巴集团、淘宝网、支付宝创始人..........</p>
    <aside>
        <h1>参考资料</h1>
        <p>百度网、维基百科...</p>
    </aside>
</article>
 
<!-- 在article标签外使用时 侧导航栏-->
<aside>
    <nav>
        <ul>
            <li><a href="">老赵的博客</a></li>
            <li><a href="">鬼哥的博客</a></li>
            <li><a href="">彪叔的博客</a></li>
        </ul>
    </nav>
</aside> 
</body>
</html>

Copy after login

time element

The time element is a time tag. Usage: Represents a certain moment or date in 24 hours. Time difference is allowed when representing the moment. Date and time in many formats can be defined. The frequency of use is low. The code is as follows:

<!DOCTYPE HTML>
<html>
<meta charset=&#39;utf-8&#39;>
<body>
<aside>
    <time datetime="2013-3-6">2014年3月6日</time>
    <br/>
    <!-- datetime属性中日期与时间之间要用“T” 文字分隔，“T”表示时间 -->
    <time datetime="2013-3-6T20:00">2014年3月6日20:00</time>
    <br/>
    <!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 -->
    <time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time> 
</aside> 
</body>
</html>

Copy after login

[Recommended courses: HTML5 video tutorial, web front-end introductory tutorial]

The above is the detailed content of What are the main structural elements of html5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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