What are the new structural elements in HTML5? Usage of new structural elements in HTML5 (recommended)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

What are the new structural elements in HTML5? Usage of new structural elements in HTML5 (recommended)

Aug 14, 2018 pm 04:22 PM

What are the new structures of HTML5 and how can they be used? This article will tell you in detail.

HTML5 New main structure elements:

article element
section element
nav
aside element
time element
pudate attribute

Detailed explanation of elements:

article Element

can be embedded or expressed Plug-in

&lt;article&gt;
            &lt;h1&gt;这是一个内嵌页面&lt;/h1&gt;
            &lt;object&gt;
                &lt;embed src=&quot;#&quot; width = &quot;600&quot;  height = &quot;400&quot;&lt;/embed&gt;
            &lt;/object&gt;
        &lt;/article&gt;

Copy after login

section element

Using the section element without title content is generally not recommended

Do not confuse it with the article element

Summary: Do not use the section element as a page container for setting styles

If the article, aside, and nav elements are more in line with the usage conditions, then do not use the seciton element

If there is no title content, do not use the section element

nav

Used as a connection group for page navigation, where navigation elements are connected to other pages or other parts of the current page. Just put the main and basic connection groups into the nav element

Application scenarios:

Traditional navigation bar
Sidebar navigation
In-page navigation
Page turning operation

Do not use in html5 The menu element replaces the nav element

&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;nav&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href = &quot;#&quot;&gt;主页&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href = &quot;#&quot;&gt;开发文档&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;article&gt;
            &lt;header&gt;
                &lt;h1&gt;html5和css3的历史&lt;/h1&gt;
                &lt;nav&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href = &quot;#&quot;&gt;HTML5历史&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href = &quot;#&quot;&gt;CSS3历史&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/nav&gt;
            &lt;/header&gt;
            &lt;section&gt;
                &lt;h1&gt;HTML5历史&lt;/h1&gt;
                &lt;p&gt;....&lt;/p&gt;
            &lt;/section&gt;
            &lt;section&gt;
                &lt;h1&gt;css3历史&lt;/h1&gt;
                &lt;p&gt;....&lt;/p&gt;
            &lt;/section&gt;
            &lt;footer&gt;
                &lt;a href = &quot;#&quot;&gt;删除&lt;/a&gt;
                &lt;a href = &quot;#&quot;&gt;修改&lt;/a&gt;
            &lt;/footer&gt;
        &lt;/article&gt;
        &lt;footer&gt;
            &lt;p&gt;&lt;small&gt;版权声明：&lt;/small&gt;&lt;/p&gt;
        &lt;/footer&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

aside element

Represents the ancillary information part of the current page or text

Includes first-time references and sidebars , shopping, navigation bar, etc.

&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;aside元素&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;header&gt;
            &lt;h1&gt;js入门&lt;/h1&gt;
        &lt;/header&gt;
        &lt;article&gt;
            &lt;h1&gt;语法&lt;/h1&gt;
            &lt;p&gt;文章的正文。。。。。。&lt;/p&gt;
            &lt;aside&gt;
                &lt;h1&gt;名词解释&lt;/h1&gt;
                &lt;p&gt;这是一个对语言来说很重要的内容体&lt;/p&gt;
            &lt;/aside&gt;
        &lt;/article&gt;
        &lt;aside&gt;
            &lt;nav&gt;
                &lt;h2&gt;评论&lt;/h2&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href = &quot;#&quot;&gt;2015-3-10&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href = &quot;#&quot; &gt;大牛：真希望可以好好的学习一下&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;
        &lt;/aside&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

time element

24 hours

&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;Time元素&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;time datatime = &quot;2017-10-09&quot;&gt;2017-10-09&lt;/time&gt;
        &lt;time datatime = &quot;2017-10-09T20:00&quot;&gt;2017-10-09&lt;/time&gt;
        &lt;time datatime = &quot;2017-10-09T20:00Z&quot;&gt;2017-10-09&lt;/time&gt;
        &lt;time datatime = &quot;2017-10-09T20:00Z+09:00&quot;&gt;2017-10-09&lt;/time&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

pudate attribute

&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;update属性&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;article&gt;
            &lt;header&gt;
                &lt;h1&gt;苹果&lt;/h1&gt;
                &lt;p&gt;发布日期
                &lt;time datetime=&quot;2017-10-09&quot; pubudate&gt;2015-10-09&lt;/time&gt;&lt;/p&gt;
                &lt;p&gt;舞会时间
                &lt;time datetime =&quot;2015-10-09&quot;&gt;2015-10-09&lt;/time&gt;&lt;/p&gt;
            &lt;/header&gt;
        &lt;/article&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

[Related recommendations]

The basic elements of html, allowing you to learn HTML from scratch

What is an HTML file? A preliminary understanding of HTML files

The above is the detailed content of What are the new structural elements in HTML5? Usage of new structural elements in HTML5 (recommended). 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