Skip to content

內容區

<body> 為網頁的內容區,凡是從瀏覽器中看到的影像、文字、動畫、影片,都是放在這個區域。

html
<body>
  ...
</body>

常用元素

HTML 文件中最基礎的元素使用,不論是大型網站或是小型網站都逃離不開這些常用的元素。好的元素定義可以讓瀏覽器、機器人更了解元素的內容,讓網頁排名加分。也能讓網頁的使用者瀏覽、閱讀時更容易找到重點。

標題段落換行列表清單超連結影像表格內置頁框區塊容器行內容器

語意化元素

語義化的結構標籤不僅可以使網頁結構更清晰、明確,還有助搜尋引擎的了解。基本上,網站就是由許多標籤所建立的文件架構。標籤語義化目的是為了讓標籤更具意義,以加強文件的結構化,讓搜尋引擎更清楚了解。舉例來說,一個網頁通常會有最基本的區塊像是頁首、內容和頁尾等。在 HTML5 之前只能通通用 <div> 標籤表示;之後便新增了語義化標籤像是 <header><main><footer> 等,可以更清楚表現網頁中每個區塊的設計目的。

主要文章頁首導覽章節頁尾側邊欄引用響應式影像

使用 HTML5 語義化標籤的優點如下

  • 可以快速抓到網頁架構和每個區塊的位置。
  • 正確寫法的語意化可以提高 SEO、語音瀏覽器、手機裝置的支援。
  • 不是給我們讀的,是給瀏覽器、爬蟲讀的,供裝置辨識的標籤。
  • 不用使用語意化寫法也寫得出網頁,但正確使用語意,讓瀏覽器能分辨出標題、內容、語氣、重要性。

表單元素

網路上常見的讓使用者自行輸入資料,並可將資料送出至遠端的伺服器。例如: 會員登入、購物車、留言板、部落格...等。

表單輸入說明下拉選單按鈕文字區域表單分組