HTML-フォーマット
ワードプロセッサを使用する場合は、テキストを太字、斜体、または下線付きにする機能に精通している必要があります。これらは、HTMLおよびXHTMLでテキストを表示する方法を示すために使用できる10のオプションのうちの3つにすぎません。
太字
内に表示されるもの <b>...</b> 要素は、以下に示すように太字で表示されます-
例
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>これにより、次の結果が生成されます-
イタリックテキスト
内に表示されるもの <i>...</i> 以下に示すように、要素はイタリック体で表示されます-
例
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>これにより、次の結果が生成されます-
下線付きのテキスト
内に表示されるもの <u>...</u> 要素は、以下に示すように下線付きで表示されます-
例
<!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>...</strike> 要素は取り消し線で表示されます。取り消し線は、以下に示すようにテキストを通る細い線です。
例
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>これにより、次の結果が生成されます-
等幅フォント
の内容 <tt>...</tt>要素は等幅フォントで書かれています。異なる文字の幅が異なるため、ほとんどのフォントは可変幅フォントとして知られています（たとえば、文字「m」は文字「i」よりも幅が広い）。ただし、等幅フォントでは、各文字の幅は同じです。
例
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>これにより、次の結果が生成されます-
上付きテキスト
の内容 <sup>...</sup>要素は上付き文字で書かれています。使用されるフォントサイズは、周囲の文字と同じサイズですが、他の文字の半分の高さで表示されます。
例
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>これにより、次の結果が生成されます-
下付きテキスト
の内容 <sub>...</sub>要素は添え字で書かれています。使用されるフォントサイズは周囲の文字と同じですが、他の文字の下に文字の半分の高さで表示されます。
例
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>これにより、次の結果が生成されます-
挿入されたテキスト
内に表示されるもの <ins>...</ins> 要素は挿入されたテキストとして表示されます。
例
<!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>これにより、次の結果が生成されます-
削除されたテキスト
内に表示されるもの <del>...</del> 要素は、削除されたテキストとして表示されます。
例
<!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>これにより、次の結果が生成されます-
大きなテキスト
の内容 <big>...</big> 以下に示すように、要素はそれを囲む残りのテキストよりも1フォントサイズ大きく表示されます-
例
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>これにより、次の結果が生成されます-
小さいテキスト
の内容 <small>...</small> 以下に示すように、要素はそれを囲む残りのテキストよりも1フォントサイズ小さく表示されます-
例
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>これにより、次の結果が生成されます-
コンテンツのグループ化
ザ・ <div> そして <span> 要素を使用すると、複数の要素をグループ化して、ページのセクションまたはサブセクションを作成できます。
たとえば、<div>要素内のページにすべての脚注を配置して、その<div>要素内のすべての要素が脚注に関連していることを示すことができます。次に、この<div>要素にスタイルをアタッチして、特別なスタイルルールのセットを使用して表示されるようにします。
例
<!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" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>これにより、次の結果が生成されます-
一方、<span>要素は、インライン要素のみをグループ化するために使用できます。したがって、グループ化する文または段落の一部がある場合は、次のように<span>要素を使用できます。
例
<!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で一般的に使用され、ページのセクションにスタイルを添付できるようにします。