Home >Web Front-end >H5 Tutorial >What are the new structural elements in HTML5? Usage of new structural elements in HTML5 (recommended)
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
<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="#" width = "600" height = "400"</embed>
</object>
</article>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
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<nav>
<ul>
<li><a href = "#">主页</a></li>
<li><a href = "#">开发文档</a></li>
</ul>
</nav>
<article>
<header>
<h1>html5和css3的历史</h1>
<nav>
<ul>
<li><a href = "#">HTML5历史</a></li>
<li><a href = "#">CSS3历史</a></li>
</ul>
</nav>
</header>
<section>
<h1>HTML5历史</h1>
<p>....</p>
</section>
<section>
<h1>css3历史</h1>
<p>....</p>
</section>
<footer>
<a href = "#">删除</a>
<a href = "#">修改</a>
</footer>
</article>
<footer>
<p><small>版权声明：</small></p>
</footer>
</body>
</html>aside element
Represents the ancillary information part of the current page or text
Includes first-time references and sidebars , shopping, navigation bar, etc.
<html>
<head>
<meta charset="UTF-8">
<title>aside元素</title>
</head>
<body>
<header>
<h1>js入门</h1>
</header>
<article>
<h1>语法</h1>
<p>文章的正文。。。。。。</p>
<aside>
<h1>名词解释</h1>
<p>这是一个对语言来说很重要的内容体</p>
</aside>
</article>
<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href = "#">2015-3-10</a></li>
<li><a href = "#" >大牛：真希望可以好好的学习一下</a></li>
</ul>
</nav>
</aside>
</body>
</html>time element
24 hours
<html>
<head>
<meta charset="UTF-8">
<title>Time元素</title>
</head>
<body>
<time datatime = "2017-10-09">2017-10-09</time>
<time datatime = "2017-10-09T20:00">2017-10-09</time>
<time datatime = "2017-10-09T20:00Z">2017-10-09</time>
<time datatime = "2017-10-09T20:00Z+09:00">2017-10-09</time>
</body>
</html>pudate attribute
<html>
<head>
<meta charset="UTF-8">
<title>update属性</title>
</head>
<body>
<article>
<header>
<h1>苹果</h1>
<p>发布日期
<time datetime="2017-10-09" pubudate>2015-10-09</time></p>
<p>舞会时间
<time datetime ="2015-10-09">2015-10-09</time></p>
</header>
</article>
</body>
</html>[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!