HTML5 's aside and article tag detailed example tutorial

Source: Internet
Author: User

element



Html

an element represents a part of a page whose content is not related to the other content of the page, or is not associated with it alone. elements are usually displayed as sidebar (sidebar) or some insert supplemental content. Usually used to display some definitions in the sidebar, such as table of Contents, index, glossary, etc., can also be used to display relevant advertising, author's introduction, Web application, related links, current page content introduction, etc.

Element usage Considerations:

Do not use the element to mark the text in parentheses, because this type of text is considered part of the main content.

Use examples:

The Disney movie The Little Mermaid was a
-released to theatres in 1989.    
The movie earned $87 million during its initial release.    
More info about the movie ...




Two ways of using aside label in HTML5

Aside elements in the production of Web sites are mainly the following two ways to use

1 is included in the article element as the main content of the Ancillary Information section, which can be related to the current article relevant information, ranking interpretation, and so on.

... ... ...


2 Use the article element as the part of the page or site global. The most typical is the sidebar, which can be the content of links, blogs, other articles list, advertising units.

... ... ... ... ... ...





element



Article Element (

Hence the name incredible, which can represent forum posts, magazines or news articles, blogs, user submissions, interactive components, or other independent content items. Its main semantics is to represent itself as an independent content structure. The internal structure of each element should be similar, for example, should contain a header (h1-h6 element), etc.

Element usage:

When an element is nested, the element represents the article related to the parent element. For example, an element that represents a blog comment can be nested within an element that represents a blog post .
the information of the article author in the 元素表示,但是不适用于嵌套的 元素。

元素中文章的发布日期和时间可通过 元素的pubdate属性表示。

代码样例

element can be passed

             Jurassic Park          
        Dinos were great!                          way too  scary for me.                                  posted  on May 16 by Lisa.                                              I agree, dinos are my  favorite.                                  posted on may 17 by  Tom.                                                        posted on may 15  by staff.


Explanation of article label in HTML5

tags are used to define something from the outside. For example, some of the contributions of netizens or news articles of journalists or the extraction of a blog, forum information, as well as other media materials.

The content that the user sees is not corresponding to a specific page of this website, can be nested use, inside and outside layer content is connected

Sample code:

HTML5 Project HTML5 is the next Web page specification for correcting HTML now HTML5 is the standard for Web architecture


The label supports the new standard properties in HTML5.

Class, Contenteditable, ContextMenu, dir, draggable, IDs, irrelevant, Lang, ref, Registrationmark, TabIndex, template, titl E

The label supports event properties.

Onabort, onbeforeunload, onblur, onchange, onclick, OnContextMenu, ondblclick, Ondrag, Ondragend, OnDragEnter, OnDragLeave, OnDragOver, ondragstart, OnDrop, OnError, onfocus, onkeydown, onkeypress, onkeyup, onload, OnMessage, onmous Edown, OnMouseMove, onmouseover, onmouseout, onmouseup, OnMouseWheel, OnResize, Onscroll, Onselect, onsubmit, onunload

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.