要使用 HTML5的新語義元素 ,如<header>、<section>、<article>、<footer>等均屬於
使用新語義元素代替原來的<div class=」」>的形式進行布局,不僅增加了頁面的代碼的易讀性,規範了書寫,更易於搜索引擎和輔助技術對頁面的理解
<!DOCTYPE html> <!-- DOCTYPE簡潔聲明,強制現代的瀏覽器使用標準模式 -->
<html lang="en"> <!-- 使用lang指定文檔語言 -->
<head>
<meta charset="UTF-8"> <!-- 使用charset屬性定義字元編碼,這裡使用了8位的unicode編碼 -->
<title>HTML5標記-語義</title>
<link rel="stylesheet" href="style.css"> <!-- 使用link元素引入css樣式表。瀏覽器會假設link元素都默認有一個text/css的MIME類型 -->
<script src="app.js"></script> <!-- 使用script元素可以引入javascript腳本,瀏覽器會假設script元素具有一個text/javascript的MIME類型,除非使用的不是JavaScript腳本 -->
</head>
<body>
<header> <!-- 使用header元素,用於標題和其他重要的細節(標題、永久鏈接、元信息),可重複使用的元素 -->
<hgroup> <!-- hgroup和article元素里都可以包含一個h1。標題結構的運作方式和HTML4不同 -->
<h1>My Site</h1>
<h2>My Title</h2>
</hgroup>
<nav> <!-- 使用nav元素,顯示主要導航區或內容目錄 -->
<ul></ul>
</nav>
</header>
<nav>
<h1>Links Headings</h1>
<ul></ul>
</nav>
<aside> <!-- 使用aside元素定義一個頁面上獨立於內容區域的部分。如文章的邊欄、彈出式廣告或浮動窗口 -->
<!-- other info -->
</aside>
<section> <!-- 使用section元素,定義大塊的內容,如文章區域或重要的表單。區塊可以有自己的標題、導航及腳本 -->
<article> <!-- 使用article元素來標記獨立的可發布內容。 -->
<header>
<h1>Post Tilte</h1>
<div class="meta">
Published by someone on
<time datetime="2015-07-17T12:30+00:00"> <!-- 使用time元素按照指定的格式顯示時間 -->
01 May 2017 @ 12:30pm
</time>
</div>
</header>
<section>
<!-- post -->
<p>this is a
<mark>wonderful</mark> <!-- 使用mark高亮文檔中的搜索詞,突出顯示文本部分 -->
article.
</p>
</section>
</article>
</section>
<footer> <!-- 使用footer元素表示頁面或區域底部的頁腳,通常包括相關文章和鏈接、版權和元數據等 -->
<ul><!-- links --></ul>
<!-- copyright -->
</footer>
</body>
</html>