In HTML 5, in order to make more clear structure of the document, we added a few structural elements and a header, footer, content blocks and other documents associated with the structure. Content block refers to the HTML unit after page segmented by logic. For example, for books, chapters, sections can be referred to as content blocks; for blog sites, navigation menus, articles, text, articles, reviews, etc. Each part can be called content block.
There are two elements respectively article elements and section elements in HTML5 main structure of the new element, these two elements is what does this mean? What blocks are typically used? When to use the article element? When a section element? What is the difference between the two is?
A, article elements
article element represents the document, page or application independent, complete, can alone be referenced external content. It can be a blog or in the newspaper articles, a forum post, some user comments or separate plug-ins, or any other independent content. In addition to the content sections, one article element usually has its own title (usually on a header element inside) and sometimes their footnotes.
Now, let's look at an example of a piece of code elements to blog about the article, for example, the following code:
<article>
<header>
<h1> element to use article </ h1>
<the p-> Issue Date: <time pubdate = "pubdate "> 2010/10/10 </ Time> </ P>
</ header>
<P> What element is the article? How to use the article element? ...... </ p>
<footer>
<P> <Small> All Rights Reserverd yiiyaa.net Copyright @ </ the samll> </ P>
</ footer>
</ article>
This example is an article about the use of elements, elements embedded in the header the title of the article, at p element in the lower part of the title, embedded in the body of a large section of the blog post, the elements in the footer at the end, the embedded copyright of the article, as a footnote. Contents of the entire sample is relatively independent and complete, and therefore, this part of the article element used.
elements can be nested article is used, the content of the inner layer associated with the content needs in principle. For example, a blog post, for reviews of the article you can use nested elements article way; used to render the article reviews the elements to be included in an overall content of the article inside the element.
Next, let's look at a nesting element on the article code example, as follows:
<article>
<header>
<h1 of> use article element </ h1 of>
<P> Issue Date: <time pubdate = "pubdate" > 2010/10/10 </ Time> </ P>
</ header>
<P> What element is the article? How to use the article element?
...... </ the p-> <Section>
<h2> Comments </ h2>
<Article This article was>
<header>
<h3> Posted by: shenmiweiyi </ h3>
<the p-> <pubDate Time datetime = "2011-12-23T: 21-26: 00"> 1 hour before </ time> </ p>
</ header>
<the p-> very nice article, look at the top! </ the p->
</ Article This article was>
<Article This article was>
<header>
<h3> Poster: The only mystery </ h3>
<the p-> <pubDate Time datetime = "2011-12-23T: 21-26: 00"> 1 Xiaoshi before </ Time> </ p>
</ header>
<the p-> article very nice, very detailed explanation of the article </ p>
This example is more complete than the code that adds the contents of the article reader comments, examples of the content is divided into several sections, the article title in the header element, the body of the article on the back of the header element p element and then the body section element and Exposition make a distinction between (a block element is used to distinguish the contents of the page), embedded in the comments section of element content, review comments of each individual and relatively is relatively independent, complete, and therefore they all use the element of a article, the article reviews the elements, can be divided into content titles and comments section, respectively, on the header element and the p element.
In addition, article elements can also be used to indicate plug-in, its role is to make plug-in looks like the same as embedded in the page. Code is as follows:
<Article This article was>
<h1 of> a plug </ h1 of>
<Object>
<param name = "the allowFullScreen" vlaue = "to true">
<the embed the src = "#" width = "600" height = "395"> < / the embed>
</ Object>
</ Article This article was>
Two, section element
section elements for content on the site or application page is divided into blocks. Element usually consists of a section title and its content. However, section element is not an ordinary container element; when a content needs to be directly defined style or behavior is defined by the script, rather than section is recommended to use div elements. SUMMARY section element may be stored in a separate database or to output to the word document.
<section>
<h1> section element to use </ h1>
<the p-> When to use section elements? How rational use of section elements? </ The p->
</ section>
is not generally recommended for those content without a title using the section elements, you can use the HTML5 outline tool to check whether there is a title page section, If you use this tool to check, findings suggest that there is a section in the "untitiled section" (no title of the section) article, this section it is possible improper use.
section element is the role of the content on the page is divided into blocks, or to segment the article, not to be confused with the article element has its own complete and independent content ".
Here, we look at article elements and section elements an example of using, hoping to help you better understand the differences article elements and section elements.
<article>
<h1> article elements and section elements to use </ h1>
<the p-> when to use the article element? when use section elements .. ... </ the p->
<section>
<h2> Article This article was elemental to use </ h2>
<the p-> Article This article was element represents the document, page or application independent, complete, can alone be externally referenced content . </ P>
</ sectionTop>
<p> section element for the block content on the application site or page. </ P>
</ sectionTop>
</ Article This article was>
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
Contents of the first code section independent, complete, and therefore the use of the article element. The article is divided into three sections, each section has a separate title, so use a two section elements. Keep in mind that the article on the segmented work is also done using the section elements. Some may ask, why not use elements of the first paragraph of section, where you can actually use the section of elements, but because of its structure clearer, the analyzer can identify the first paragraph in a section element, all will be the first a section element is omitted, but the first element in a section also included in the section element or sub-element article, you must specify the first section element.
In HTML5, you can be part of all subordinate pages, such as navigation bars, menus, and other copyright notice contained a single page, in order to harmonize the use of CSS styles to decorate. Finally, the taboo on the use of section elements are summarized as follows:
1) Do not use as a container section element on the page to set the style, it is the work of the div element.
2) If the article element, aside nav element or elements more in line with the conditions of use, do not use the section elements.
3) Do not use the section elements content block without a title.
Third, the difference between the two:
Above about so much, what is the difference between the two in the end what is it? In fact, in HTML5, article elements can be viewed as a special type of section elements, it is more emphasis on independence than section elements. That is emphasized section element or segment block, the article emphasized independence. Specifically, if a piece of content is relatively independent, full time, you should use article elements, but if you want a piece of content into paragraphs, it should use the section elements. In addition, in HTML5, div element becomes a container when using CSS when style, which can be a general CSS styles applied to this container.
