HTML5:HTML4 的修改與進化

簡化:檔頭

簡化前:HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

簡化後:HTML5

<!DOCTYPE html>

簡化:JavaScript 引用

簡化前:HTML4

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> 
<script type="text/javascript" src="path/to/script.js"></script>

簡化後:HTML5

<link rel="stylesheet" href="path/to/stylesheet.css" /> 
<script src="path/to/script.js"></script>

修改:Small 標記的意義

Small 標記原來代表副標題,現在用來代表小字或邊註。

修改:屬性可以不加引號

<p class=myClass id=someId> Start the reactor.

新增:email 型態的輸入欄位

<input id="email" name="email" type="email" />

新增:Placeholder

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

新增:Required 屬性

<input type="text" name="someInput" required>
<input type="text" name="someInput" required="required">

新增:Autofocus

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

新增:正則表達式

<form action="" method="post"> 
<label for="username">Create a Username: </label> 
<input type="text" name="username" id="username" placeholder="4 <> 10" 
pattern="[A-Za-z]{4,10}" autofocus required> 
<button type="submit">Go </button> 
</form>

新增:Mark

Mark 用來標註那些需要凸顯的字詞,像是以下的 "Open Your Mind"

<h3> Search Results </h3> 
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>