HTML5的结构元素-CFANZ编程社区

HTML5定义了一组新的语义化标记来描述元素的内容，如article、header、section、footer、aside等标签，明确表示网页的结构，这样搜索引擎就能轻易抓到网页的重点。

元素名称	说明
header	标记头部区域的内容
footer	标记脚部区域的内容
section	独立的文章内容
aside	相关内容或者引文
nav	导航类辅助内容

<!DOCTYPE html>
<meta charset="UTF-8"/>
<title>HTML5结构元素</title>
<style>
body{
  background-color:#cccccc;
  font-family:Geneva,Arial,Helvetica,sans-serif;  
  margin:0px auto;
  max-width:900px;
  border:solid;
  border-color:#FFFFFF;
  }
header{
  background-color:#F47D31;
  display:block;
  color:#FFFFFF;
  text-align:center;
  }
header h2{margin:0px;}
h1{
  font-size:72px;
  margin:0px;
}
h2{
  font-size:24px;
  margin:0px;
  text-align:center;
  color:#F47D31;
}
h3{
  font-size:18px;
  margin:0px;
  text-align:center;
  color:#F47D31;
}
h4{
  color:#F47D31;
  background-color:#FFFFFF;
  -webkit-box-shadow:2px 2px 20px #888;
  -webkit-transform:rotate(-45deg);
  -moz-box-shadow:2px 2px 20px #888;
  -moz-transform:rotate(-45deg);
  position:absolute;
  padding:0px 150px;  
  top:50px;
  left:-120px;
  text-align:center;
}
nav{
  display:block;
  width:25%;
  float:left;
}
nav a:link,nav a:visited{
  display:block;
  border-bottom:3px solid #fff;
  padding:10px;
  text-decoration:none;
  font-weight:bold;
  margin:5px;
  }
    
nav h3{
  margin:15px;
  color:white;
}
#container{
  background-color:#888;

  }
section{
  display:block;
  width:50%;
  float:left;
}
article{
  background-color:#eee;
  display:block;
  margin:10px;
  padding:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  -webkit-box-shadow:2px 2px 20px #888;
  -webkit-transform:rotate(-10deg);
  -moz-box-shadow:2px 2px 20px #888;
  -mox-transform:rotate(-10deg);
}
article header{
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  padding:5px;
}
article footer{
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  padding:5px;
  }
article h1{
  font-size:18px;
}
aside{
  display:block;
  width:25%;
  float:left;
}
aside h3{
  margin:15px;
  color:white;
}
aside p{
  margin:15px;
  color:white;
  font-weight:bold;
  font-style:italic;
  }
footer{
  clear:both;
  display:block;
  background-color:#F47D31;
  color:#FFFFFF;
  text-align:center;
  padding:15px;
}
footer h2{
  font-size:14px;
  color:white;
}
a{
  color:#F47D31;
}
a:hover{
  text-decoration:underline;
}

</style>

<header>
  <h1>网页标题</h1>
  <h2>次级标题</h2>
  <h4>提示信息</h4>
</header>
<div id="container">
  <nav>
    <h3>导航</h3>
    <a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a>
  </nav>
  <section>
    <article>
      <header>
        <h1>文章标题</h1>
      </header>
      <p>文章内容......
      <footer>
        <h2>文章注脚</h2>
      </footer>
    </article>
  </section>
  <aside>
    <h3>相关内容</h3>
    <p>相关辅助信息或者服务......
  </aside>
  <footer>
    <h2>页脚</h2>
  </footer>
</div>

运行效果：

HTML5的结构元素_d3

谢谢阅读！