個々の単語や全文を斜体や太字にすることは非常に簡単です。最初に太字にする方法についてです。太字にするためには、基本的に b と strong の2つのHTML要素が使用可能です。
ようこそ、<b>PSD-Tutorials.de</b>へ！ <br /> ようこそ、<strong>PSD-Tutorials.de</strong>へ！
ブラウザでの結果は以下のようになります:
明らかに、両方の要素は同じ表示を提供します。しかし、なぜ2つの異なる要素が存在するのでしょうか？ 実際、ウェブサイトでは一般的な標準ブラウザの表示方法以外にも、さまざまな表示方法があります。たとえば、視覚障害者向けのリーダーやモバイルデバイスなどが考えられます。 W3Cが提供するHTML要素は意味論を支援します。つまり、b 要素は文字を太字にすることを意味しなくなりました。むしろ、b は重要性を持たない目立つテキストを意味します。たとえば、文書内の製品名やキーワードなどが該当します。
strong 要素は以前、より強調されたテキストを表していました。一方、em は強調された重要なテキスト（emphatisch）に使用されていました。過去のHTMLバージョンでは、strongがemの強調を意味していました。HTML5では、これらの要素に異なる意味が与えられています。
まずは通常の強調が施されたテキストです。
<p> 猫はかわいい動物です。 </p>
同じテキストをもう一度見てみましょう。ただし、今回は最初の単語に焦点を当てた形で表示されます。
<p> <em>猫</em> はかわいい動物です。 </p>
猫 という単語に焦点を当てるために em を使用しています。これは、犬と猫のどちらがかわいらしいかについて議論がある場面で使用されることが考えられます。
次に、同じ例で em 要素を 単語 は に適用することもできます。
<p> 猫 <em>は</em> かわいい動物です。 </p>
実際には、em を使用して強調された部分はブラウザで斜体で表示されます。同じ視覚的効果を得るためには、i 要素が使用されます。
HTML5の最新ドラフトによると、i 要素はもはや斜体を意味しません。
<p> 心からようこそ、 <i>PSD-Tutorials.de</i> </p>
むしろ、この要素は今後、異なる雰囲気を伝えたいときに使用されます。たとえば、技術用語や分類用語の強調には i 要素が興味深いです。
これは非常に理論的な話ですが、基本的にはHTML5のガイドラインに従うよう努めるべきです。しかし、b の代わりに strong を使用した場合、誰もあなたの頭を引き裂くことはありません。
<p> <em>em要素を含む行</em><br /> <i>i要素を含む行</i><br /> <strong>strong要素を含む行</strong><br /> <b>b要素を含む行</b> </p>
最終的には、ブラウザメーカーが対処する必要があります。
これらの要素で装飾されたテキストのデザインは、最終的には常にCSSが担当します。
abbrでの略語
略語を示す場合、これまで略語のために使用されていた同じ要素である abbr を使用します。
オーストリア＝ドイツ語 のオフィスで <abbr title="World Wide Web Consortium">W3C</abbr> は2009年4月以来、ポツダム専門大学に本部を構えています。
abbr 要素を正しく解釈するブラウザは、abbr 要素内のテキストを下線付きで表示します。
さらに、abbr には title 属性を割り当てるべきです。通常、その中には略語の完全な表現が記載されます。訪問者がマウスで略語の上にカーソルを合わせると、表現がツールチップウィンドウに表示されます。
address での住所情報
address要素を使用して、アドレス情報をマークアップできます。
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
ブラウザは通常、address要素のコンテンツを斜体で表示します。
codeでコードをマークアップする
code要素はプログラムコードを強調表示するために使用されます。この点に関して、以前のHTMLバージョンと比較して変化はありません。引き続き、codeはその目的に使用されます。
<pre>
これはHTMLのヘッダー領域です：
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
通常、コードはpre要素と組み合わせて使用され、プログラムコードで使用されるインデントを維持することができます。
HTML5仕様は、code要素と関連してclass属性の使用を推奨しています。この属性には、code要素内で使用される言語を割り当てることができます。以下は、そのようなマークアップの典型的な例です。
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
ブラウザがこれらの指示をどのように処理するかは、W3Cによって定義されていません。
<pre>
これはHTMLのヘッダー領域です：
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
現時点では、class属性にはブラウザ上で見える影響はありません。ただし、人間の観察者は、ページのソースコードを見ることで、プログラムコードの基になる言語を認識することができます。
smallで小文字表示
small要素は、通常のテキストよりも小さく表示するために元々作成されました。HTML5では、smallは明示的に小さなテキストのために使用されます。この小さな表示は、次のようなものです。
• 著作権情報
• 免責事項
• ライセンス規定
• 利用規約
W3Cは、smallが長いテキスト部分に使用されるべきでないことを明示的に指摘しています。
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
テキストを下線で表示
u要素を使用して、単語を下線で表示できます。以下は例です。
<p>Willkommen bei <u>PSD-Tutorials.de</u></p>
結果はブラウザで次のように表示されます。
結果を見ると、実際に期待される効果が得られています。ただし、この方法には欠点があります。インターネットでは、下線付きのテキストは通常、ハイパーリンクを表します。したがって、下線の付いたテキストや単語を表示すると、訪問者はそれをハイパーリンクだと思うかもしれません。クリックしても失敗するため、下線を避けるべきです。
