如果使用文字處理器，則必須熟悉使文本加粗、斜體或帶下劃線的功能;這只是十個選項中的三個選項，可用於指示文本如何在HTML和XHTML中顯示。
Bold Text
在<b>…<b>元素中出現的任何內容都將以粗體顯示，如下所示−
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
這將產生以下結果&負;
Italic Text
在<i>…<i>元素中出現的任何內容都將以斜體顯示，如下所示;
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>
這將產生以下結果&負;
Underlined Text
在<u>…<u>元素中出現的任何內容都將顯示下劃線，如下所示−
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>
這將產生以下結果&負;
Strike Text
在<strike>…<strike>元素中出現的任何內容都顯示爲刪除線，它是貫穿文本的一條細線，如下圖所示;
Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
這將產生以下結果&負;
Monospaced Font
元素的內容用等寬字體書寫。大多數字體被稱爲可變寬度字體，因爲不同的字母具有不同的寬度（例如，字母「m」比字母「i」寬）。但是，在等寬字體中，每個字母的寬度都相同。
Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
這將產生以下結果&負;
Superscript Text
<sup>…<sup>元素的內容是用上標寫的;所用的字體大小與它周圍的字符大小相同，但顯示在其他字符上方半個字符的高度。
Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
這將產生以下結果&負;
Subscript Text
<sub>…<sub>元素的內容以下標形式寫入;使用的字體大小與周圍的字符相同，但顯示在其他字符下半個字符的高度。
Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
這將產生以下結果&負;
Inserted Text
在<ins>..<ins>元素中出現的任何內容都顯示爲插入的文本。
Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
這將產生以下結果&負;
Deleted Text
在<del>…<del>元素中出現的任何內容都顯示爲已刪除文本。
Example
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
這將產生以下結果&負;
Larger Text
<big>…<big>元素的內容顯示爲比其周圍文本的其餘部分大一個字體大小，如下所示;
Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
這將產生以下結果&負;
Smaller Text
<small>…<small>元素的內容顯示爲比其周圍文本的其餘部分小一個字體大小，如下圖所示;
Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>
這將產生以下結果&負;
Grouping Content
<div>和<span>元素允許您將多個元素組合在一起以創建頁面的節或子節。
例如，您可能希望將頁上的所有腳註放在<div>元素中，以指示該<div>元素中的所有元素都與腳註相關。然後可以將樣式附加到該<div>元素，以便它們使用一組特殊的樣式規則顯示。
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" bgcolor = "white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
這將產生以下結果&負;
另一方面，<span>元素只能用於對內聯元素進行分組。因此，如果要將句子或段落的一部分組合在一起，可以按如下方式使用<span>元素。
Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>
這將產生以下結果&負;
這些標記通常與CSS一起使用，允許您將樣式附加到頁面的某個部分。