最佳的 HTML5 页面 DOM 结构
<!DOCTYPE
HTML> |
02 |
|
03 |
<html> |
04 |
|
05 |
<head> |
06 |
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" /> |
07 |
<title>Website
Title</title> |
08 |
</head> |
09 |
|
10 |
<body> |
11 |
|
12 |
<header> |
13 |
<nav> |
14 |
<ul> |
15 |
<li>Home</li> |
16 |
<li>Contact</li> |
17 |
</ul> |
18 |
</nav> |
19 |
</header> |
20 |
|
21 |
<section> |
22 |
|
23 |
<article> |
24 |
<header> |
25 |
<h2>Title
Goes here</h2> |
26 |
<p>Posted
on <time datetime="2012-07-28T13:00:24+01:00">July
28th 2012</time>
by <a href="#">Author</a>
- <a href="#comments">12
comments</a></p> |
27 |
</header> |
28 |
<p>Lorem
Ipsum is simply dummy text of the printing and typesetting industry.</p> |
29 |
</article> |
30 |
|
31 |
<article> |
32 |
<header> |
33 |
<h2>Article
title</h2> |
34 |
<p>Posted
on <time datetime="2012-07-26T13:00:24+01:00">July
26th 2012</time>
by <a href="#">Author</a>
- <a href="#comments">9
comments</a></p> |
35 |
</header> |
36 |
<p>Lorem
Ipsum is simply dummy text of the printing and typesetting industry.</p> |
37 |
</article> |
38 |
|
39 |
</section> |
40 |
|
41 |
<aside> |
42 |
<h2>Contact
Us</h2> |
43 |
<p>It
is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> |
44 |
</aside> |
45 |
|
46 |
<footer> |
47 |
<p>Copyright
2012 DigiMantra Labs ©</p> |
48 |
</footer> |
49 |
|
50 |
</body> |
51 |
|
52 |
</html> |
