HTML5 document structure,

Source: Internet
Author: User

HTML5 document structure,
HTML5 document structureHTML5 simplifies a lot. Its design follows three principles: 1. Compatibility, 2. practicability, and 3. General access.1. header element<Header> the tag defines the header of a document or a part of the document, and can be used to set the article title. <Header> the element should be used as the introduction content or the container of the navigation link. You can define multiple Hgroup Element<Hgroup> A tag defines the title and subtitle of a document. Only h1 ~ H6 has six title elements.2. footer ElementThe footer element is used to define the footer content for a page or an article, including the copyright information of the article and the contact information of the author. A page can contain multiple footer elements. Example:

<Footer> <ul> <li> Copyright 2000-2013 China soft All Rights Reserved </li> <li> School Address: Guangzhou. conghua. phone No. 13 guangcong Avenue: 020-87818918 </li> </ul> </footer>
3. article Element<Article> A tag defines an independent content. An independent content on the page that is irrelevant to the context. For example, a post or a blog post. <Article> the content defined by a tag must be meaningful and independent from the rest of the document. <Article> potential sources: Forum posts, blog articles, news stories, and comments. Syntax description: <article> </article> can contain header, footer, section, nested articles, and other elements. Example:
<Article> 
4. section ElementThe section element is used to block a part of a page. For example, the section content is further divided into the title, content, and footer of a section. Syntax description: <section> </section> can contain h1 ~ H6 contains six title elements, p elements, and multiple article elements to indicate that the "part" contains multiple articles. You can also nest section elements. Example:
<Article> 
5. nav ElementsThe nav element is used to define various navigation bars on a page. A page can have multiple nav elements as the navigation of the entire page or different parts of the content. The only possible location of nav is the basic syntax in the address element:
<nav><a href="">#</a><a href="">#</a><a href="">#</a></nav>
6. aside ElementsThe aside element indicates auxiliary information related to the content of the article element outside the content of the article element. It can contain references, sidebar, advertisement, and navigation bar related to the current page or main content, and other similar parts that are different from the main content. 7. audio tag
The audio tag defines sound, such as music or other audio streams. Currently, audio supports three file formats: MP3, Wav, and Ogg.
<Audio src = "-xuexiao" controls = "controls"> </audio>
Attribute descriptionThe URL of the src audio to be played autoplay. When the audio is ready, play controls immediately to display the audio control to the user, for example, loop of the play/pause button re-starts playing the preload audio whenever the audio ends. The preload audio is loaded during page loading and is ready for playing. 8. video tags
Video tags define videos, such as movie clips or other video streams. Currently, three video formats are supported: MP4, WebM, and Ogg.
<Video src = ".mp4" width = "320" controls muted poster = "images/logo.png" preload> </video>
Attribute descriptionThe URL width of the video to be played by src sets the width height of the Video Player. Set the height of the Video Player autoplay video. After the video is ready, play controls to display the video control to the user, for example, the play/pause button loop starts playing the muted video again after the media file is played. The audio output of the video should be muted and the image displayed when the video is downloaded by the poster, alternatively, the preload video of the image displayed before you click the Play button loads the video on the page and prepares for playback. Attribute Value (none: the video is loaded only when the Play button is clicked; metadata: only metadata is loaded, such as video length, author, and copyright) 9. figure and figcaption in the imageElement figure and figcaption cannot be regarded as structural elements, but they are still very popular in organizing independent images, images, charts, and encoding lists. Each figure element can only contain one figcaption element. Picture Arrangement is available. There is an article in Baidu Library titled "special effects on Subtitle titles of beautiful HTML5 Figure images", which often uses an image list, image + title or image + title + simple description. Instance code: <figure> <p> Lupu Bridge on Huangpu River </p> </figure> replace the original li tag, who will replace the P tag? The answer is: The figcaption w3c defines the title of the figure element ). The "figcaption" element should be placed at the first or last child element of the "figure" element. The above code becomes:
<Figure> <figcaption> Lupu Bridge on Huangpu River

Related Article

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.