上一回我們知道HTML5的語意標籤,
取代了不具意義的Div所標記的區塊,
所以這一回KoKo要來為大家介紹,
架構出整個HTML5最主要的幾個語意標籤,
<header>
網頁頁面的頂部,通常都是放置網站的標題、LOGO等主要的資訊
<nav>
通常為網站的選單連結
<aside>
主要內容之外的其他內容,可以為網站的側邊欄
<article>
為頁面中的一個區塊,是獨立的內容,在一個文件中可以有很多個
<section>
用於章節等段落的區分,在一個文件中可以有很多個
<footer>
HTML5頁面的下方,用以顯示相關資訊、著作權等等
這些語意標簽所擺放的位置,都是可以自由的移動調配,
我們可以依照自己的需求,去組合出所需要的網頁架構。
最後,下面是一個以HTML5語意標籤為基礎,
最基本、簡潔的代碼,提供給大家做參考!!
<!DOCTYPE html> //簡短的檔頭聲明
<html>
<head>
<title>HTML5 網頁範例</title>
</head>
<body>
<header> //網站標題
<h1><a href="#">Welcome 網頁範例</a></h1>
</header>
<nav> //連結導覽
<ul>
<li><a href="#">關於</a></li>
<li><a href="#">最新消息</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">聯絡我們</a></li>
</ul>
</nav>
<section>
<article> //內容區塊1
<header> //內容區塊1之標題
<h3><a href="#">主要內容 1</a></h3>
</header>
<section>
<p>.........</p>
</section>
</article>
<article> //內容區塊2
<header> //內容區塊2之標題
<h3><a href="#">主要內容 2</a></h3>
</header>
<section>
<p>.........</p>
</section>
</article>
</section>
<aside> //側邊欄位
<h1><a href="#">aside</a></h1>
<p>.........</p>
</aside>
<footer> //頁尾資訊
版權宣告
</footer>
</body>
</html>
留言列表