使用語意標籤(semantic elements),快速讀懂你的程式

一樣寫的出程式,但怎麼一眼區分你是不是新手,而有沒有使用semantic elements是很大的差別。能寫出程式是讓人雀躍的事情,但程式困難的地方不只是寫出來,後續的維護及溝通是很重要的一環,semantic elements是可以讓人快速讀懂你的程式的方法

semantic elements介紹

在HTML5之前,區塊只能用div編輯,一眼望過去全都是div組成的區塊,你很難一眼判別這個區塊是網頁的哪一個位置,而semantic elements可以快速抓到網頁的架構跟每個區塊的位置,還可以優化SEO搜尋,像是<header>、<nav>、<footer>等

呈現方式

HTML

    <header>開頭

        <nav class=”row”>導覽列 </nav>

    </header>

    <div class=”clear-fix”></div>

    <main class=”row”>

        <aside>

            我是側邊攔

        </aside>

        <article class=”star”>整篇文章開始

            <section>第一章包覆區塊

                <h2>第一章標題</h2>

                <p>第一章內文</p>

                <figure>我要包圖片</figure>

            </section>

            <section>第二章包覆區塊

                <h2>第二章標題</h2>

                <p>第二章內文</p>

                <article>專有名詞區塊

                    <section class=”introduction”>專有名詞第一章包覆區塊

                        <h2>專有名詞第一章標題</h2>

                        <p>專有名詞第一章內文</p>

                    </section>

                </article>

            </section>

        </article>

        <div class=”clear-fix”></div>

        <footer>我是頁尾</footer>

    </main>

CSS

<style>

        * {

            font-size: 20px;

            color: #fff;

            font-weight: 700;

        }

        header {

            height: 100px;

            background: red;

            border: 2px solid pink;

        }

        nav {

            width: 100px;

            height: 100px;

            float: right;

            background: green;

            border: 2px solid greenyellow;

        }

        .clear-fix {

            content: “”;

            display: table;

            clear: both;

        }

        article {

            background: grey;

            border: 1px solid black;

        }

        aside {

            float: left;

            background: grey;

            border: 1px solid black;

            height: 1300px;

            width: 30%;

        }

        .star {

            float: right;

            height: 1300px;

            width: 68%;

        }

        section {

            height: 600px;

            background: rgba(47, 0, 255, 0.274);

            border: 1px solid purple;

            width: 700px;

            margin: 20px;

        }

        figure {

            width: 500px;

            height: 200px;

            background: skyblue;

            border: 1px solid silver;

        }

        h2 {

            background: yellowgreen;

            border: 1px solid yellow;

        }

        p {

            height: 100px;

            background: chocolate;

            border: 1px solid sandybrown;

        }

        .introduction {

            margin: 10px;

            height: 300px;

            width: 400px;

        }

        footer {

            height: 100px;

            background: red;

            border: 2px solid pink;

        }

    </style>

程式執行結果

header頁首標籤

大多設置於網頁的開頭,網頁的頁首,通常放在頁面最上方。也有些會使用在<section>中,那就是在這個段落中的開頭部分

nav導覽列

使用在導覽網站的標籤,像是我們常常打開的主選單,下拉式的選單,頁尾所看到的一些選單

article區塊

用於包覆整篇文章的標籤,定義必須要有很高的獨立性跟完整性,即便脫離這個架構,也能自己完整的存在

section文章區塊

用於包覆文章內文中,一個專欄或者一個章節的區塊,要搭配heading(h1~h6)使用,以前要幫內文排版,只能使用div,但使用section之後,就可以讓div去負責完全無意義的區塊,而非包覆內文區塊

articlesection的區別

article是一個完整的文章,本身被分離出來,也不會影響整個架構跟閱讀性,而section更像是文章中的某一個章節,例如一個小說少了第二章直接跳第三章,你就看不懂這在寫什麼了

但由於標籤特性沒有明確的定義巢狀的規則,因此在實務上可以看到article包覆section或者section包覆article

從第一段描述認為應該是article包覆section,但如果以某個章節有個專業名詞解釋,而這篇解釋需要用到整篇文章來解釋,而將這篇獨立article包覆的文章貼於section包覆的內容中,但即便拿掉也不影響閱讀

※以上為個人淺見,有更明白的可以給予留言

aside側欄

一般這個區塊跟內文無關,通常是在左右兩側,增添廣告、分類、作者資訊、聯絡表單、推薦文章等之類的區塊,但不一定是要在側邊才能使用

footer頁尾

一個網頁的結尾,大多用於網站的連絡資訊,作者資訊,隱私權政策等。如果不是放在body,則可以表示為某個區塊的結尾,一篇段落的結尾,一個表格中的最後一行

figure

他是一個完整的區塊,是主要內容的一部分,通常用於包覆圖片、影音檔、圖表等,而且一個重要的定義在於,他是可以任意移動,且不影響整體內容的表達,所以並不是每張圖片都要包覆figure

nav 用於網頁的導覽列
header 一個區塊的標題或於網頁頭部
article具有獨立性的區塊,內容與擺放位置無關,通常用於整篇完整文章
section與上下文密切相關的區塊,通常用於章節
aside與周圍無關的區塊,其內容不影響主文,通常放廣告、分類、最新文章
footer放置區塊的底部或於網頁底部
figure放置與某些句子相關的圖片、影片、表格

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *