html 語法
語言主要在建立網頁文件的基本結構，文件內實際只有文字內容，並無實質影像內容，例如，圖片並非真正置入文件中，而只是標出與圖片檔的參照位置，再透過瀏覽器的機制繪製 (render) 出來。文件以文字編輯軟體即可開啟或編寫成網頁，而檔案的副檔名通常為 html 或 htm。語法的基本規則，是由前後成對的「標籤」 (tags) 以標記 (markup) 模式圍繞內容，而標籤是以 < 作起始及 > 作結尾表示。
- html 片段如：
<p> 使用標準網頁語法 </p>
<p> 與 </p> 分別在的起始與結尾處，就是包圍內容一前一後成對的標籤，實際瀏覽的畫面只有出現「使用標準網頁語法」，標籤只是一組標記 (符號) ，不會顯示出來，如 <p> 與 </p> 標記一個段落結構。每對標籤及其內容合起來形成一組「元素」 (elements，或譯要素、組件) ，如前例的 p 就是一組元素名稱。而標準的元素都有預先定義的含意，用來加強文章結構化 (如標題、段落之類) ，所以依據結構特性，瀏覽器已預先賦予元素特定的呈現形態，也可將元素當成「物件」 (objects) 來自行設計不同的呈現風格及資料的操控。
元素組成的結構會形成堆疊
元素在文件內會形成樹狀階層 (hierarchy) 或巢狀 (nested) 的結構，類似由內而外一層一層地將內容包裝起來，或由後向前一層一層地把內容堆疊出來。
- html 片段如：
<article> <blockquote> <p> 春風不度玉門關 </p> <p> 出塞 <strong> 王之渙 </strong> </p> </blockquote> </article>
strong 元素包圍「王之渙」，第二組 p 段落元素包圍「出塞」及 strong 元素 (含「王之渙」)， blockquote 元素再包圍兩組 p 元素，而 article 元素再包圍整個 blockquote 元素，這樣就形成一層一層的結構，並且由外而內相互牽連。外面一層可稱為內層的親 (parent，或譯父) 元素，而向內一層為外層的子 (child) 元素，如前例的 article 為 blockquote 的親元素， p 為 blockquote 的子元素。因此，每個元素都應該有一個唯一的親元素，除了文件的根基 (root) 元素已經是最外層了當然就沒有親元素 (html 文件的根基元素就是 html 元素) ；而由前例清楚可知，子元素當然可以不只一個。
因為有層級堆疊的關係，所以可以產生前後層次的視覺效果，最內層的元素，基本上會在最前面顯示，也就是說會擋到包圍它的外層 (後面)，這是理所當然地，「文字」總不能被擋在後面看不到吧。
【例示一】模擬 html 範例碼的層疊關係
-
<article>
-
<blockquote>
<p>春風不度玉門關
<p>出塞<strong> 王之渙
-
<blockquote>
元素的主要型式 block and inline
元素依其代表的結構特性，主要分為「區塊」 (block) 及「行內」 (inline) 兩個水平 (level) 。
區塊元素 (block elements) 會圍成一個區域，與其它元素內容分開，預設狀態會形成佔據整個橫向範圍的矩形區域，就像文章內一個段落一個段落一般，如前例的 p, blockquote, article 元素都屬於區塊水平 (block level) 。行內元素 (inline elements) 則不會形成整個橫向區域，僅佔有原本大小的區域，而且也會適度地折行 (換行) ，所以不一定會是完整的矩形，就像文字一個接著一個一般，通常須以區塊元素包圍，如前例的 strong 元素就屬於行內水平 (inline level) ；而單純的文字就是行內水平，如前例「出塞」、「春風不度玉門關」，通常會被另稱為文字水平 (text level) 。行內元素只能包圍行內元素，如前例的 strong 元素；區塊元素則可能包圍行內元素、區塊元素、或限定的元素，如 p 段落元素僅能包圍行內元素，因為段落裡面如果還包含段落就不合乎文章邏輯了；用在包含文章內容，如 article 元素，當然可以包圍區塊，如標題、段落、或行內元素。
區塊與行內的視覺呈現模式可參閱 block box and inline box。
標記語言的標準語法
元素可有特定的「屬性」(attributes) ，是用來定義元素的特質、參照、事件等。屬性包含「屬性名稱」和「屬性值」 (value) ，以 = (等號) 連接，值以 " 或 ' (引號) 前後括起來。
- html 標記語言的語法
<element-name attribute-name="AttributeValue" attribute-name="AttributeValue" …>content</element-name> <element-name attribute-name="AttributeValue" attribute-name="AttributeValue" … >
以起始 (如 <p>) 和結尾標籤 (如 </p> 多了 / 符號表示結尾) 包圍內容，形成完整的元素。元素名稱為了一致性及方便閱讀原始碼，最好統一用小寫字母。在起始標籤中，元素名稱後面緊接著屬性，並以至少一個半形空白 (按下 space) 區隔；大部分元素，屬性不是必須要有的。屬性可能不只一個，屬性與屬性間，以至少一個半形空白區隔，屬性值則視不同內容而有其表示方式，如果沒有可表示的值就填入屬性名稱作為值，或是省略屬性值亦可。如果元素沒有包圍內容，可以省略掉結尾標籤，如 <img > 。
例如：
<h2 class="slogan">以輕鬆心情去認真工作。</h2>
<a href="navguide.html">網站導覽</a>
<img src="photo3.png" alt="玉山日出"></img>
<link href="style.css" rel="stylesheet"></link>h2, a, img, link 就是元素名稱；而 class, href, src, alt, rel 等就是屬性名稱，後面 = 接著 " 前後括起來的內容就是屬性值。 img, link 元素不需要包圍內容，可省略結尾標籤。
html 註解的語法
html 的註解表示法，與 XML 相同，以 <!-- 作起始及 --> 作結尾包圍內容，這個區段的內容，瀏覽器會忽略不執行。但注意不能僅包圍屬性會產生錯誤，須包圍整個標籤，或非標籤內容。
例如：
<!--end of #main-->
<!-- <object type="application/x-shockwave-flash"> -->其它非正式的註解語法
會被忽略的空白 (white space)
在 html 文件原始碼內，連續輸入一個以上空白字元 (white space characters) ，如半形 space 、 enter 或 tab 等看不見的字元，預設的顯示方式是會被忽略的，實際只會執行或實現一個半形空白。而緊鄰著起始標籤後或結尾標籤前加入空白字元，瀏覽器呈現時會全部忽略。然而，要注意關鍵性的字詞，如元素名稱、屬性名稱等，名稱的中間斷行或空白是不允許的，因為很明顯地，意義會變得完全不同了 。