前言

說起HTML, 大家覺得它如何? 相比起JavaScript, HTML不是什麼programming language, 不能做出十分動態的效果, 但是正因它架構簡易的特性, 讓它能夠在各種瀏覽器演變下生存。從1991年8月6日世界第一個網頁誕生到現在, 它的架構一直沿用至今, 相比起Javascript跟SS, 並沒有太大的變化, 卻換來了強大的兼容性。

注意, 為了方便閱讀, 這篇的HTML通常是指HTML5, 因為現在很少情況要區分是否使用HTML5。

HTML的架構

從HTML字面上就能知道, HTML的全名是HyperText Markup Language, 是一個markup(標記) language, 想標示某個字串, 只要在它旁加上tag(標籤)即可, 例如要把字串"good"標示為重點, 可以在其旁邊加上<b></b>。

Today is a very good day.

Today is a very <b>good</b> day.

又例如要把整項字串"Today is a very good day."標示為段落, 只要在其旁邊加上<p></p>。

<p>Today is a very <b>good</b> day.</p>

這裡為什麼不說是加"粗體", 而是"重點"呢? HTML tag說的是semantic meaning(語義), 而非外表描述。外表描述是CSS要表述的事, 而非HTML。換句話說, 不同的瀏覽器對同一HTML tag可能會有不同的外表描述(CSS), 但是它們所指涉的語義都是同一個意思。那麼, 要如何統一瀏覽器的CSS呢? 這可以使用Normalize CSS, 但我就不詳細討論了。

HTML Tag的語義

HTML的語義有何用呢? 利用Javascript, 我可以控制整個頁面, 調用瀏覽器所提供的各種API; 利用CSS, 我可以修飾頁面的外表、顏色、字體大小等。HTML tag的語義看似沒什麼用途。

HTML tag的語義其實對人, 還是機器都要很大用途, 尤其是機器。

對人方面, 例如主頁的一個帖子, HTML可以這樣寫。

<article>
    <h4>Day 1: My first post</h4>
    <h6>September 04, 2021</h6>
    <img src="..."/>
    <p>This game is fun...</p>
</article>

這樣很清楚地描寫出這個Component的內容: 有大小標題, 內容等等。可是一旦換成了以下的HTML, 它的內容就比較難去理解了。

<div>
    <div>Day 1: My first post</div>
    <div>September 04, 2021</div>
    <img src="..."/>
    <div>This game is fun...</div>
</div>

雖然, 把可換的tag都換成了div, 內容是比較難去理解, 但有趣的是, 這並非是一無是處。看看Google大神的Google網頁是如何寫的? 什麼!? 為何大多都是div呢? 這裡就留下給讀者們分析了, 可以從"Uglify"這個關鍵詞入手。

至於機器方面, 說起Google, HTML Tag的語義在搜尋引擎也起了很多幫助呢! 例如網頁內的header tag (, , ...) 可以為搜尋結果提供標題, 這篇也介紹了不同的html如何幫助搜尋引擎產生搜尋索引。

HTML Tag對瀏覽器也有很多幫助, 例如, 在一般網頁中輸入登入密碼, 為何瀏覽器會提示我們是否要儲存密碼呢? 其實, 瀏覽器在背後也是在分析我們的html tag結構是否在描述登入的網頁, 例如

<form>
  <input type="text" name="username"/>
  <input type="password" name="password"/>
  <input type="submit"/>
</form>

結語

明天再說說Javascript