HTML5 study notes concise version (2): new elements section, article, aside

section

The section element describes a common section in a document or program. Generally speaking, a section contains a head and a content content block. A section can be represented as a section, or a box block under a tab on a tab page. A page can be split into multiple sections, representing introduction, news items and contact information respectively.

If the content of the element can be displayed together to express the corresponding meaning, it can be defined as an article element, and there is no need to use the section element.

The section element is not a general container element, so if an element needs to define a corresponding style or script, it is recommended to use the div element. The condition for using section is to ensure that the content of this element can be clearly displayed in the document. in the outline.

The following example code comes from part of the Apple website page. The code contains 2 short sections:

    

        
Apples
        
Tasty, delicious fruit!
    
    
The apple is the pomaceous fruit of the apple tree.
    

        
Red Delicious
        
These bright red apples are the most common found in many supermarkets.
    
    

        
Granny Smith
        
These juicy, green apples make a great filling for apple pies.
    

As you can see, you can use the h1 element arbitrarily in the section without considering it. This section is a top-level, second-level or third-level element.

The code below is a graduation ceremony page, which contains two sections, one is to display the list of people who will graduate, and the other is to display the form of the graduation ceremony.

    


    
Graduation
    

        
Ceremony
        
Opening Procession
        
Speech by Validactorian
        
Speech by Class President
        
Presentation of Diplomas
        
Closing Speech by Headmaster
    
    

        
Graduates
        

            
Molly Carpenter
            
Anastasia Luccio
            
Ebenezar McCoy
            
Karrin Murphy
            
Thomas Raith
            
Susan Rodriguez
        
    

article

Article represents an independent fragment of the content of a document, for example, a blog entry or a newspaper article. The content of the 23c3de37f2f9ebcb477c4a90aac6fffd tag is independent of the rest of the document.

article is a special section tag, which has clearer semantics than section. It represents an independent and complete block of related content. Generally, an article will have a title section (usually contained within the header) and sometimes a footer. Although a section is also a thematic piece of content, the article itself is independent and complete in terms of structure and content.

When article is embedded in article, in principle, the content of the inner article is related to the content of the outer article. For example, in a blog post, the article containing user-submitted comments should be hidden within the containing blog post article.

Safari 5 released

7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,
Apple announced the release of Safari 5 for Windows and Mac......

aside

The 15221ee8cba27fc1d7a26c47a001eb9b element tag provided by HTML5 is used to represent the subsidiary information part of the current page or article, and can include references and sidebars related to the current page or main content. , advertisements, nav element groups, and other similar sections that are distinct from the main content.

According to the current specification, the 15221ee8cba27fc1d7a26c47a001eb9b element can be used in two ways:

n is included in 23c3de37f2f9ebcb477c4a90aac6fffd as ancillary information part of the main content, and the content can be Quotes, word lists, etc. related to the current article.

n Used outside of 23c3de37f2f9ebcb477c4a90aac6fffd as a global subsidiary information part of the page or site; the most typical form is the sidebar (sidebar), the content of which can be friendly links, affiliated navigation or advertisements Unit etc.

The following code example combines the above two usage methods:

    

        
My Blog
    
    

        
My Blog Post
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua.
        

            
            
Glossary
            

                
Lorem
                
ipsum dolor sit amet
            
        
    
    

        
        
Blogroll
        

            
My Friend
            
My Other Friend
            
My Best Friend
        
    

The above is the concise version of HTML5 study notes (2): the content of the new elements section, article, and aside, more related Please pay attention to the PHP Chinese website (www.php.cn) for content!