New HTML5 document
1 - header information
The header area of HTML document stores the basic information of various web pages. These information are mainly used by browsers and will not be displayed in web pages. In addition, search engines will also retrieve these information. Therefore, it is very important to pay attention to and set header information.
The browser will display the title of the document in the title bar or status bar of the window. When the document is added to the user's link list, favorites or bookmark list, the title will be the default name of the document.
Meta tags can be used to define meta information of web pages.
2 - build the general structure of web pages
HTML5 contains more than 100 tags, most of which are inherited from HTML4. These tags are basically placed in the body of the main area. The correct selection of HTML tags can avoid code redundancy. When designing web pages, we not only need to use div to build a general web page structure, but also use the following types of tags to improve the web page structure.
h1,h2... h6: define document title, level 1 title to level 6 title
p: Define paragraph text
ul,ol,li: define list information
table,tr,td: define table structure
form,input,textarea: defines the form structure
span: define the inclusion box in the row
Using div and span
The basic constituent element of the document structure is div, which means division. It usually surrounds the specified content in div and assigns id and class to add meaningful structure to the document.
3 - build a new HTML structure
Article refers to an article, which is used to identify a complete, independent and repeatable content in the page. artclie usually contains header, paragraph p, footnote, footer and section
section refers to the block, which is used to represent the sections in the document and partition the contents on the page, such as chapter, header, footer, etc.
div element focuses on the independence of structure, while section element focuses on the independence of content.
The following example mixes article and section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>article and section Mixed use of</title>
</head>
<body>
<article>
<header>
<h1>Butterflies in Love with Flowers</h1>
<h2>Yan Shu</h2>
</header>
<p>The threshold chrysanthemum is worried about the smoke, the orchid weeps and dew, the Luo curtain is light and cold, and the swallows fly away. Tomorrow, I don't know how to leave hate and pain. The oblique light will wear Zhu Hu at dawn.</p>
<p>Last night, the west wind withered the green trees and went up the tall buildings alone, looking at the end of the world.</p>
<section>
<h2>analysis</h2>
<article>
<h3>notes</h3>
<p>Sill: railing</p>
<p>Luo curtain: silk curtain, used by rich and noble families</p>
<p>Zhu Hu: it refers to a large family</p>
</article>
<article>
<h3>analyse and comment on</h3>
<p>This poem is really good. I love it and I like it. It reminds me of my feelings in late autumn</p>
<p>If one day we meet again, open your eyes and see who is the hero!!</p>
</article>
</section>
</article>
</body>
</html>
For the use of session elements, you should pay attention to the following issues:
1 - do not set the session element as a structural container of style. For such operations, div should be used.
2 - if article, aisde or nav are more qualified for semantic usage, div elements should be used for such operations.
3 - do not use section elements for content areas without titles.
An HTML page is designed below. The whole page consists of two parts, the title part and the main part. The title part includes the website title, suggestive title and subtitle
The main content includes four parts: navigation nav, article block, sidebar aside, footnote footer. The content of article block includes three parts: title, body and footnote.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Grove</title>
</head>
<body>
<header>
<h1>My Grove</h1>
<h2>Make an attitude program</h2>
<h4>Taoist friends, come on</h4>
</header>
<!--The whole page consists of two parts, the title part and the main part. The title part includes the website title, suggestive title and subtitle
The main content includes four parts, navigation nav,Article block article,sidebar aside,footnote footer
The content of the article block consists of three parts: title, body and footnote
-->
<main>
<nav>
<h3>navigation bar</h3>
<a href = "index.jsp">Blog Garden</a>
<a href = "index.jsp">home page</a>
<a href = "index.jsp">New essay</a>
<a href = "index.jsp">contact</a>
<a href = "index.jsp">Administration</a>
</nav>
<section>
<h2>article</h2>
<article>
<header><h1>entertain HTML</h1></header>
<p>Fade an impetuous, keep a quiet, hold a sincere, carry a kind, and be a simple programmer!!!</p>
<footer>
Article footnotes
</footer>
</article>
</section>
<aside>
<h3>Auxiliary information</h3>
</aside>
<footer>
<h2>Page footnotes</h2>
</footer>
</main>
</body>
</html>