iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
1
Modern Web

~網頁入門~系列 第 15

Day15-HTML(11) – 語意化標籤與Layout

  • 分享至 

  • xImage
  •  

什麼是語意化標籤

為了讓標籤更具意義,並加強結構化,讓瀏覽器更清楚了解,HTML5 新增了語意化標籤(Semantic Elements),像是 <header><main><footer> …等。不同於以往只能用 <div> 標籤來劃分區塊,語意化標籤的出現,使得網頁中每個區塊的設計目的可以更清楚的表現

語意化標籤的優點有以下兩點 :

  1. 可以快速抓到網頁架構和每個區塊的位置
  2. 有助於SEO(Search Engine Optimization) 搜尋引擎最佳化

關於網頁SEO可參考 https://transbiz.com.tw/seo-guide/

網頁Layout

https://ithelp.ithome.com.tw/upload/images/20191001/20120959vIagcMRvV1.jpg

<header> 頁首標籤

網頁的頁首,通常放在頁面最上方,也是 <body> 的最上方內容。

我們可以在 <header> 標籤內加入style="position: fixed; top: 0;",把頁首固定在最上方,且與最上方間距為0。這樣即使滾動頁面,頁首還是會一直出現在畫面最上方不會消失,如下圖
https://ithelp.ithome.com.tw/upload/images/20191001/20120959Fv8MkTiVcj.jpg
https://ithelp.ithome.com.tw/upload/images/20191001/20120959OoCXQMwl0H.jpg

<nav> 導覽列

網站內的導航區塊,也可以放置在 <header> 裡面,像是主選單、下拉式選單。
https://ithelp.ithome.com.tw/upload/images/20191001/201209599oTa3WUCbB.jpg

<main>主要區塊

用來放置頁面主要資訊,每個頁面只能有一個 <main> 標籤

<section><article> 區塊或文章區塊

取代過去僅用 <div> 包起來的內容,兩者用法差不多,也都可以包住對方,但 <article> 主要用於包覆文章。

<section>
    <article>
        <h1>...</h1>
        <p>
            .....
        </p>
    </article>
    <article>
        ...
    </article>
</section>

或是

<article>
    <section>
        <h1>...</h1>
        <p>
            .....
        </p>
    </section>
    <section>
        ...
    </section>
</article>

<aside> 側欄

<aside> 可以放一些額外資訊,像是側邊欄、廣告、推薦文章…等,不一定是側邊位置才能使用。

<footer> 頁尾

頁尾的部分,使用方式跟 <header> 一樣,也可以透過加入style="position: fixed; bottom: 0; ",把頁尾固定在最下方。

圖片來源 :
https://www.w3schools.com/html/html_layout.asp
參考文章 : https://medium.com/@changru.studio/%E5%BF%AB%E9%80%9F%E4%BA%86%E8%A7%A3html%E8%AA%9E%E6%84%8F%E5%8C%96%E6%A8%99%E7%B1%A4-33dd8247d779


上一篇
Day14-HTML(10) - 表格
下一篇
Day16-HTML(12) – CSS盒子模式(上)
系列文
~網頁入門~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言