「HowTo：元件」是一組網頁元件，可實作常見的 UI 模式。這些實作項目旨在做為教育資源。您可以詳閱不同元件的實作方式，並從中學習。請注意，這些並非 UI 程式庫，不應用於正式環境。
元件
<howto-checkbox>：代表表單中的布林值選項。最常見的核取方塊類型是雙重類型，可讓使用者在勾選和取消勾選這兩個選項之間切換。<howto-tabs>：將可見內容分隔成多個面板，藉此限制可見內容。<howto-tooltip>：當元素獲得鍵盤焦點或滑鼠懸停在元素上時，顯示與元素相關資訊的彈出式視窗。
目標
我們的目標是示範最佳做法，編寫出穩定、無障礙、高效能、可維護且易於設定樣式的元件。每個元件都完全獨立，因此可做為參考實作。
無障礙設定
這些元件嚴格遵循 WAI ARIA 編寫做法，這是一份說明及展示 ARIA (無障礙豐富網際網路應用程式標準) 的指南。如果您不熟悉 ARIA，請參閱 WebFundamentals 的簡介。每個元件都會連結至 Authoring Practices 的相關章節。雖然並非絕對必要，但建議您先閱讀「編寫做法」一節，再深入探討程式碼。
效能
在網頁開發中，「效能」一詞可套用至多種事物。在 <howto> 的情況下，效能主要是指動畫持續以 60fps 執行，即使在行動裝置上也是如此。
視覺彈性
除了版面配置或表示選取或啟用狀態外，元件盡可能不設定樣式。這樣一來，實作時就能保持視覺彈性，並聚焦於重點。不花時間裝飾，就能將程式碼限制在元件運作絕對必要的範圍內。如果元件需要任何樣式才能運作，該樣式會加上註解，說明原因。
可維護的程式碼
由於 HowTo: Components 是參考實作，我們花了額外時間撰寫可讀且易於理解的程式碼，並加上大量註解。
非目標
是程式庫/架構/工具包
<howto> 元件並未發布至 npm、bower 或任何其他平台，因為這些元件不適合用於實際工作環境。為了讓程式碼簡潔易讀，我們使用新式 JavaScript API，並支援實作 Web Components 標準的新式瀏覽器。閱讀這些實作方式後，您就能根據自己的需求調整程式碼。
回溯相容
請勿直接依賴程式碼。如果發現更好的實作方式，我們可能會 (而且很可能) 大幅變更任何元素的實作方式和 API。這項資源會持續更新，我們可以在這裡分享、探索及討論建構網頁 UI 的最佳做法。
完整
我們不會 (可能也不會) 實作 WAI ARIA 製作實務中可找到的「所有」元件。不過，只要重複使用其他 <howto> 元件採用的原則，讀者應該就能實作任何缺少的元件。