Home > Developer > Web Develop
HTML5 's web page structure
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<nav>...</nav>
<article>...</article>
<section>...</section>
<aside>...</aside>
<footer>...</footer>
</body>
DOCTYPE statement
The DOCTYPE declaration format in HTML4 is as follows:
The DOCTYPE declaration format in HTML5 is as follows:
Head
After the HTML is finished is the head part, head is not in the browser content of the body display part of the display. There is a meta tag inside the head with a charset attribute and a value of UTF-8, which is the character encoding of the Web page.
Format in HTML4:
Format in HTML5:
Title indicates the name of the Web page, which is now on top of the browser's window.
Body
When the head is finished, it is our body part, and the contents of the body are displayed in the browser window, that is, our main part, the part we usually see.
Header Label
is a new element after HTML5, the header element represents a chunk of content in the page or the title of the entire page!
How to use in HTML5:
<nav> elements
The <nav> element is also a new element, and the Nav element represents the navigation link part of the page.
How to use in HTML5:
<nav>...</nav>
<article> elements
The article element represents a separate piece of content in the page that is unrelated to the jade context, such as an article in an article.
How to use HTML5:
<article></article>
<section> elements
Cection represents a chunk of content in a page, such as a chapter header, footer, and so on. Also can and HN (H1, H2 ...) And so on together, marking the structure of the document!
<section></section>
<aside> elements
The aside element represents the auxiliary information related to the contents of the article element, and content!
<aside><aside>
<footer> elements
Footer represents the footer of a page or a section of a page, such as the time the file was created, the author, the contact, and so on.
<footer></footer>
Detailed HTML5 page structure
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
