語義化 HTML(Semantic HTML)

全球資訊網協會(W3C)在 2014 年 10 月完成 HTML5 的制定，增加了許多 HTML 元素，這些元素方便我們從字面上就能了解每個區塊的用途，例如 header 是網頁頂部， footer 是網頁底部，而不是全部都使用 div 區塊，並且也能夠很好的讓搜尋引擎的爬蟲了解網頁的內容，提高在搜尋結果中的排名。

常用 HTML 元素

header: 頁首
nav: 導覽列，有各式連結，也可以在 header 中
main: 主要內容區塊，每頁應該只有一個 main 區塊
section: 一個大的區塊、章節，裡面可能會有多個 article
article: 一個獨立的小區塊，可以是一篇文章或是一個留言
figure: 一個獨立的內容，例如照片、圖表、表格、影片等，通常會使用 figcaption 來標記 figure 的說明
figcaption: 用來放置 figure 的描述，包含標題、說明等
aside: 側邊欄，補充的內容
footer: 頁腳，聯絡資訊、版權宣告、網站導覽

HTML 示範

    
<body>

<header>
    <h1>header 頁首</h1>
</header>

<nav>
    <h3>nav 導覽列</h3>
    <ul>
        <li><a href="#">連結一</a></li>
        <li><a href="#">連結二</a></li>
    </ul>
</nav>

<div class="content-wrapper">
    <main>
        <h2>main 主要內容區塊</h2>
        <section>
            <h3>section 區塊</h3>
            <article>
                <h3>article 文章</h3>
                <figure>
                    <h4>

                        figure 獨立的內容(圖片、圖表、程式碼)
                    </h4>
                </figure>
            </article>
            <article>
                <h3>article 文章</h3>

            </article>
        </section>

        <section>
            <h3>section 區塊</h3>
        </section>

    </main>

    <aside>
        <h3>aside 側邊欄</h3>
    </aside>
</div>
<footer>
    <h3>footer 頁腳</h3>
</footer>

</body>

CSS:

    
header, nav, main, section, article, aside, figure, footer {
    border: 2px dashed #000;
    margin: 10px;
    padding: 10px;
}

section {
    border-color: #ea0000;
}

figure {
    border-color: #88cc66;
}


.content-wrapper {
    display: flex;
}

main {
    flex: 1;
}

aside {
    flex: 0 0 200px;
}

圖片、表格

    
<figure>
    <img src="example.jpg" alt="範例圖片">
    <figcaption>這是一個範例圖片的說明文字。</figcaption>
</figure>

參考資料：
Wiki - HTML 5
mdn - HTML elements reference
w3schools - HTML Semantic Elements

Ruyut 鹿遊

搜尋此網誌

語義化 HTML(Semantic HTML)

常用 HTML 元素

HTML 示範

圖片、表格

留言

張貼留言