html5 semantic tags: 1. header tag; 2. nav tag; 3. footer tag; 4. hgroup tag; 5. section tag; 6. article tag; 7. aside tag; 8. figure tag ; 9. time tag; 10. address tag.
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
Each HTML tag has its own specific meaning (semantics), semantics refers to Use semantically appropriate tags so that the page has a good structure, and the pageelements have meaning, making it easy for both people and search engines to understand.
I have seen a more vivid example:
When building a house, bricks should be used in some places, ceramic tiles should be used in some parts, and The places must be covered with cement, so that the house will be strong, neat and beautiful.
If you insist on replacing bricks with ceramic tiles, you can barely build a house. However, such a house is not strong, easy to collapse, and the appearance is not good-looking.
Similarly, many things in life are similar! Use whatever tag should be used to represent . It has a good structure and is easier for people and search engines to understand. Another point is that it is easy to develop and maintain. I have seen a lot of web page structures, and I want to complain about them. It’s all confusing. Just leave the appearance of the task to css. Don’t lay out the layout for the sake of appearance. !
Use as few unsemantic p and span tags as possible; use more strong semantic tags newly added in HTML5;
Do not use stylized tags, such as font, b, ..., etc., you can completely use css to implement styles (besides, such "stylized tags" are basically abolished in HTML5!)
Emphasis on the text, try to use the strong tag to strengthen the emphasis, and set the em tag in italics
Form writing specifications: Title Use caption, The header is surrounded by thead, the body part is surrounded by tbody, and the tail is surrounded by tfoot. Table headers and general cells should be distinguished. Use th for table headers and td for cells;
Form fields must use fieldset tags Wrap it up and use the legend tag to explain the purpose of the form; (To be honest, I really didn’t notice this much!)
The description text corresponding to each input tag needs to be used label label , and is associated with the corresponding input through the id attribute.
1.header: The tag defines the header of the "web page" or "section".
Usually contains h1-h6 elements or hgroup, as the entire page or the title of a content block. You can also wrap the table of contents part of a section, a search box, a nav, or any related logo.
<header>
<h1>毕业生实习</h1>
<span>2016/08/05</span>
</header>
<!--之前使用的是无语义的div+class-->
<div class='header'>...</div>or
<header>
<hgroup>
<h1>网站标题</h1>
<h2>网站副标题</h2>
</hgroup>
</header>Usage:
2.nav: defines the part of the navigation link.
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
</ul>
</nav>
<!--之前使用的是无语义的div+class-->
<div class='nav'>...</div>Usage:
##Note: For example, there will be a set of links in the footer, including terms of service, home page, copyright statement, etc., Using the footer element is most appropriate.
Specific uses: traditional navigation bar, sidebar navigation, industry navigation, page turning operations, etc.通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。 如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。 用法： 4. hgroup元素：“网页”或“section”的标题 当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合 用法： 5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块） 用法： 6.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注) 用法：定义一个独立完整的内容部分（可包含标题，内容，脚注）时使用！ article、section间的相互嵌套关系： 7. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。 书籍中的定义很长很绕，在收集之后，发现主要有两种用法:（啃下概念） 1.用于article标签之内，此时表示的是该独立内容的附属信息部分； 2.用于article标签之外，此时作为页面或站点全局的附属信息部分。 用法： （一句话概括：不同的位置表示为对应区域的附属信息！） 8. figure标签：规定独立的流内容（图像、图表、照片、代码等等）。 figcaption标签：用于元素定义figure的标题。 1.一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。 2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。 9. time标签：定义时间或日期 以上为实践操作中可能会用到的标签，HTML5还新增了很多标签，但因为用途与浏览器兼容性问题，还是为人所慎用的！待拓展！ 10. address标签：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。 表示文档或文章的作者/拥有者的联系信息，在body标签中表示文档的作者的联系信息；在article标签中表示文章作者的联系信息； W3School示例文档：http://www.w3school.com.cn/tags/tag_address.asp 用法： 总结：掌握语义化含义、作用以及应当注意的细节，HTML5中常用的语义化新标签！知识点不在于多，而研究透彻应学以致用！ 推荐教程：《html视频教程》 The above is the detailed content of What are the semantic tags in html5. For more information, please follow other related articles on the PHP Chinese website!<footer>
作者：xxxx <br />
Copyright © xxx.All rights reserved.
</footer>
<!--之前使用的是无语义的div+class-->
<div class='footer'>...</div>
<hgroup>
<h1>主标题</h1>
<h2>HTML 5</h2>
</hgroup><section>
<h1>section要包含标题</h1>
<p>section要包含内容...</p>
</section>
<article>
<header>
<h1>标题处</h1>
</header>
<p>内容描述</p>
<footer>脚部声明标注</footer>
</article>
拜读博文：http://www.html5jscss.com/html5-semantics-section.html<article>
<p>article内容区</p>
<aside>
<span>附属信息1</span>
<span>附属信息2</span>
<span>附属信息3</span>
</aside>
</article> <aside>
<h1>附属信息标题</h1>
<a href="#">附属信息...</a>
<a href="#">附属信息...</a>
<a href="#">附属信息...</a>
</aside> <figure>
<figcaption>figure的标题</figcaption>
<img src="pic.jpg" alt="...">
</figure><p>定义时间...<time>9:00</time></p>
<p>结合datetime属性定义日期...<time datetime="2016-08-08">时间</time></p>
What are the production methods of html5 animation production?
The difference between HTML and HTML5
Virtual number receives verification code
sp2 patch
viewstate usage
Introduction to laravel middleware
How to read a column in excel in python
What are the differences between cellpadding and cellspacing?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
