2024/05/07

HTML5 網站設計秘訣大公開：掌握設計要點、常用標籤與技能！

HTML5 網站設計是什麼？有哪些元素？
HTML5 網站設計常用標籤
HTML5 網站設計要點
想成為前端網頁工程師？除了 HTML，還需具備這些技能！

如果你想要架設網站，一定要了解 HTML5 網站設計技術，它不僅提供豐富的元素和功能，還支援多平台的響應式設計（RWD）。不只網頁設計師和前端工程師必須具備 HTML5 網站設計技術，行銷人員也需要了解基礎知識，才能更好地與設計師和工程師溝通。

本文將介紹 HTML5 的基本元素、常用標籤、設計要點，並在最後分享前端網頁工程師的必備技能！

HTML5 網站設計是什麼？有哪些元素？

HTML5 是一種標準通用語言，為 HTML（HyperText Markup Language，超文本標記語言）的第五個版本，主要功能是將網頁的每個部分呈現給使用者。

現今的 HTML5 網頁設計的核心元素包括 HTML、CSS 和 JavaScript 三者，各自扮演不同的網頁架設角色。HTML 提供網頁結構並將靜態文字內容呈現給使用者，CSS 負責設計和排版，JavaScript 則用來呈現動態效果，或是讓使用者跟網頁進行互動。

在一般網頁架構中，HTML5 負責的是網頁的前端設計，後端則是由其它程式語言（如：Java ）與後端框架語言（Node.js）處理網頁資料的後台系統。

在現今所有的 HTML 網頁中，在 HTML 文檔第一行加上 <!DOCTYPE html> ，就能指示瀏覽器使用 HTML5 標準來解析文件。

HTML 語法具有通用性，也就是當我們在使用不同的裝置或瀏覽器瀏覽網頁時，網頁的呈現方式都不會受到影響，因此被大家認定為功能強大的網頁語言。由於 HTML5 的跨平台特性，它提供了響應式（RWD）網站更多的可能性，所以若想學會建立 RWD 網站，就必須學習 HTML5 的相關知識。

HTML5 網站設計常用標籤

接著，我們要使用一段語法範例來介紹幾種 HTML5 網站設計的常見標籤：

<header>
  <h1>網站標題</h1>
  <nav>
    <ul>
      <li><a href="#">首頁<</a>/li>
      <li><a href="#">關於我們<</a>/li>
    </ul>
  </nav>
</header>

<section>
  <h2>最新消息</h2>
  <article>
    <h3>標題1</h3>
    <p>內容1</p>
  </article>
  <article>
    <h3>標題2</h3>
    <p>內容2</p>
  </article>
</section>

<aside>
  <h2>相關連結</h2>
  <ul>
   <li><a href="#">連結1<</a>/li>
      <li><a href="#">連結2<</a>/li>
  </ul>
</aside>

<footer>
  <p>© 2024 網站名稱. All Rights Reserved.</p>
</footer>

上述這段語法所呈現出的樣子會是：

<header>
用 <header> 標籤定義網頁的頂部區塊。在這個範例中，<header> 包含了一個 h1 標題以及一個導航欄。導航欄的功用是類似網頁目錄，用來指引使用者點擊前往網站中的不同頁面。
<nav>
用 <nav> 標籤來定義導航欄。在這個範例中，<nav> 中的項目清單（<ul>）有「首頁」與「關於我們」這兩個項目，並分別帶有連到其他頁面的連結。
<section>
用 <section> 標籤來定義區塊。在這個範例中，「最新消息」、「標題 1」、「內容 1」、「標題 2」、「內容 2」一起構成了一個區塊。 <section> 主要用來定義有主題性的區塊，所以通常會用標題標籤（<h1> - <h6>）來描述區塊的作用。
<article>
用 <article> 標籤來定義獨立的內容單元。在這個範例中，「標題 1」和「內容1」組成了一個單元，「標題 2」和「內容 2」則組成了另一個單元。<article> 通常用來定義可以獨立存在或可以重複使用的內容，常被應用在雜誌、部落格文章、報紙文章等。

以下是 <section> 和 <article> 使用在網頁上的差異：

<aside>
用 <aside> 標籤來定義網頁的側邊欄。在這個範例中，<aside> 中的項目清單（<ul>）有「連結 1」與「連結 2」這兩個項目，並分別帶有連到其他頁面的連結。
<footer>
用 <footer> 標籤來定義網頁的底部區塊。

以下用一個網站來呈現各種標籤組合而成的呈現畫面：

HTML5 網站設計要點

進行 HTML5 網站設計時，建議透過上面介紹的語意標籤來讓程式碼更具可讀性並增強 SEO 排名（搜尋引擎優化，Search Engine Optimization）。同時，採用 RWD 響應式設計也能讓網頁在不同平台、裝置上都能完整呈現出良好的效果。另外，可以妥善使用 <audio> 和 <video> 標籤來呈現多媒體內容。

想成為前端網頁工程師？除了 HTML，還需具備這些技能！

想成為前端網頁工程師，除了要熟悉本篇提到的 HTML、CSS、JavaScript 及 HTML5 網站設計基本概念，還需要了解前端框架如 Bootstrap，同時最好能夠具備基本的插圖和介面設計概念，也需要對網站資料庫設計有一定的了解。

巨匠電腦為零基礎但想朝網頁設計發展的新手量身打造「RWD 響應式網頁設計課程」，帶你深入 CSS 及 HTML 語法、了解如何使用 Javascript 與前端框架 Bootstrap，並學會獨立製作自己的 RWD 網頁。透過這堂巨匠電腦的 RWD 響應式網頁設計課，為自己爭取更多機會，創造更多元的斜槓收入吧！

【延伸閱讀】前端工程師工作內容有哪些？必備語言、工具、設計觀念一次看
前端vs後端工程師差異：詳解工作重點、所需技能、軟實力！

免費學習資源不漏接