[HTML5] HTML5的語意標籤與文件結構

2011-11-10

37532
0
HTML5
2015-07-29

本篇將介紹HTML5的語意標籤與文件結構，以及如何在Expression Web內建立HTML5文件

我們知道HTML5使用語意標籤取代掉了不具意義的

所構成的HTML文件
我整理了六個最主要架構出HTML5的語意標籤：

本篇將介紹HTML5的語意標籤與文件結構，以及如何在Expression Web內建立HTML5文件

我們知道HTML5使用語意標籤取代掉了不具意義的<div>所構成的HTML文件

我整理了六個最主要架構出HTML5的語意標籤：

標籤	說明
<header>	位於HTML5文件頁面頂部，通常放置網站的Logo、大標題或是主要資訊
<nav>	通常放置代表網站的連結或選單
<aside>	定義文章區塊以外的內容，通常使用於內容相關的邊欄
<article >	一個文件內可以有很多的<article>，通常在文件內容很多時，可以作為區分內容之用
<section>	文件內容可以有很多個<section>，通常用於章節或標題的段落區分
<footer>	位於HTML5文件頁面底部，大多用於顯示著作權、作者或相關資訊等

而且這些具有意義的語意標簽，也可以自由配置

用語意標籤製作HTML5文件的好處：

(1)看標籤就可以知道哪個部份是標題、哪裡是選單

(2)搜尋引擎在搜尋網頁內容時，可以搜尋到準確的資料與資訊

(3)因為標籤都具有意義了，這樣在維護文件時，就會變得更簡單與容易，在團隊的工作中尤其重要

※來看一下HTML4與HTML5文件結構的比較

以及原始碼

HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		
<html xmlns="http://www.w3.org/1999/xhtml">
		
  
		
<head>
		
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		
<title>HTML4</title>
		
</head>
		
  
		
<body>
		
  
		
    <div id="header">
		
        <h1>Welcome to HTML5 World</h1>
		
    </div>
		
    
		
    <div id="nav">
		
        <ul>
		
            <li>以HTML4能顯示的東西來看，基本上就是只能顯示傳統的HTML元素，像是文字和圖片。</li>
		
        </ul>
		
    </div>
		
    
		
    <div id="content">優點
		
        <ul>
		
            <li>使用語意化的Tag，有利於SEO(footer、header和main等取代div，讓電腦能夠更加理解網頁的內容，容易被搜尋引擎找到)。</li>
		
            <li>若HTML5成為網頁標準技術，則即使瀏覽器不同，也不會再出現不同的網站看起來不一樣的情形，也可跨平台瀏覽(如:手機)</li>
		
        </ul>
		
        <img src="html5.png"/>
		
        <br/>
		
        HTML5在未來等著我們
		
    </div>
		
    
		
    <div id="fotter">
		
        此由HTML4的文件架構所編寫的
		
    </div>
		
  
		
</body>
		
  
		
</html>

HTML5

<!DOCTYPE html>
		
<html>
		
  
		
<head>
		
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
		
<title>HTML5</title>
		
</head>
		
  
		
<body>
		
  
		
    <header>
		
        <h1>Welcome to HTML5 World</h1>
		
    </header>
		
    
		
    <nav>
		
        <ul>
		
            <li>HTML5 是由 HTML+ CSS+ JavaScript 所組成，目標就是減少瀏覽器對外掛程式的需求。 </li>
		
        </ul>
		
    </nav>
		
    
		
    <section>
		
        <article>
		
            優點
		
            <ul>
		
                <li>使用語意化的Tag，有利於SEO(footer、header和main等取代div，讓電腦能夠更加理解網頁的內容，容易被搜尋引擎找到)。</li>
		
                <li>若HTML5成為網頁標準技術，則即使瀏覽器不同，也不會再出現不同的網站看起來不一樣的情形，也可跨平台瀏覽(如:手機)</li>
		
                <li>•雖說目前還是有部分瀏覽器無法支援全部格式，但都還是持續的更新技術與支援。</li>
		
            </ul>
		
        </article>
		
        <img src="html5.png" height="433" width="640" alt="HTML5"/>
		
        <br/>
		
        HTML5在未來等著我們
		
    </section>
		
    
		
    <footer>
		
        此由HTML4的文件架構所編寫的
		
    </footer>
		
</body>
		
  
		
</html>