跳至主要内容

[HTML] semantic HTML

HTML elements reference @ MDN

The menu element @ MDN

在 HTML 中，<menu> 和 <ul> 都是 unordered list、有相同的瀏覽器預設樣式，但它們的語意不同。這兩者最大的差別在於 <ul> 中的 items 主要是用來呈現的資料，而 <menu> 中的 items 則多半是可以互動的。

下面這兩個功能是完全相同的，但使用 <menu> 更符合語意：

<!-- Menu: better -->
<menu>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</menu>

<!-- Ul: no function different with the above -->
<ul>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</ul>

Article, Section, and Div​

Intermediate HTML & CSS @ Frontend Masters

  • <article>：能夠獨立存在的內容，通常包含一個完整的故事，可能同時會包含 <header>、<footer>、<section>、headings 在內
  • <section>：相關的內容，無法獨立存在的相關資訊，通常會在 <article> 內，或 <article> 周遭出現
  • <div>：沒有任何故事主題的內容，單純只是要把不同的 elements 組織在一起

Main and Section​

main @ MDN

<main> 和 <section> 不同，<main> 表示的是該 <body> 中最主要/重要的內容，在 main 中會包含和該網站最直接相關的內容。

一個頁面中只會有一個 <main>，同時，那些會重複出現的內容，像是 sidebars, navigation links, copyright information, site logos 等等，也不應該被包含在 <main> 裡面。

Giscus