HTML設計原則

網頁架構

  • 全域導覽
    • 寬選單 Flat Menus
    • 網站地圖頁尾 Sitemap Footer
<html lang="en"> <!-- 別忘了指定語言 -->
<body>
  <header>
    <h1>Scotch.io Shop</h1>
  </header>
  <main>
    <article>
      <h2>標題 An inside look at the new Scotch Shop v2</h2>
      <p>段落.</p>
    </article>
  </main>
  <footer>
    <p>© Scotch Shop Inc.</p>
  </footer>
</body>

影像

  • 別忘了使用ATL為圖檔增加說明
<img src="./cat.png' alt="A cat sitting on a chair">

表單設計 FORM

記得使用 label 與 for 來讓欄位有意義。

<form>
  <label for="username">Username</label>
  <input type="text" name="username" id="username">
  <label for="email">Email</label>
  <input type="email" name="email" id="email">
</form>