HTML5 - 語法

HTML 5 語言具有與 HTML 4 和 XHTML 1 文件相容的“自定義”HTML 語法，這些文件已釋出在 Web 上，但不相容 HTML 4 的更深奧的 SGML 功能。

HTML 5 的語法規則與 XHTML 不同，在 XHTML 中，我們需要小寫標籤名，引用我們的屬性，屬性必須具有值並且必須關閉所有空元素。

HTML5 具有很大的靈活性，它支援以下功能：

大寫標籤名。
屬性引號是可選的。
屬性值是可選的。
關閉空元素是可選的。

DOCTYPE

在舊版本的 HTML 中，DOCTYPE 更長，因為 HTML 語言基於 SGML，因此需要引用 DTD。

HTML 5 作者將使用簡單的語法來指定 DOCTYPE，如下所示：

<!DOCTYPE html>

上述語法不區分大小寫。

字元編碼

HTML 5 作者可以使用簡單的語法來指定字元編碼，如下所示：

<meta charset = "UTF-8">

上述語法不區分大小寫。

<script> 標籤

通常的做法是在 script 元素中新增一個 type 屬性，其值為“text/javascript”，如下所示：

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 刪除了所需的多餘資訊，您可以簡單地使用以下語法：

<script src = "scriptfile.js"></script>

<link> 標籤

到目前為止，您一直在這樣編寫 <link>：

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 刪除了所需的多餘資訊，您可以簡單地使用以下語法：

<link rel = "stylesheet" href = "stylefile.css">

HTML5 元素

HTML5 元素使用開始標籤和結束標籤進行標記。標籤用尖括號分隔，標籤名位於中間。

開始標籤和結束標籤的區別在於後者在標籤名前面包含一個斜槓。

以下是 HTML5 元素的示例：

<p>...</p>

HTML5 標籤名不區分大小寫，可以全部大寫或混合大小寫，儘管最常見的約定是堅持使用小寫。

大多數元素包含一些內容，例如 <p>...</p> 包含一個段落。但是，有些元素不允許包含任何內容，這些元素被稱為空元素。例如，br, hr, link, meta 等。

這是一個完整的 HTML5 元素列表。

HTML5 屬性

元素可能包含用於設定元素各種屬性的屬性。

一些屬性是全域性定義的，可以在任何元素上使用，而其他屬性僅針對特定元素定義。所有屬性都有一個名稱和一個值，如下面的示例所示。

以下是 HTML5 屬性的示例，它說明了如何使用名為 class 的屬性和值為“example”的屬性來標記 div 元素：

<div class = "example">...</div>

屬性只能在開始標籤中指定，絕不能在結束標籤中使用。

HTML5 屬性不區分大小寫，可以全部大寫或混合大小寫，儘管最常見的約定是堅持使用小寫。

這是一個完整的 HTML5 屬性列表。

HTML5 文件

為了更好的結構，引入了以下標籤：

section - 此標籤表示通用文件或應用程式部分。它可以與 h1-h6 一起使用以指示文件結構。
article - 此標籤表示文件的獨立內容部分，例如部落格文章或報紙文章。
aside - 此標籤表示與頁面其餘部分略微相關的部分內容。
header - 此標籤表示部分的標題。
footer - 此標籤表示部分的頁尾，可以包含有關作者、版權資訊等資訊。
nav - 此標籤表示文件中用於導航的部分。
dialog - 此標籤可用於標記對話。
figure - 此標籤可用於將標題與某些嵌入式內容（例如圖形或影片）相關聯。

HTML 5 文件的標記如下所示：

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

即時演示

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://tutorialspoint.tw/html">HTML Tutorial</a></li> 
            <li><a href = "https://tutorialspoint.tw/css">CSS Tutorial</a></li> 
            <li><a href = "https://tutorialspoint.tw/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.tw/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

它將產生以下結果：

列印頁面