HTML5: An Introduction
語意元素.網頁意涵資訊.瀏覽器相容性
網站/網群開發語言的最新趨勢
工具篇介述各種網站和網路社群的開發工具，分為語言層次和軟體層次工具。語言層次工具通常又包括3類：HTML，CSS，DOM/Java。歷史上 HTML 4.01與XHTML 1.0--後者是加入了XML的功能，曾扮演重要角色，而扮演「斷代」的、則是當前的版本 HTML 5.* 版。
在軟體層次的各種編輯器方面，當前為配合微軟教學上的優勢，本系列將講述微軟的網站開發軟體 Expression Web，並兼及前代的 SharePoint Designer 與 FrontPage。
HTML 5/ HTML 5.* 技術與思想的發展與未來
最新發展中的是HTML 5 版，於2014年底完成 HTML 5.0，雖然已公佈新版命令與規範，但持續進化，在2016完成 HTML 5.1 「推薦版 Recommendation」，同時，已在 2017 年推出 HTML 5.2「試用版 Working Draft」與 HTML 5.2「解說版 Editor’s Draft」。
HTML 5.* 版的演化，有相當比例在處理跨平臺網站--一般稱為「回應式網站 Responsive Web」（或直譯「響應式網站」）的需求，其成果就是「輕量網站 light webs」，其實在設計基本思想上與「內容網站」有所不同。
為簡化文字敘述、與減少溝通障礙，本系列對各 HTML 5.* 版的解說，均簡化為 HTML5。
HTML 5 將原始的 HTML 由「編輯」層次命令，進化為一般的高階形式的程式命令。
其中多屬技術層次的改變，屬於演化性的發展，但新增語意元素 Semantic Elements 、網頁意涵資訊 Microdata、則是具有創新性質的「思想」轉變。而使用 HTML 5 開發網站，宜注意瀏覽器相容性。
廣義的 HTML 5 ，其內涵將從當前的3類工具發展為6類：
HTML5：整合標誌語言/完整高階語言
修訂當前語言，並發展與以下 Semantic Elements 結合的 Microdata。
HTML5 Multimedia：多媒體應用
當前各媒體播放器與各瀏覽器的配合，是最容易出問題的項目，這個部分最受期待。
HTML5 Graphics：繪圖能力
將提供<canvas>畫布命令，及提供向量繪圖svg檔案能力。不過，預期效果大致相當SharePoint, Word能力，不可能取代專業繪圖軟體。
HTML5 Applications：應用程式發展
Semantic Elements/ HTML5 Forms：
語意元素與動態表單‧意涵式標籤命名
Semantic Elements/ HTML5 Forms：直譯為語意元素與動態表單。前者實則為建立：網頁平面結構設計定義、簡化網頁範本設計的能力、增加程式碼的可讀性。
譬如：當前是在網頁上以<div></div>設定若干個區域，然後使用個人化命名，1個叫<div id="nav"></div>，作為導覽區，1個叫<div id="article"></div>，作為主文區…，再把規畫好的區域，存為「範本」。
但 HTML5 直接發展各種 Semantic Elements，如<nav>, <article>…命令，界定區域內用途。
在「Web 結構_網頁平面設計：CSS法」一文中，將示範語意元素‧意涵式標籤的應用。
HTML5 的思想創新轉變
HTML5 的其他幾類改變，都是技術層次的改變，屬於演化性的發展，而本類工具則是具有創新性質的「思想」轉變。
根據「TX知識美學3論」，任何創意的「統一元素」有2：結構與意涵。
HTML（以及其他各種標籤語言）過去長期都是以「結構式」命名，譬如以 <div></div> 表示區域等。
而HTML5 改為以「意涵式」標籤命令命名，譬如以 <article></article> 表示文章等。
HTML5 Forms 就是以「意涵式」元素建立互動網頁、互動表單的能力。
HTML 5 也追求簡化，譬如文件宣告，已簡化為<!DOCTYPE HTML>。
HTML5 的「瀏覽器相容性」測試網站
由於 HTML5 尚在發展中，採用 HTML5 開發的網站與各瀏覽器的相容性為何？HTML5 有一個測試網站如下：
http://html5test.com/index.html
點選以上連結，即可獲得一個相容分數。
Microdata 網頁意涵資訊
Microdata 直譯為「微資料」，但其目的是要提供「豐富的資料」，譯名正好和它追求「達意」的目的相反，故統雄老師建議譯為「網頁意涵資訊」。
Microdata 是由各搜尋引擎合作組成的 Schema.org ，支持 Html5 標準下的發展語法。
亦即 CSS 中的屬性(property)與值(value)，也採用意涵式命名，譬如對一部電影預告篇的簡介如下：
程式碼 |
說明 |
| <div itemscope itemtype ="http://schema.org/Movie"> | 採用schema.org 所定義的Movie |
| <h1 itemprop="name">片名</h1> | itemprop 屬性其值為片名 |
| <span>Director: <span itemprop="director">導演名</span> | 同上 |
| <span itemprop="genre">類型</span> | 同上 |
| <a href="../movies/片名_預告片.html" itemprop="trailer">預告片</a> | 同上 |
| </div> |
這可使得搜尋引擎知道網頁資料的內容意涵為何，而可作進一步的服務應用。
CSS 層疊樣式表
Html 必須和 CSS 層疊樣式表 一起協同設計網頁。
目前為 CSS3 ：層疊樣式表第3版
網站開發的組織與專案企畫
HTML, xHTML : Function Tag 標註語言：功能命令精華篇
Cascading Style Sheets, CSS: Presentation
簡捷建站程序
