Day 2 用 WordPress 了解 HTML5 語意化標籤

第 12 屆 iThome 鐵人賽

DAY 2

自我挑戰組

WordPress 客製化從 0 開始系列第 2 篇

12th鐵人賽 wordpress html5 語意化標籤

Eric 桓桓

2020-09-03 23:58:54

2872 瀏覽

大家好，我是 Eric。
在開始學習當代網站開發時，必須先瞭解，當代的網站開發，
是以 HTML(5)+CSS(3)+JavaScript(ES5/ES6) 為主軸。
若以身體來比喻的話，HTML 代表著網站的骨架，
CSS 則是肌肉 (外貌)，
JavaScript 則是神經（互動與反應）。

這次的系列文章，將以 WordPress 的架構，
了解 HTML 的基本框架。

網頁是怎麼產生的

當你輸入網址後，瀏覽器會從伺服器下載一份檔案，
這個檔案所使用的，就是名為 HTML 的文字格式。
HTML，全名為 HyperText Markup Language，
直譯就是「超文字標記語言」。
「標記語言」代表這些語句本身並非一般程式可以直接作用，
而是透過其他程式（瀏覽器）讀取後，
轉譯 (render) 成我們看到的樣貌。
也因為不同瀏覽器對於同樣的語句會有不同的解讀方式，
因此才會出現「瀏覽器相容」的問題。

HTML 的基本句法

HTML 的每個標記 (tag)，通常都會包含成對的兩個部分，
來告訴瀏覽器這個區塊的內容為何：

開頭，如：<html>
結尾，如：</html>

但某些標記則並不會成對，例如圖片的 <img>、斷行的 <br /> 與水平線 <hr /> 等。

那跟 WordPress 有什麼關係？

既然 WordPress 會產生網頁，就代表它也會產生符合 HTML 格式的內容。
事實上，WordPress 佈景主題的基本運作方式，
即是藉由將網站的各項元素模組化 (例如 header、content、footer、sidebar)，
將頁面分割為不同元素後，根據使用者的瀏覽情境，決定如何將這些元素重新組合。

我們以 WordPress 預設的佈景主題〈Twenty Twenty〉中的 header.php 檔為例，
在打開這份檔案後，你會看到如下的內容

<?php
/**
 * Header file for the Twenty Twenty WordPress default theme.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since 1.0.0
 */

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

	<head>

		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" >

		<link rel="profile" href="https://gmpg.org/xfn/11">

		<?php wp_head(); ?>

	</head>
    <body <?php body_class(); ?>>

姑且先忽略 PHP 的內容，我們可以看到 WordPress 在網頁載入後，
首先宣告了 <!DOCTYPE html>，表示這份文件必須以 HTML5 的方式來轉譯，
而 <head> 與 </head> 之間，則記錄了這個頁面的中繼資料。
緊接著，<body> 來了，代表這個頁面的內容正式開始。

從這裡開始，WordPress 的佈景主題開始根據不同區塊的需求，
引入不同的模組，而在最後引入的 footer.php 中的末三行中，
我們則可以看到作為結尾的 </body> 與 </html> 標記。

<?php wp_footer(); ?>

	</body>
</html>

什麼是語意化標籤 (semantic tags)？

HTML 發展至第五版後，開始出現了更多語意化標籤，
讓瀏覽器不僅了解區塊的位置，更能透過標籤來協助瀏覽器了解區塊中包含哪些內容。
這邊我們就以佈景主題 Twenty Twenty 中出現的標籤做說明。

特別注意：儘管語意化標籤可以透過 CSS 來修改樣式，但直接針對 header、footer、nav ... 等幾種 HTML5 後才出現的語意化標籤，這種做法還是有機會造成未預期的結果。

header

我們可以在 header.php 中看到 <header> 這個標籤，代表的是「特定區塊」的標題。
因此，除了在頁首可以看到 <header> 之外，
你也可以在 <section> 中加入 <header>。

//header.php Line 27
<body <?php body_class(); ?>>

		<?php
		wp_body_open();
		?>

		<header id="site-header" class="header-footer-group" role="banner">

main

透過 <main>，我們向瀏覽器宣告我們會將頁面的主要內容放入這個區塊中。

//index.php Line 17
<main id="site-content" role="main">

	<?php

	$archive_title    = '';

與 <main> 相對的，是 <aside>。

aside

通常 <aside> 泛用於所有不是主要內容的區塊，
以 WordPress 為例，小工具 (widget) 與資訊欄位 (sidebar) 就會使用 <aside> 包覆。

//template-parts/footer-menus-widgets.php Line 89
<aside class="footer-widgets-outer-wrapper" role="complementary">

	<div class="footer-widgets-wrapper">

		<?php if ( $has_sidebar_1 ) { ?>

			<div class="footer-widgets column-one grid-item">
				<?php dynamic_sidebar( 'sidebar-1' ); ?>
			</div>

		<?php } ?>

		<?php if ( $has_sidebar_2 ) { ?>

			<div class="footer-widgets column-two grid-item">
				<?php dynamic_sidebar( 'sidebar-2' ); ?>
			</div>

		<?php } ?>

	</div><!-- .footer-widgets-wrapper -->

</aside><!-- .footer-widgets-outer-wrapper -->

nav

常見於選單中，代表其包覆的內容是作為網站導覽用。
一般可能會包覆於 <header> 或 <footer> 之中。

footer

頁面的頁尾，如同 <header> 在 header.php 檔案中，
通常 <footer> 也會放在 footer.php 裡。

article vs. section

這兩者算是不容易用好的語意標籤。
因為根據頁面的脈絡，<article> 與 <section> 都可以將對方包覆於其中。
這邊引用 MDN 的範例來說明，最外層的 <article> 代表的是這篇文章的獨立內容，
而其中使用 <section> 將內文區分為兩個區段 Main Review 與 User Reviews，
由於使用者評論是個別獨立的內容，因此在 User Reviews 這個區段中，
又再放置若干獨立的 <article> 代表評論：

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

仔細觀察會發現，<section> 這個標籤，預設不存在於〈Twenty Twenty〉的樣版中，
這是因為佈景主題通常只會將 [文章] 或 [頁面] 的內容載入預先寫好的樣版，
因此在樣版階級其實沒有將 <section> 獨立出來的必要。

總結

今天簡短的說明了網頁是如何產生，而這又與當代網站開發有哪些關係，
接著透過〈Twenty Twenty〉這個佈景主題，
來說明 WordPress 中所使用與頁面架構有關的語意化標籤。
其中需要注意的是，語意化標籤在使用上其實還是有規範的，
譬如 <header> 不能包覆 <footer>，反之亦然。
這種違規狀況，有可能會使瀏覽器判斷出錯。
舉個生活的例子，「我今天吃了一頓午餐」，
如果改成「我一頓今天吃了午餐」，儘管我們仍能勉強了解它的意思，
但實際上我們是將「一頓」從句子中刪除掉之後，
再去理解這整句話的意思。

下次，我們會再介紹與「內容」有關的語意化標籤。