HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。
最常">

Home  >  Article  >  Web Front-end  >  Understanding and using Article and Section elements in HTML5_html5 tutorial skills

Understanding and using Article and Section elements in HTML5_html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:49:552120browse

HTML5 brings a series of new elements and will be widely used in the future. However, there are some elements that can be confusing to use, including two new elements:
and
.
The most commonly asked question is: under what circumstances should we use these elements? And how should we use these elements correctly?

Section element
This is the most ambiguous element. How is it different from the
element? We have been using
to divide paragraphs, so besides
, when should we use this element. We quote the official documentation to illustrate it. According to the WHATWG document, the
element is described as follows:
"The
element represents a common paragraph in a document or application - WHATWG"

From the description we can see The purpose of the
element is to segment it, more or less similar to
. But it still has a special case. In the documentation, a special statement was added:
"When an element is used solely for style or for scripting convenience, we encourage authors to use
. The
element applies when the element's content When explicit listing is required. - WHATWG"

Based on this, we can summarize the following two points:
First, although the section element can technically be styled , but we still recommend using div elements when there are complex styles or scripts.
Second, similar to the
  • element, the section element is used to list content.

    So in a real example, the reason for using the
    element is to structure the content of the blog, the code is as follows:

    Copy code
    The code is as follows:



    Blog Post Title


    Ice cream tart powder jelly-o.
    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.




    Blog Post Title


    Ice cream tart powder jelly-o.
    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.




    Blog Post Title


    Ice cream tart powder jelly-o.
    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.





    This is just an example, the
    element can also be used for other purposes.

    Article element
    From the name, it has already explained itself well, but we still have to look at how the official document describes it:
    "In A document, page, application or section of a site that is, in general, independently redistributable or reusable, for example in a forum post, magazine or news article, blog entry, or user submission. Comments, interactive widgets or widgets, or any other stand-alone item of content. ”

    From the above description, we can conclude that the
    element is dedicated to structured articles, especially what we want. Published, such as blog, page content or forum posts.
    The following example shows how to use
    to build a blog article.

    Copy code
    The code is as follows:



    This is Blog Post Title




    • Author Name

    • Save in Categories





    Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
    Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
    cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
    halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
    < /div>


    In addition, the
    element can also be combined with the section element. When needed, the
    element can be used to divide the article into several sections. paragraphs, as shown in the example below.

    Copy code
    The code is as follows:


    This is Blog Post Title





    This is the Sub-Heading


    Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
    Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
    tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
    gummies danish biscuit applicake gingerbread jelly -o pastry.


    lemon drops
    toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
    cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
    Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry.



    As predicted by the founders of HTML5 and the directors of the W3C, all the new elements created by HTML5 are intended to make the web structure more semantic. The correct application of these elements is still a matter of debate among web developers and designers.
    In any case, don’t mix up the ideas. As I mentioned before, if it makes sense and you see the structure making sense using it, then use it.
  • Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn