HTML 文字基礎

HTML 的主要作用之一是為文字提供結構，以便瀏覽器能夠按照開發人員的意圖顯示 HTML 文件。本文介紹瞭如何使用 HTML 透過新增標題和段落、強調單詞、建立列表等方式來構建文字頁面。

先決條件	熟悉 HTML 基礎知識，如 HTML 入門中所述。
目標	學習如何標記基本的文字頁面以使其具有結構和含義 — 包括段落、標題、列表、強調和引用。

基礎知識：標題和段落

大多數結構化文字都由標題和段落組成，無論您是在閱讀故事、報紙、大學教科書、雜誌等。

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

結構化內容使閱讀體驗更輕鬆、更愉快。

在 HTML 中，每個段落都必須包含在 <p> 元素中，如下所示

html

<p>I am a paragraph, oh yes I am.</p>

每個標題都必須包含在標題元素中

html

<h1>I am the title of the story.</h1>

有六個標題元素：h1、h2、h3、h4、h5 和 h6。每個元素都代表文件中不同級別的內容；<h1> 代表主標題，<h2> 代表副標題，<h3> 代表子副標題，依此類推。

實現結構層次

例如，在這個故事中，<h1> 元素代表故事的標題，<h2> 元素代表每章的標題，<h3> 元素代表每章的子部分

html

<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The dark night</h2>

<p>
  It was a dark night. Somewhere, an owl hooted. The rain lashed down on the…
</p>

<h2>Chapter 2: The eternal silence</h2>

<p>Our protagonist could not so much as a whisper out of the shadowy figure…</p>

<h3>The specter speaks</h3>

<p>
  Several more hours had passed, when all of a sudden the specter sat bolt
  upright and exclaimed, "Please have mercy on my soul!"
</p>

元素所代表的內容實際上取決於您，只要層次結構有意義即可。在建立此類結構時，您只需要記住一些最佳實踐

最好每個頁面只使用一個 <h1> — 這是頂級標題，所有其他標題都位於此標題下方。
確保按照正確的順序使用標題層次結構。不要使用 <h3> 元素來表示副標題，然後使用 <h2> 元素來表示子副標題 — 這樣沒有意義，會導致奇怪的結果。
在可用的六個標題級別中，您應該儘量每個頁面不超過三個，除非您認為有必要。包含許多級別（例如，深層標題層次結構）的文件變得笨拙且難以導航。在這種情況下，建議如果可能的話將內容分散到多個頁面。

為什麼我們需要結構？

為了回答這個問題，讓我們看看text-start.html——本文執行示例（一個美味的鷹嘴豆泥食譜）的起點。您應該將此檔案的副本儲存到本地計算機上，因為稍後練習中會用到它。此文件的主體目前包含多個內容片段。它們沒有任何標記，但用換行符分隔（按 Enter/Return 鍵進入下一行）。

但是，當您在瀏覽器中開啟文件時，會發現文字顯示為一大塊！

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

這是因為沒有元素為內容提供結構，因此瀏覽器不知道什麼是標題，什麼是段落。此外

檢視網頁的使用者傾向於快速掃描以查詢相關內容，通常一開始只閱讀標題。（我們通常會在網頁上停留很短時間。）如果他們在幾秒鐘內看不到任何有用的內容，他們可能會感到沮喪並轉到其他地方。
搜尋引擎索引您的頁面時，會將標題內容視為影響頁面搜尋排名的重要關鍵詞。如果沒有標題，您的頁面在SEO（搜尋引擎最佳化）方面表現會很差。
嚴重視力障礙的人通常不閱讀網頁；而是透過聆聽來獲取資訊。這是透過名為螢幕閱讀器的軟體實現的。此軟體提供了一種快速訪問給定文字內容的方法。在使用的各種技術中，它們透過朗讀標題來提供文件的大綱，使使用者能夠快速找到他們需要的資訊。如果沒有標題，他們將被迫聽完整篇文件的朗讀。
要使用CSS設定內容的樣式，或使用JavaScript使其執行有趣的操作，您需要使用元素包裹相關內容，以便 CSS/JavaScript 可以有效地定位它。

因此，我們需要為我們的內容提供結構化標記。

主動學習：為我們的內容提供結構

讓我們直接從一個即時示例開始。在下面的示例中，在輸入欄位中的原始文字中新增元素，以便它在輸出欄位中顯示為標題和兩個段落。

如果您犯了錯誤，可以使用重置按鈕隨時重置。如果您遇到困難，請按顯示解決方案按鈕檢視答案。

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
My short story I am a statistician and my name is Trish.

My legs are made of cardboard and I am married to a fish.
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution = `<h1>My short story</h1>
<p>
  I am a statistician and my name is Trish.
</p>
<p>
  My legs are made of cardboard and I am married to a fish.
</p>`;

let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// Stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

為什麼我們需要語義？

語義在我們周圍無處不在——我們依靠過去的經驗來告訴我們日常物品的功能是什麼；當我們看到某些東西時，我們就知道它的功能是什麼。例如，我們期望紅燈表示“停止”，綠燈表示“通行”。如果應用了錯誤的語義，事情可能會很快變得複雜。（有哪個國家使用紅色表示“通行”嗎？我們希望沒有。）

同樣，我們需要確保我們正在使用正確的元素，為我們的內容提供正確的含義、功能或外觀。在這種情況下，h1 元素也是一個語義元素，它為其包裹的文字賦予了“頁面上的頂級標題”的角色（或含義）。

html

<h1>This is a top level heading</h1>

預設情況下，瀏覽器會為其提供較大的字型大小，使其看起來像標題（儘管您可以使用 CSS 將其樣式設定為任何您想要的樣子）。更重要的是，它的語義值將以多種方式使用，例如搜尋引擎和螢幕閱讀器（如上所述）。

另一方面，您可以使任何元素看起來像頂級標題。請考慮以下內容

html

<span style="font-size: 32px; margin: 21px 0; display: block;">
  Is this a top level heading?
</span>

這是一個<span> 元素。它沒有語義。當您想要應用 CSS（或使用 JavaScript 對其進行某些操作）而又不賦予其任何額外含義時，可以使用它來包裹內容。（您將在本課程的後面瞭解有關這些內容的更多資訊。）我們已對其應用了一些 CSS，使其看起來像頂級標題，但由於它沒有語義值，因此不會獲得上面描述的任何額外好處。最好為工作使用相關的 HTML 元素。

列表

現在讓我們把注意力轉向列表。列表在生活中無處不在——從您的購物清單到您潛意識中遵循的到達您家中的路線清單，再到您在這些教程中遵循的說明清單！在網路上，我們有三種類型的列表：無序列表、有序列表和描述列表。

無序列表和有序列表非常常見，在本節中將介紹它們。描述列表不太常見，我們將在高階文字格式中介紹它們。

無序列表

無序列表用於標記專案列表，其中專案的順序無關緊要。讓我們以購物清單為例

milk
eggs
bread
hummus

每個無序列表都以<ul> 元素開頭——它圍繞所有列表項。

html

<ul>
  milk
  eggs
  bread
  hummus
</ul>

最後一步是用<li>（列表項）元素包裹每個列表項。

html

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

主動學習：標記無序列表

嘗試編輯下面的即時示例以建立您自己的 HTML 無序列表。

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
milk
eggs
bread
hummus
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  "<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

有序列表

有序列表是指專案順序確實重要的列表。讓我們以一組路線說明為例

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

標記結構與無序列表相同，除了您必須將列表項包裹在<ol> 元素中，而不是<ul>。

html

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

主動學習：標記有序列表

嘗試編輯下面的即時示例以建立您自己的 HTML 有序列表。

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">
Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  "<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

主動學習：標記我們的食譜頁面

因此，在本文的這一點上，您擁有了標記我們的食譜頁面示例所需的所有資訊。您可以選擇儲存我們text-start.html 起始檔案的本地副本並在那裡進行操作，或者在下面的可編輯示例中進行操作。在本地進行操作可能會更好，因為這樣您就可以儲存正在執行的操作，而如果在可編輯示例中填寫，則下次開啟頁面時它將丟失。兩者各有優缺點。

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">
Quick hummus recipe

  This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.

  Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.

  Ingredients

  1 can (400g) of chick peas (garbanzo beans)
  175g of tahini
  6 sundried tomatoes
  Half a red pepper
  A pinch of cayenne pepper
  1 clove of garlic
  A dash of olive oil

  Instructions

  Remove the skin from the garlic, and chop coarsely
  Remove all the seeds and stalk from the pepper, and chop coarsely
  Add all the ingredients into a food processor
  Process all the ingredients into a paste
  If you want a coarse "chunky" hummus, process it for a short time
  If you want a smooth hummus, process it for a longer time

  For a different flavor, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.

  Storage

  Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.

  Hummus is suitable for freezing; you should thaw it and use it within a couple of months.
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<h1>Quick hummus recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavor, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

如果您遇到困難，可以隨時按下顯示解決方案按鈕，或檢視我們 GitHub 儲存庫上的text-complete.html 示例。

巢狀列表

將一個列表巢狀到另一個列表中是完全可以的。您可能希望在頂級專案符號下方有一些子專案符號。讓我們從我們的食譜示例中獲取第二個列表

html

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, process it for a longer time.</li>
</ol>

由於最後兩個專案符號與它們之前的專案符號非常相關（它們讀起來像是適合在該專案符號下方顯示的子說明或選擇），因此將它們巢狀在自己的無序列表中並將該列表放在當前第四個專案符號中可能是有意義的。這將如下所示

html

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>
    Process all the ingredients into a paste.
    <ul>
      <li>
        If you want a coarse "chunky" hummus, process it for a short time.
      </li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>

嘗試返回到之前的主動學習示例並像這樣更新第二個列表。

強調和重要性

在人類語言中，我們經常強調某些詞語以改變句子的含義，並且我們經常希望將某些詞語標記為重要或與眾不同。HTML 提供各種語義元素，使我們能夠用此類效果標記文字內容，在本節中，我們將介紹其中一些最常見的元素。

強調

當我們想在口語中新增強調時，我們會強調某些詞語，微妙地改變我們所說的話的含義。類似地，在書面語言中，我們傾向於透過將詞語用斜體表示來強調它們。例如，以下兩個句子具有不同的含義。

我很高興你沒有遲到。

我很高興你沒有遲到。

第一個句子真誠地表達了對對方沒有遲到的欣慰。相反，第二個句子，其中“高興”和“遲到”兩個詞都用斜體表示，聽起來很諷刺或被動攻擊性，表達了對對方稍微遲到的惱怒。

在 HTML 中，我們使用<em>（強調）元素來標記此類情況。除了使文件更有趣之外，螢幕閱讀器也會識別這些元素，並且可以配置為以不同的語調朗讀它們。瀏覽器預設情況下將其樣式設定為斜體，但您不應僅為了獲得斜體樣式而使用此標記。要執行此操作，您將使用<span> 元素和一些 CSS，或者可能使用<i> 元素（見下文）。

html

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

強烈重要性

為了強調重要的詞語，我們傾向於在口語中強調它們，並在書面語言中使用粗體表示它們。例如

此液體劇毒。

我指望你。不要遲到！

在 HTML 中，我們使用<strong>（強烈重要性）元素來標記此類情況。除了使文件更有用之外，螢幕閱讀器也會識別這些元素，並且可以配置為以不同的語調朗讀它們。瀏覽器預設情況下將其樣式設定為粗體文字，但您不應僅為了獲得粗體樣式而使用此標記。要執行此操作，您將使用<span> 元素和一些 CSS，或者可能使用<b> 元素（見下文）。

html

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

如果需要，您可以將強和強調巢狀在一起。

html

<p>This liquid is <strong>highly toxic</strong> — if you drink it, <strong>you may <em>die</em></strong>.</p>

主動學習：讓我們變得重要

在本主動學習部分中，我們提供了一個可編輯的示例。在其中，我們希望您嘗試為您認為需要強調和強烈重要性的詞語新增強調和強烈重要性，以便進行一些練習。

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">
<h1>Important notice</h1>
<p>On Sunday January 9th 2010, a gang of goths were
  spotted stealing several garden gnomes from a
  shopping center in downtown Milwaukee. They were
  all wearing green jumpsuits and silly hats, and
  seemed to be having a whale of a time. If anyone
   has any information about this incident, please
    contact the police now.</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  "<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// Stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

斜體、粗體、下劃線…

我們迄今討論的元素具有明確相關的語義。對於<b>、<i> 和<u>，情況則更加複雜。它們是為了讓人們能夠在 CSS 支援不足或根本不支援的時代編寫粗體、斜體或帶下劃線的文字而出現的。像這樣的僅影響呈現而不影響語義的元素被稱為表現元素，不應再使用，因為正如我們之前所看到的，語義對於可訪問性、SEO 等非常重要。

HTML5 使用新的、有點令人困惑的語義角色重新定義了<b>、<i> 和<u>。

您可以記住的最佳規則是：僅在沒有更合適的元素時，才可以使用<b>、<i> 或<u> 來傳達傳統上用粗體、斜體或下劃線傳達的含義；並且通常都有更合適的元素。考慮<strong>、<em>、<mark> 或<span> 是否更合適。

始終保持可訪問性思維。斜體的概念對使用螢幕閱讀器的人或使用拉丁字母以外的書寫系統的人來說幫助不大。

<i> 用於傳達傳統上用斜體傳達的含義：外來語、分類學名稱、專業術語、想法…
<b> 用於傳達傳統上用粗體傳達的含義：關鍵詞、產品名稱、導語…
<u> 用於傳達傳統上用下劃線傳達的含義：專有名詞、拼寫錯誤…

注意：人們強烈地將下劃線與超連結相關聯。因此，在網路上，最好只為連結新增下劃線。在語義上合適時使用<u> 元素，但請考慮使用 CSS 將預設下劃線更改為網路上更合適的樣式。下面的示例說明了如何執行此操作。

html

<!-- scientific names -->
<p>
  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) is the most common
  hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p>Someday I'll learn how to <u class="spelling-error">spel</u> better.</p>

<!-- term being defined when used in a definition -->
<dl>
  <dt>Semantic HTML</dt>
  <dd>
    Use the elements based on their <b>semantic</b> meaning, not their
    appearance.
  </dd>
</dl>

測試你的技能！

您已閱讀完本文，但您還記得最重要的資訊嗎？在繼續之前，您可以找到一些進一步的測試來驗證您是否保留了這些資訊——請參閱測試您的技能：HTML 文字基礎知識。

總結

現在就到這裡！本文應該讓您很好地瞭解瞭如何在 HTML 中開始標記文字，並向您介紹了該領域中一些最重要的元素。在這一領域，還有很多語義元素需要介紹，我們將在本課程後面的高階文字格式文章中介紹更多內容。在下一篇文章中，我們將詳細瞭解如何建立超連結，這可能是網路上最重要的元素。