What are the semantic tags in html5-Front-end Q&A-php.cn

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.

What are the semantic tags in html5

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

HTML semantics:

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. !

The meaning and role of semantics

When the style is removed or lost, the page can present a clear structure
User experience: For example, title and alt are used to explain nouns or explain picture information, and the flexible use of label tags;
is beneficial to SEO: and Search engines establish good communication to help crawlers crawl more effective information: crawlers rely on tags to determine the context and weight of each keyword;
facilitates other devices to parse (such as Screen readers, blind readers, mobile devices) render web pages in a meaningful way;
is easier for the team to develop and maintain, and semantics are more readable, which is the next step for web pages Important trends, teams that follow W3C standards all follow this standard, which can reduce differentiation.

What should we pay attention to in semantics?

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.

HTML5 semantic tags:

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=&#39;header&#39;>...</div>

Copy after login

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h2>网站副标题</h2>
    </hgroup>
</header>

Copy after login

Usage:

can be the header part of "web page" or any "section";
has no number limit.
If hgroup or h1-h6 can work well by themselves, then don't use headers.

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=&#39;nav&#39;>...</div>

Copy after login

Usage:

Use it on the entire pagemain navigation part. If it is not appropriate, do not use the nav element;
Link groups that can be used for page navigation, Not all link groups need to be placed in nav elements, Only the main and basic link groups need to be placed in it ;

##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.

##3.footer tag: represents "webpage" or "section" footer.

通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

<footer>
  作者：xxxx <br />
 Copyright © xxx.All rights reserved.
</footer>
<!--之前使用的是无语义的div+class-->
<div class=&#39;footer&#39;>...</div>

Copy after login

用法：

可以是“网页”或任意“section”的底部部分；
没有个数限制，除了包裹的内容不一样，其他跟header类似。
多用于包含服务条款，友情链接、作者信息、版权信息等

4. hgroup元素：“网页”或“section”的标题

当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

<hgroup>
    <h1>主标题</h1>
    <h2>HTML 5</h2>
</hgroup>

Copy after login

用法：

如果只需要一个h1-h6标签就不用hgroup
如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）

<section>
  <h1>section要包含标题</h1>
  <p>section要包含内容...</p>
</section>

Copy after login

用法：

article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用p
当容器需要标题和内容时，建议使用section标签，若只是普通的容器，应该用p元素较好！section标签非p！

6.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注)

<article>
   <header>
     <h1>标题处</h1>
   </header>
   <p>内容描述</p>
   <footer>脚部声明标注</footer>
</article>

Copy after login

用法：定义一个独立完整的内容部分（可包含标题，内容，脚注）时使用！

article、section间的相互嵌套关系：
拜读博文：http://www.html5jscss.com/html5-semantics-section.html

7. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。

书籍中的定义很长很绕，在收集之后，发现主要有两种用法:（啃下概念）

1.用于article标签之内，此时表示的是该独立内容的附属信息部分；

<article>
        <p>article内容区</p>
        <aside>
            <span>附属信息1</span>
            <span>附属信息2</span>
            <span>附属信息3</span>
        </aside>
    </article>

Copy after login

2.用于article标签之外，此时作为页面或站点全局的附属信息部分。

    <aside>
        <h1>附属信息标题</h1>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
    </aside>

Copy after login

用法：

aside在article内表示主要内容的附属信息
在article之外则可做侧边栏，页面或站点全局的附属信息部分
如果是广告，其他日志链接或者其他分类导航也可以用

（一句话概括：不同的位置表示为对应区域的附属信息！）

8. figure标签：规定独立的流内容（图像、图表、照片、代码等等）。

figcaption标签：用于元素定义figure的标题。

1.一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。

    <figure>
        <figcaption>figure的标题</figcaption>
        <img src="pic.jpg" alt="...">
    </figure>

Copy after login

9. time标签：定义时间或日期

<p>定义时间...<time>9:00</time></p>

<p>结合datetime属性定义日期...<time datetime="2016-08-08">时间</time></p>

Copy after login

以上为实践操作中可能会用到的标签，HTML5还新增了很多标签，但因为用途与浏览器兼容性问题，还是为人所慎用的！待拓展！

10. address标签：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

表示文档或文章的作者/拥有者的联系信息，在body标签中表示文档的作者的联系信息；在article标签中表示文章作者的联系信息；

W3School示例文档：http://www.w3school.com.cn/tags/tag_address.asp

用法：

标签不应该用于描述通讯地址，除非它是联系信息的一部分。

元素通常连同其他信息被包含在 footer 元素中。

总结：掌握语义化含义、作用以及应当注意的细节，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!