本文簡要介紹HTML中的各種元素及其相關屬性，讀者需要有一個概念: HTML頁面都是由基本元素及屬性組成的。HTML頁面的結構如下：
doctype 聲明
HTML 源文件中, 首先出現的是 doctype 聲明。 該聲明告訴瀏覽器, 本頁面使用何種標記語言編寫, 這會影響到瀏覽器渲染內容的方式。雖然看起來有點複雜，但大部分所見即所得(WYSIWYG)的web編輯器都能自動創建 doctype。如果不使用可視化編輯工具，那也可以從其他網頁中拷貝 doctype, 或者參考下面的 doctype 列表。
doctype 是HTML文件中最頂部的那一行, 說明文檔是什麼類型。在HTML文件中，指的是HTML版本號以及展示風格。以前版本的 doctype 聲明看起來很醜,並且也不好記。
例如 XHTML 1.0 Strict 聲明:
再看HTML4過渡式的寫法:
代碼編輯器的HTML模板中自動包含了doctype，一般也提供了自動插入的方式。
儘管文檔頂部的這一串長長的文本也不礙什麼事, 但 HTML5 去除了這些可讀性差的寫法, 統一使用下面的聲明:
<!doctype html>
簡單、而且直接。可以看到，聲明中並沒有出現版本號 “5”。雖然當前版本被稱為 HTML5, 但實際上它只是對HTML之前標準的一個演進。因為瀏覽器必須支持Web上各種現有的內容, 所以實際上並不需要 doctype 來說明依賴哪些特性。
在HTML 4.01頁面中, doctype 看起來是這樣的:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Page title</title></head><body></body></html>
在這個示例中，doctype與HTML 4.01 Strict相關。在下文中，您將看到 HTML 4.01 以及 XHTfML 1.0 , XHTfML 1.1 的示例。雖然很多元素和屬性具有相同的名稱，但在不同版本的HTML和xhtml中還是存在一些明顯的語法差異。
Document 樹結構
web頁面可以看成是包含任意數量枝幹的文檔樹。每個枝幹可以包含哪些元素，有一定的規則(這些內容在每個元素的參考手冊中, “Contains”和““Contained by”部分詳細的說明)。要理解文檔樹的概念，可以參考一個簡單的web頁面，看看其中包含的內容特性, 以及對應的樹視圖，如圖1所示:
圖1. 一個簡單頁面的 Document 樹結構
可以看到, html元素實際上包含兩個元素: head 和 body 。 head 有兩個子元素: meta 和 title 。 body 元素可以包含多個 標題(headings)、段落(paragraphs)和 block quote 。
注意，標籤的打開和關閉有對稱性。例如，“It has lots of lovely content …”這一段包含三個文本節點，第二個節點被包在 em 元素中( em ，強調元素)。 內容結束後段落被關閉，在下一個元素開始之前(本例中是一個 blockquote ); 如果將 </p> 標籤寫在 blockquote 之後, 則會破壞樹結構。html 元素doctype 之後緊接著出現了 [ html ] ()元素，這是文檔的根元素，接下來的所有內容都是根元素的後代。
如果文檔類型為XHTML，那麼根元素(root element) html 需要指定 xmlns屬性(XML名稱空間, html則不需要):
<html xmlns="http://www.w3.org/1999/xhtml">
下面是一個XHTML過渡式頁面的示例:
<!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><title>Page title</title></head><body></body></html>
html文檔分為兩個主要部分:和。head元素head 元素包含描述文檔本身的 metadata 信息，以及相關的資源，比如 JS 腳本和 CSS樣式。下面的簡單示例包含了元素, 它表示文檔的標題或名稱，標識該文檔是什麼。 title 的內容在瀏覽器的標題欄上展示，或者是收藏夾中的名稱。對於搜索引擎來說, 這也是一個非常重要的信息項，因為這是一段有意義的摘要，下面是示例:
<!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><title>Page title</title></head><body></body></html>
除了 title 元素之外, head 還可以包含:
定義了頁面上的鏈接或資源的 baseURL, 打開鏈接內容所對應的基地址。
指向某種類型的資源, 通常是CSS樣式表, 提供瞭如何展示網頁上各種元素的說明。
提供了額外的信息; 例如, 字符編碼, 頁面的內容摘要, 指示搜索引擎是否應該索引內容, 等等。
代表一個通用的、多功能的媒體對象容器
用於嵌入腳本, 或者引入外部腳本.
用於嵌入樣式(頁面內).
這些元素都是可選的, 可以是任意順序。注意, 這裡的元素不會展示在頁面內, 但他們可以影響頁面上展示的內容, 這些內容都在 body 元素內定義。
body 元素
頁面中的大部分內容都在 body 內。在瀏覽器窗口(或viewport)中, 可以看到這個元素中包含的所有內容，包括 paragraphs, lists, links, images, tables 等等。元素有一些獨有的屬性，但現在這些屬性都被廢棄了，除此之外，這個元素幾乎沒有什麼可說的。 頁面的外觀將完全取決於填充的內容; 參考HTML元素列表，以確定可以包含哪些內容。