Getting front-end development to combat: html5 semantic tags

html5 semantic tags

1.<article>

Any page can be independent of the content area, such as articles / blog / news / story / forum postings / comments and so any independent content.

<article>
    <header>
        <h1>文章标题</h1>
        <p>发布时间:<time pubdate='2019-05-06'>2019-05-06</time></p>
        <p>作者:xxx</p>
    </header>
    <p>文章内容.........</p>
    <p>文章内容.........</p>
</article>

2.<section>

Defined in the document section, segment, such as other chapters, headers or article. For example, we carry out sub-sections of the article.

<article>
    <header>
        <h1>文章标题</h1>
        <p>发布时间:<time pubdate='2019-05-06'>2019-05-06</time></p>
        <p>作者:xxx</p>
    </header>
    <section>
        <h2>章节一的标题</h2>
        <p>文章内容.........</p>
    </section>
    <section>
        <h2>章节二的标题</h2>
        <p>文章内容.........</p>
    </section>
</article>

<Section> should contain a set of content and title. If the content is not the title, it is not recommended to use <section>.

3.<nav>

Define the navigation area of ​​the page.

<nav>
    <a href='/a'>页面a</a>
    <a href='/b'>页面b</a>
    <a href='/c'>页面c</a>
</nav>

4.<aside>

Define page content than the main content area (such as the sidebar)

5.<header>

Description document header area, for defining the content presentation display, multiple <header>.

To help make learning easy, efficient and free for everyone to share a large number of resources to help you become the front-end engineers, and even the way through the clutter full stack engineers. We are here to recommend a full-stack Learning Exchange front-end circle: 784783012 Welcome to flow into ××× discussion, learning exchanges and common progress.
When the real beginning of learning will inevitably do not know where to start, leading to inefficiencies affect confidence to continue learning.
But the most important thing is I do not know what needs to master key technologies, frequently stepped pit learning, end up wasting a lot of time, it is effective or necessary resources.

Learning the front, we are serious

6.<footer>

Description document bottom area, usually containing the document author, copyright, terms of use, such as contact information, you can use multiple <footer>, the general structure of the document can be divided into

Getting front-end development to combat: html5 semantic tags

The following is a more detailed semantic label, is more likely to be ignored label.

7.<figure>和<figcaption>

Separate <figure> defined flow content (images, diagrams, photos, code, etc.).
<figcaption> defined <figure> header, figure elements usually placed first or last child element

Guess you like

Origin blog.51cto.com/14284898/2402960