每當我訪問精美的網站，我都情不自禁地會去查看原始程式碼。這就好比你擁有一副X光眼鏡，能夠看見任何人──甚至透視他們的遮羞布。這簡直是天經地義的事情嘛！我迫不及待地想了解，這個精美的網站，是不是由同樣具有美感的程式碼所寫成，而或者只是金玉其外敗絮其中。代碼？美感？當然！歸根結蒂，代碼如詩。 （譯註：「Code is poetry」為著名部落格系統Wordpress的宣傳語。）這僅僅是最基礎的HTML 而已，自然不如其它動態語言般複雜而優雅，但它依舊保持了它的創造者所賦予的藝術筆觸。
這就讓我不禁開始思考，如何讓程式碼有美感？對HTML 而言，這一切都是手工活。讓我們看看標記語言如何達到具有美感的境界。
圖片有足夠大（譯註：2000x2000），你大可以把它打印出來並貼在你的個人儲物箱中，並讓你的朋友留下深刻印象。話說回來，這的確是個令人糾結的大小。我會放出PSD 原圖方便大家修改。
HTML5 - HTML5及其新元素帶來了前所未有的美感。
DOCTYPE - HTML5 擁有最佳的文件類型。
Indentation - 製表符與空格用於縮排程式碼，以正確顯示標籤之間的父子關係，並強調層級結構。
Charset - 在所有內容之前，必須在頭部進行字元集聲明。
Title - 網站標題簡單而清晰。首先表述該頁面的功能，在分隔符號之後，以網站標題結尾。
CSS - 只用了一個簡單的樣式表（媒體類型已在樣式表中聲明），並且僅面向於優良的瀏覽器。 IE6 及更低版本將取得通用的樣式表。
Body - 為主體賦予ID，便能在無需更多標記的情況下，為不同頁面設定獨有的樣式。
JavaScript - 從Google （Google）呼叫了jQuery（最具美感的JavaScript腳本庫）。僅載入了單一JavaScript 檔案。各腳本都在頁面底端進行引用。
File Path - 為提高效率，網站資源使用相對路徑。從適應轉載的角度考慮，內容性文件（如圖）則採取絕對路徑。
Image Attributes -圖片包含替換文字，主要是為圖片缺失情況而服務的，但同時也可用於驗證。為了提高渲染效率，圖片的寬度與高度最好也要說明。
Main Content First – 頁面的主要內容應在，基本的標示及導航之後，而在任何輔助內容（如：邊欄）之前。
Appropriate Descriptive Block-Level Elements – HEADER、NAV、SECTION、ARTICLE、ASIDE …這些新出現的“描述區段”，都將比從前的DIV 更好地描述內容。
Hierarchy – 大寫標題標籤將起到實效，並跟隨清晰的「層級結構」。
Appropriate Descriptive Tags – 根據不同的需要，清單被標記為：未排序、已排序，以及不常用的自訂清單。
Common Content Included – 在不同頁面上出現的相同內容，最好能從伺服器端包含到頁面中。 （無論透過任何對你行之有效的方式、語言、CMS，等等。）
Semantic Classes – 不僅需要設立正確的元素名稱，更應做到類別和ID 的命名符合語意：即使沒有特定說明，它們也能起到描述的作用。 （如“col”比“left”更好）
Classes – 當多個元素需要用到類似樣式的時候，盡量為它們定義相同的類別。 （重用性）
IDs – 當頁面中該元素僅出現一次的時候，盡量為它們定義ID ，而請勿為不同元素定義相同ID。
Dynamic Elements –動態效果僅在確實所需的時候加入。
Characters Encoded – 當出現特殊字元的時候，請注意字元編碼。
Free From Styling - 頁面上的一切無關樣式，甚至無需指明需要怎樣的樣式。頁面上的一切僅限以下三項：所需的網站資源、內容、描述。
Comments - 在查看程式碼的時候，那些並不需要特別強調，或不是格外明顯的內容，將會被納入評論。
Valid - 全站的標記符合W3C驗證。注意標籤閉合，保證必要屬性，避免廢棄方法，等等。
原文：http://css-tricks.com/what-beautiful-html-code-looks-like/
翻譯：http://horans.cn/what-beautiful-html-code-looks-like/