Html5 each attribute

Source: Internet
Author: User

Div

This tag is one of the most, most used tags we've seen. There is no semantics for itself, as a hook for layout and styling or scripting.

Section

A typical scenario for a section application is a an article chapter, a tab in a label dialog box, or a numbered part of a paper. A website's homepage can be divided into sections such as profiles, news, and contact information. In fact, I am very interested in conveying information here, because the sense section and the following to introduce the artilce more suitable for modular applications, this topic will be a special article to discuss, here temporarily skipped.

Article

Article is a special section tag that has more explicit semantics than sections and represents a separate, complete block of related content. In general, article will have a title section (usually included in the header) and sometimes include footer. Although section is a subject matter, the article itself is independent and complete, both structurally and content.

When article embedded article, in principle, the content of the internal article is related to the article content of the outer layer. For example, a blog post that contains user-submitted comments should be article to include blog post article.

Note: The difference between div section article

Semantics are from scratch, gradually enhanced. Div has no semantics and is used only as a style or scripted hook, and for a subject matter, section is applied, and if the content can be detached from the context as a complete, independent existence, then article is applied. In principle, if you can use article, you can also use section, but in fact, if you use article more appropriate, then do not use section. This is also the case with the use of NAV and aside, which are also special sections, and do not use sections when using NAV and aside more appropriately.

The distinction between Div and section, article, and other tags is straightforward. The distinction between section and article at first glance is difficult, in fact the focus is to see if this part of the content from the whole can also be as a complete, independent content exists, the focus is in the complete body. Because in fact, the section contains content can be counted as a separate piece, but it can only be regarded as part of the whole, article is a complete whole.

Aside

Aside elements in the site production mainly has the following two ways to use

1) is included in the article element as the main content of the subsidiary Information Section, wherein the content can be related to the current article relevant information, ranking interpretation, and so on.

<article>  

2) Use the Subordinate Information section as a page or site global outside of the article element. The most typical is the sidebar, where the content can make links, other articles in the blog list, ad units and so on.

<aside>  

Nav

The nav element is a group of links that can be used as a page navigation, where the navigation elements are linked to other pages or to other parts of the current page. Not all link groups are put into the <nav> element; For example, there is usually a set of links in the footer, including terms of service, home page, copyright notice, and so on, where the <footer> element is most appropriate, without the need for <nav> elements.

A page can have more than one <nav> element, as the whole or different parts of the navigation; Here is a code example given by the website:

<body>

<nav>

<ul>

<li><a href= "/" >Home</a></li>

<li><a href= "/events" >current events</a></li>

... more ...

</ul>

</nav>

<article>

<p>written by A. N. other.</p>

<nav>

<ul>

<li><a href= "#public" >public demonstrations</a></li>

<li><a href= "#destroy" >Demolitions</a></li>

... more ...

</ul>

</nav>

<div>

<section id= "Public" >

<p>...more...</p>

</section>

<section id= "Destroy" >

<p>...more...</p>

</section>

... more ...

</div>

<footer>

<p><a href= "? Edit" >Edit</a> | <a href= "? Delete" >Delete</a> | <a href= "? Rename ">Rename</a></p>

</footer>

</article>

<footer>

<p><small>©copyright 1998 Exampland emperor</small></p>

</footer>

</body>

In this example, we can see that <nav> can be used not only as a global navigation for a page, but also in a <article> tag, and is linked to other locations on the current page as a related navigation for a single article content.

Html5 each attribute

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.