和 JAVAScript、css 相比，html 經過三十多年的發展，似乎逐漸走進無人問津的角落，如何才能讓 HTML 再次回到人們視野的中心。
作者 | Yaser Adel Mehraban
譯者 | 譚開朗，責編 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下為譯文：
有多少次，身為開發者的你編寫了一個HTML塊而沒有意識到可能編碼得并不理想?
1.為什么
HTML一直處于無人問津的角落，因為JavaScript和CSS總是吸引人們的注意力。
請在腦海里先保留這種印象，因為我要用一些簡單的技巧來發揮作用，讓HTML再次回到人們視野的中心。
以下是創建一目了然、可維護和可擴展的代碼的一些方法，其很好的應用了HTML5的語義標記元素，并將在支持的瀏覽器中正確呈現。
其緣由就不贅述了，讓我們來看看具體是什么吧。
2.文檔類型
在index.html的頂部位置，請確保聲明了DOCTYPE。這將在所有瀏覽器中激活標準模式，并告知瀏覽器該如何編譯文檔。請記住DOCTYPE不是HTML元素。
HTML5是這樣的：
<!DOCTYPE html>
注意:如果應用了框架，這已預先寫好。如果沒有，我強烈建議使用像Emmet這樣的代碼片段，它在VS代碼中可用。
想了解更多關于其他文檔類型的信息嗎?點擊這里查看參考文件：https://html.com/tags/doctype/。
3.可選標簽
有些標簽在HTML5中是可選的，主要是因為元素是隱式呈現的。信不信由你，你可以省略<html>標簽，而頁面呈現得也很好。
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>
上面是一個有效的HTML，但在某些情況下就不能這樣做了。例如標簽后面跟著注釋：
<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>
上面是無效的，因為注釋位于<thml>標簽之外，解析樹發生了更改。
4.結束標簽
應始終記得結束標簽，否則某些瀏覽器在呈現頁面時會出現問題。出于可讀性和其他原因，建議保留這些內容，稍后我會詳細介紹。
<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>
以上都是有效的標簽，但也有一些特例，如下。
自閉合標簽是有效的，但不是必需的。這些元素包括:
<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>
注意:普通元素永遠不能有自閉合標簽。
<title />
上面顯然是無效的。
5.字符集
預先定義字符集。最好是將它放在頂部元素中。
<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>
上面是無效的，標題無法正確呈現。正確寫法是將字符集移到頂部位置。
<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>
6.語言
不忽略可選標簽的另一個原因是在使用屬性時。在這種情況下，我們應該定義web頁面的語言，這對于可訪問性和搜索非常重要。
<html lang="fr-CA">
...
</html>
7.標題
永遠不要忽略標題標簽，否則可訪問性太差了。我個人就永遠不會使用這樣的網站,因為我剛打開它即刻在20多個頁面后就找不到了(瀏覽器選項卡不會有任何顯示)。
8.base標簽
這是一個非常有用的標簽，應該謹慎使用。它將設置應用程序的基本URL。一旦設置好，所有鏈接都將相對于這個基本URL，這可能會導致一些不必要的行為:
<base href="http://www.example.com/" />
通過以上設置，href="#internal"將被編譯為href=http://www.example.com/#internal?；蛘遠ref="example.org"將被編譯為href="http://www.example.com/example.org"。
9.描述
這個meta標簽非常有用，盡管嚴格來說它不是最佳寫法。但在搜索引擎時，這是超級有用的。
<meta name="description" content="HTML best practices">
這有一個帖子“搜索引擎優化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。
10.語義標簽
雖然可以使用div創建UX工程師的線框，但這并不意味著必須這樣做。語義HTML為頁面提供了意義，而不單純是內容顯示。像p、section、h{1-6}、main、nav等標簽都是語義標簽。如果使用p標簽，用戶將知道這表示一段文本，瀏覽器也知道如何展示它們。
語義HTML超出了本文的范圍。但是我們應該進行檢查，就好比寫作所用的筆，而我們有鼠標。
11.hr不應該用于格式化
<hr>不是格式化元素，所以不要用它來格式化內容。在HTML5中，這個標簽代表了內容的主題分離。正確的用法是這樣的:
<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head </p>
12.使用title屬性時要小心
title屬性是一個功能強大的工具，它可以幫助闡明頁面上元素的操作或目的，比如工具提示。但是，它不能與圖像上的alt等其他屬性互換。
HTML 5 規范道:
目前不鼓勵依賴title屬性，因為很多用戶代理不按照規范的訪問方式來暴露該屬性（例如，使用鼠標等設備來喚出提示框，而不包括只用鍵盤或觸控鍵盤的用戶，或者現代手機或平板電腦）。
請閱讀有關如何正確使用此屬性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。
13.單引號或雙引號
我見過的許多代碼庫，他們的標記中混合了這兩種形式。這并不好，特別是當你使用一個依賴于單引號的框架時，比如php，當你在一個句子中使用單引號時，就像我現在做的一樣。另一個原因是保持一致，這總是好的。不要這樣寫:
<img alt="super funny meme" src='/img/meme.jpg'>
而寫為：
<img alt="super funny meme" src="/img/meme.jpg">
14.省略布爾值
當涉及到屬性的布爾值時，建議省略，因為它們不添加任何值，還會增加標記的權重。
public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">
<!-- instead -->
<audio autoplay src="podcast.mp3">
15.省略類型屬性
不需要向scriptand樣式標簽添加type屬性。某些服務(如W3C的標記驗證工具)還會出現驗證錯誤。
16.驗證標記
可以使用W3C的標記驗證等服務以確保有效的標記。
17.拒絕內聯樣式
HTML中寫的是內容，其如何展示取決于樣式。將展示形式留給CSS吧，不要使用內聯樣式，這將有利于開發人員和瀏覽器理解你的標記。
18.總結
這些只是編寫標簽時要記住的冰山一角。還有很多很好的資源可以讓你深入了解，強烈建議你重復閱讀。
-
《GitHub HTML最佳實踐》：https://github.com/hail2u/html-best-practices
-
《W3C School HTML樣式指南》：https://www.w3schools.com/html/html5_syntax.asp
希望你喜歡本文，并能寫出優雅的標簽。
原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5
本文為 CSDN 翻譯，轉載請注明來源出處。
【END】
