HTML最佳實踐可幫助開發人員提供創新且高度互動的網站和Web應用程式。這些最佳實踐可幫助您開發功能最豐富且以業務為中心的應用程式。此外，組織可以利用這些最佳實踐來提供無縫的使用者體驗。
今天，當我們談論HTML時，我們通常會討論HTML5。 HTML5是一種強大的標記語言，允許Web開發人員建立Web文件。它易於使用和理解，幾乎所有瀏覽器都支援它。此外，它是幾乎所有內容管理系統 (CMS) 的基礎。
作為經驗最少的Web開發人員，諸如“我如何編寫更好的HTML？”之類的問題。經常出現。本文旨在幫助您從正確的角度開始。
通用HTML編碼方法
您可能已經掌握了這種標記語言，但這裡有一些HTML5最佳實踐，可以讓您更好地編寫程式碼。
總是宣告一個文件型別
建立HTML文件時， DOCTYPE宣告來通知瀏覽器您使用的標準。其目的是正確呈現您的標記。例如：
| 版本 | 文件型別宣告 |
|---|---|
| HTML 4.01 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| XHTML 1.1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| HTML5 | <!DOCTYPE html> |
<DOCTYPE>宣告應位於HTML文件的第一行。以下是其正確和錯誤寫法的比較：
| 最佳實踐 | 不良做法 |
|---|---|
|
|
或者，您可以使用與您要使用的HTML/XHTML版本相對應的文件型別。瞭解推薦的doctype宣告列表，以幫助您選擇正確的宣告。
HTML標籤放置
開發人員知道標籤的目的是幫助Web瀏覽器區分HTML內容和普通內容。 HTML標籤包含開始標籤、內容和結束標籤。然而，他們經常對標籤的正確放置、需要結束標籤的元素或何時省略標籤感到困惑。
例如，放置<script>標籤的最佳位置在哪裡？
指令碼標籤通常放置在<head>元素內。但是現代HTML最佳實踐是將它們放在文件底部，而不是在關閉<body>標記之前，以延遲它們的下載。網頁將首先載入文件物件模型 (DOM)，將其顯示給使用者，然後再請求指令碼，從而減少到第一個位元組 (TTFB) 的時間。
瀏覽器從上到下逐行解釋您的HTML文件。因此，當它讀取頭部並遇到指令碼標記時，它會向伺服器發出請求以獲取檔案。這個過程本身沒有什麼問題，但是如果頁面載入一個巨大的檔案，它會花費很長時間並且極大地影響使用者體驗。
根元素
在根元素下是<lang>或language屬性。此屬性有助於將HTML文件翻譯成正確的語言。最佳做法是使該屬性的值儘可能短。
例如，在日本主要使用日語。因此，定位到日語時不需要國家/地區程式碼。
| 最佳實踐 | 不良做法 |
|---|---|
<html lang="ja"> |
<html lang="ja-JP"> |
HTML中的注意事項
最常見的HTML最佳實踐之一是檢查該做什麼和不該做什麼。以下是HTML編碼中一些已知的禁忌：
| 描述 | 良好做法 | 不良做法 |
|---|---|---|
| 在文字中，使用Unicode字元的等效HTML程式碼而不是字元本身。 | <p>Copyright © 2021 W3C<sup>®</sup></p> |
<p>Copyright © 2021 W3C<sup>®</sup></p> |
| 消除標籤和屬性值周圍的空白。 | <h1>HTML5 Best Practices</h1> |
<h1 > HTML5 Best Practices </h1> |
| 練習一致性並避免混合字元大小寫。 | <a href="#status">Status</a> |
<a HREF="#status">Status</a> |
| 不要用兩個或多個空格分隔屬性。 | <input type="text" name="LastName"> |
<input type="text" name="LastName"> |
把事情簡單化
與任何編碼實踐一樣，“保持簡單”原則非常適用於HTML和HTML5。通常，HTML5與舊的HTML版本和XHTML相容。因此，我們建議避免使用XML宣告或屬性。
例如：
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <!DOCTYPE html>
除非您想編寫XHTML文件，否則您不需要這樣宣告程式碼。同樣，您不需要XML屬性，例如：
<p lang="en" xml:lang="en">...</p>
考慮到SEO的程式碼
開發人員應該考慮到SEO編碼。未找到的Web內容也不會編入索引。出於這個原因，以下是一些需要考慮的SEO最佳實踐：
新增有意義的後設資料
<base>標籤是一個方便的標籤，但濫用它可能會導致一些不直觀的行為。因此，如果你宣告瞭一個基本標籤，那麼文件中的每個連結都將是相對的，除非明確指定：
<base href="https://www.wbolt.com/tw/" />
此語法更改了某些連結的預設行為。例如，連結到只有頁面名稱和副檔名的外部網頁：
href="coding.org"
或者瀏覽器會將其解釋為：
href="https://www.wbolt.com/tw/coding.org"
這種解釋變得混亂，因此始終為連結使用絕對路徑更安全。
另一方面，編寫元標記描述嚴格來說並不是HTML最佳實踐的一部分，但它仍然同樣重要。 <meta name="description">屬性是搜尋引擎爬蟲在索引您的頁面時引用的屬性，因此它對您的SEO健康至關重要。
設定適當的標題標籤
<title>標籤使網頁搜尋引擎友好。 <title>標籤內的文字出現在Google的搜尋引擎結果頁面 (SERP) 和使用者的Web瀏覽器欄和選項卡中。
例如，當您搜尋關鍵字“HTML5”時。此搜尋結果中的標題表示特定的標題屬性和作者。這在SEO和網站流量生成中非常重要。
影象必須有Alt屬性
對<img>元素使用有意義的alt屬性是編寫有效和語義程式碼的必要條件。在下表中，不良做法列顯示了一個沒有alt屬性<img>儘管同一列中的第二個示例具有alt屬性，但其值沒有意義。
良好做法
<img id="logo" src="images/wbolt_logo.png" alt ="wbolt logo" />
不良做法
<img id="logo" src= "images/wbolt_logo.png " /> < img id="logo" src="images/wbolt_logo.png" alt="wbolt_logo.png" />
描述性元屬性
元描述是一個HTML元素，用於描述和總結網頁的內容。它的目的是讓使用者找到頁面的上下文。儘管後設資料不再對SEO排名有幫助，但元描述在頁面SEO中仍然起著重要作用。
這是一個示例程式碼，其中包括關鍵字、描述、作者姓名和字符集。字符集用於支援幾乎所有來自不同語言的字元和符號。另一方面，您可以設定cookie、新增修訂日期並允許頁面重新整理。
<!DOCTYPE html>
<html>
<head>
<title>HTML Best Practices in Website Design</title>
<meta name = "keywords" content = "HTML, Website Design, HTML Best Practices" />
<meta name = "description" content = "Learn about HTML best practices." />
<meta name = "author" content = "John Doe" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Let's learn how to code HTML5!</p>
</body>
</html>
帶有連結的標題屬性
在錨元素中，最佳實踐是使用標題屬性來提高可訪問性。 title屬性增加了錨標籤的含義。 <a>標籤（或錨元素）與其href屬性配對，建立指向網頁、電子郵件地址和檔案的超連結。它用於連結同一頁面內的位置或外部地址。
檢查不良實踐列下的示例 – 它是多餘的。如果使用者使用螢幕閱讀器閱讀錨標記並向聽眾閱讀相同的文字兩次，則這種型別的做法很明顯。螢幕閱讀器是一種輔助技術，提供給視障人士或有學習障礙的人士。作為一種很好的做法，如果您只是重複錨點的文字，那麼最好根本不要使用標題。
| 良好做法 | 不良做法 |
|---|---|
<a href="https://www.wbolt.com/tw/themes" title="瞭解我們的主題.">點選這裡</a> |
<a href="https://www.wbolt.com/tw/themes" title="點選這裡">點選這裡</a> |
HTML程式碼佈局最佳實踐
網站開發不僅僅是建立一段文字和標題、 連結頁面，您就完成了。有一些HTML中的最佳實踐需要考慮以充分利用您的網站。
設定適當的文件結構
HTML文件在沒有主要元素的情況下仍然可以工作： <html> 、 <head>和<body> 。但是，如果缺少這些元素，頁面可能無法正確呈現。為此，始終如一地使用適當的文件結構很重要。
分組相關部分
對於內容的主題分組，請使用section元素。根據W3C規範， <section>應包含標題（H1、H2 等）。一些開發人員完全跳過標題元素的使用，但我們建議將其包含在內以更好地使用螢幕閱讀器：
良好做法
<section> <h1>HTML Best Practices 2021</h1> <ul> <li><img src="img1.jpg" alt="description"></li> <li><img src="img2.jpg" alt="description"></li> </ul> </section>
不良做法
<section> <ul> <li><img src="img1.jpg" alt="description"></li> <li><img src="img2.jpg" alt="description"></li> </ul> </section>
嵌入式內容最佳實踐
<embed>標籤用作外部資源的容器。這包括網頁、圖片、視訊或外掛。但是，您必須考慮到大多數瀏覽器不再支援Java Applet和外掛。更重要的是，任何瀏覽器都不再支援ActiveX控制元件，現代瀏覽器也關閉了對Shockwave Flash的支援。
我們推薦以下內容：
- 對於圖片，使用
<img>標籤。 - 對於從其他站點提取的 HTML，請使用
<iframe>標記。 - 對於視訊或音訊，使用
<video>和<audio>標籤。
<img>元素中的 alt 屬性提供了對搜尋引擎和螢幕閱讀器有用的影象描述。當無法處理影象時，它對使用者特別方便：
| 良好做法 | 不良做法 |
|---|---|
<img alt="HTML Best Practices" src="/img/logo.png"> |
<img src="/img/logo.png"> |
如果有補充文字來解釋影象，請將alt屬性留空。這是為了避免冗餘：
| 良好做法 | 不良做法 |
|---|---|
<img alt="" src="/img/icon/warning.png"> Warning |
<img alt="Warning Sign" src="/img/icon/warning.png"> Warning |
<iframe>元素的內容有一些限制，則將其留空。空的iframe元素總是安全的：
良好做法
< iframe src="/default.html"> </iframe >
不良做法
<iframe src="/default.html"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> </iframe>
<audio>或<video>元素提供後備內容或備份連結，就像處理影象一樣。需要回退內容，特別是對於HTML中新引入的元素：
良好做法
<video> <source src="/mov/theme.mp4" type="video/mp4"> <source src="/mov/theme.ogv" type="video/ogg">... <iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe> </video>
不良做法
<video> <source src="/mov/theme.mp4" type="video/mp4"> <source src="/mov/theme.ogv" type="video/ogg">...</video>
減少元素數量
HTML文件變得複雜，尤其是對於包含大量內容的網頁。最好將頁面上的元素數量減少到您可以管理的數量。瞭解如何明智地使用標題元素並遵循<h1>到<h6>元素如何表示HTML的內容層次結構。這使您的內容對您的讀者、螢幕閱讀軟體和搜尋引擎更有意義。
例子：
<h1>The topmost heading</h1> <h2>This is a subheading that follows the topmost heading.</h2> <h3>This is a subheading that follows the h2 heading.</h3> <h4>This is a subheading that follows the h3 heading.</h4> <h5>This is a subheading that follows the h4 heading.</h5> <h6>This is a subheading that follows the h5 heading.</h6>
對於WordPress開發人員和內容建立者，請使用<h1>元素作為部落格文章的標題而不是站點名稱。這有助於搜尋引擎抓取，並且這種方法對SEO友好。
此外，使用正確的HTML元素傳達其包含的資訊，以實現語義和有意義的內容結構。例如，使用<em>表示強調，<strong>表示重強調，而不是它們的前輩<i>或<b> ，它們現在已被棄用。
例子：
<em>emphasized text</em> <strong>strongly emphasized text</strong>
同樣重要的是，將<p>用於段落，並避免使用<br />在段落之間新增新行。相反，利用 CSS 邊距和/或填充屬性來更好地定位您的內容。有時，您可能會發現自己很想將<blockquote>標籤用於縮排。避免這個陷阱——在引用文字時專門使用它。
佈局中的注意事項
最好的HTML最佳實踐之一是在頁面佈局中使用語義適當的元素。幾個元素將幫助您按部分組織布局。
由於HTML佈局下的主題廣泛，最好快速突出佈局中的注意事項。例如，HTML賦予頁首和頁尾元素更多的語義含義，所以不要忽視<header>標籤的使用，因為它在任何給定的部分或文章中都使用過。除了控制<title>和<meta>標籤以及文件的其他樣式元素之外，它還用於標題、釋出日期和頁面或部分的其他介紹性內容。同樣，您可以摒棄頁尾僅屬於版權部分的觀念——現在，您幾乎可以在任何地方使用它。
對於<nav>元素，您應該將其用於站點範圍的導航。不需要宣告角色，因為標籤中已經隱含了用法。
| 良好做法 | 不良做法 |
|---|---|
<nav></nav> |
<nav role="navigation"></nav> |
至於<main>元素，它已經是最新HTML5版本的一部分，它表示文件正文的主要內容。因此，當我們的主要內容有更具體的標籤時，就不再需要使用<div>
| 良好做法 | 不良做法 |
|---|---|
<main id="content"></main> |
<div id="content"></div> |
<article>用於內容塊。它是獨立的，無需進一步解釋就有意義，而<section>標籤用於將頁面劃分為不同的主題區域或對單個文章進行分割槽。不幸的是，許多開發人員仍然交替使用這兩者。
考慮到<section>標籤是比<article>標籤更通用的標籤。這意味著前者表示與手頭主題相關的內容，但不一定是獨立的。相反，後者是一個獨立的屬性。
但是當沒有適合您的目的的標記標籤時，您應該使用什麼？答案是當沒有其他元素起作用或者它是一個特定的風格元素時<div>就我們的目的而言，使用<div>也是一種不好的做法。
讓我們回到<section>標籤，它是一個語義標記標籤。這不是一種風格，重要的是要強調它。實際上，良好的編碼實踐應該包括標題標籤。
<section>的注意事項表明您不應該使用它來標記包裝器、容器或任何其他純粹的風格塊。 <section>標籤的糟糕編碼實踐的例子：
<section id="wrapper">
<section class="container-fluid">
<div id="main">
</div>
</section>
</section>
這是一個更好的方法，但它過度使用了<div>標籤：
<div id="wrapper">
<div class="container-fluid">
<div id="main">
</div>
</div>
</div>
因此，更好的編碼實踐是：
<body id="wrapper">
<div class="container-fluid">
<main id="main">
</main>
</div>
</body>
許多佈局中一個流行的部分是用於資料表示的<figure>元素主要用於圖片。但是，它具有更廣泛的可能用途，因為與文件相關的任何內容都可以放置在任何位置幷包裝在<figure>元素中。一些示例包括書中的插圖、表格或圖表。
<figure>是一個有趣特性,它不影響文件的大綱。因此，您可以使用它對具有共同主題的元素進行分組——例如，多個影象具有一個共同的<figcaption> ，甚至是一段程式碼。
<figure>對元素進行分組時，請使用<figcaption> 。 <figcaption>標題應該直接在開始的<figure>標籤之後，或者直接在結束的</figure>標籤之前：
<figure> <img src="image1.jpg" alt="Bird Image"> <img src="image2.jpg" alt="Tree Image"> <img src="image3.jpg" alt="Sun Image"> <figcaption>Three images related to a topic</figcaption> </figure>
HTML指令碼編寫最佳實踐
HTML是Web開發中的核心技術之一。它具有強大的功能和功能，深受開發人員和企業主的歡迎。前端開發不斷創新，為了跟上它，開發人員應該瞭解HTML指令碼編寫的最佳實踐。
使用外部樣式表
內聯樣式會使您的程式碼混亂且不可讀。為此，始終連結到並使用外部樣式表。此外，避免在CSS檔案中使用import語句，因為它們會產生額外的伺服器請求。
內聯CSS和JavaScript也是如此。除了可讀性問題之外，這會使您的文件變得更重且更難以維護，因此您可以避免內聯程式碼。
使用小寫標記
在程式碼中使用小寫字元是行業標準做法。儘管使用大寫或其他文字大小寫仍會呈現您的頁面，但問題不在於標準化，而在於程式碼可讀性。
程式碼可讀性是編碼的一個重要方面，因為它有助於使應用程式可維護和安全。不僅如此，Web開發主要由一個團隊組成。使您的程式碼可讀可以使您的工作和您的團隊的工作不那麼複雜。
良好做法
<div id="test"> <img src="images/sample.jpg" alt="sample" /> <a href="#" title="test">test</a> <p>some sample text </p> </div>
不良做法
<DIV> <IMG SRC="images/sample.jpg" alt="sample"/> <A HREF="#" TITLE="TEST">test</A> <P>some sample text</P> </DIV>
指令碼中的注意事項
雖然在編寫HTML時有很多禁忌，但我們將分享指令碼中的兩個基本禁忌：
- 編寫縮排且格式一致的程式碼：乾淨且編寫良好的程式碼可提高您網站的可讀性，這對您的開發人員和可能使用該網站的其他人來說是一個巨大的幫助。它還顯示出極大的專業精神和對細節的關注，很好地反映了您作為開發人員的態度。
- 避免包含過多的註釋：註釋是必不可少的，可以使您的程式碼更易於理解。但是，HTML語法非常易於解釋，因此除非您必須闡明語義和命名約定，否則不需要註釋。
驗證和最小化程式碼
驗證和最小化程式碼用於儘早識別錯誤。不要等到你完成你的HTML文件——養成經常驗證和識別錯誤的習慣。您可以手動進行驗證，也可以使用任何已知的驗證器工具，例如W3C標記驗證器。
同時，通過刪除任何不重要的東西（例如註釋或空格）來練習縮小。確保編寫乾淨簡潔的程式碼以減小HTML檔案的大小。您可以使用HTML Minifier等工具。
小結
許多2021年的HTML5最佳實踐資源可線上獲取以幫助您。但是，請記住編碼的一般規則：一致性。本文提供了基本見解，希望起到拋磚引玉的作用，幫助您開啟前端開發之旅。使用本指南，您將很快成為語義正確的HTML5專家。
當您準備好時，超越HTML所能提供的範圍，並探索一些用於構建現代單頁Web應用程式的開源HTML框架。它們在資料和UI之間提供出色的同步，並與CSS和JavaScript無縫協作。
評論留言