1 はじめに
WordPressには、
ブロックエディター（TinyMCE）というWYSIWYGエディタがついています。
このエディタのビジュアルモードで記事を入力していけば、
HTMLのタグを直接入力しなくとも文字の装飾をある程度できてしまいます。
とはいっても、
文字や画像を思い通りに配置しようとしたり、
改行の幅を思い通りにしようとすると結構手間がかかるということがしばしばあります。
ほとんどは、HTMLの知識がちょっとあれば、
テキストモードでHTMLコードを
ちょっと変更するだけで済んでしまうことが実に多いのです。
本記事は、
「これだけ知っておけば記事編集がはかどりますよ」という、
よく使われるテキスト関連のHTMLタグ6つと画像表示のタグ1つについてご紹介します。
これらを知っておけば、文章の構成作業は格段に楽になります。
これら7つのタグは、HTMLタグのほんの一部です。
でも、この7つを理解できれば、残りのタグは難なく理解できるようになるでしょう。
2 TMLの基本構造
HTMLにとって重要なのは、適切に構造化されていることなのです。
「構造化」とは、テキスト等を単にベタ書きするのではなく、
この部分は見出し、強調、リンク、リスト……などと意味付けをすることです。
本章では、
ほぼすべてのHTMLドキュメントで記述するHTMLの基本構造を説明します。
2.1 DOCTYPE
DOCTYPEは、そのファイルがHTMLであること、
およびどのバージョンのHTMLで記述されているかを宣言する文字列です。
DOCTYPEはファイルの先頭に記述します。
DOCTYPEによってウェブブラウザは挙動を変える場合があります。
以前は長いDOCTYPEを書く必要がありましたが、
近年では以下のようなシンプルな宣言を行うようになっています。
2.2 htmlタグ
HTMLタグ（要素）は、すべてのタグの親となるルートのタグです。
DOCTYPEに続けて記述します。
直接の子タグとして持てるのはheadタグ、bodyタグのみです。
lang属性で使用する言語を指定できます。
主に日本語を使用する場合となります。
この<HTML></HTML>の中に、他のタグを入れていきます。
2.3 headタグ
headタグは、ページの情報（メタデータ）を指定する際に使います。
代表的なメタデータは、使用する文字エンコーディングやタイトルです。
2.4 metaタグ
metaタグは、ページの様々なメタデータを指定します。
metaタグはheadタグの中で使用します。
2.4.1 文字エンコーディングの指定
メタデータの中でも日本語を使用するHTMLで必須と言えるのが、
文字エンコーディングの指定です。
文字エンコーディングの指定がない場合、あるいは誤った指定をした場合、
Webページの文字化けを引き起こす恐れがあります。
文字コードには以下4種類が存在します。
- UTF-8
- EUC-JP
- Shift-JIS
- ISO-2002-JP
最近では、UTF-8で作成されていることが多くなってきています。
文字エンコーディングを指定するにはcharset属性を用い、以下のように指定します。
以下は、「UTF-8」で指定しているものになります。
2.4.2 SEO向けの指定
検索エンジン向けにSEOの一環として、metaタグを使うこともできます。
meta keywords
meta description
meta robots
が、代表的なものとなります。
（１）meta keywords
そのページがどんな内容のページなのかを、キーワードで指定することができます。
使用する際には以下のように使用します。
（２）meta description
そのページがどんな内容のページなのかを、文章で指定することができます。
使用する際には以下のように使用します。
検索結果にも表示されるため、クリック率にも影響があります。
（３）meta robots
検索エンジンに対して、
そのページを検索結果に載せるのか載せないのかなどの指定ができます。
2.5 linkタグ
linkタグは、ページと他のリソースと関連付けます。
linkタグは主にheadタグの中で使用します。
様々なリソースを関連付けられますが、
その中でもよく用いるのがCSS（スタイルシート）ファイルとの関連付けです。
CSSファイルを関連付けることで、HTMLドキュメントにスタイルを適用します。
CSSファイルを指定する場合はrel属性にstylesheet、
href属性にCSSファイルのURL（以下の例ならstyle.css部分）を指定します。
2.6 titleタグ
titleタグは、ページのタイトルを指定することが出来ます。 titleタグはheadタグの中で使用します。
titleタグによって、指定したタイトルはWebページ中には通常は表示されませんが、
Webブラウザのタイトルバーやタブ、
履歴のタイトルやブックマークのタイトルの初期値として使用されます。
また、検索結果にも表示される部分となります。
titleタグの前に、
metaタグで説明した文字のエンコーディング指定を行っておかなくてはなりません。
文字エンコーディングの指定より前にtitleタグが配置されると、
タイトルの文字化けを引き起こす恐れがあります。
2.7 bodyタグ
bodyタグは、ページに表示するものを記述する部分となります。
Webページに表示されるタグは、
基本的にはすべてbodyタグ内に配置することになります。
3 テキスト関連タグの使い方（p、br、hr、a、em、strong、imgタグ）
本章では、よく使うテキストに関連する下に示すHTMLのタグ6＋αを紹介します。
3.1 pタグ：段落を表現するタグ
pタグ（p要素）は、段落（Paragraph）の頭文字を取ったタグです。
例えば、以下のようにテキストをベタ書きしても、
ブラウザで表示すると、ひとつの段落として表示されます。
横幅に応じて折り返し表示はされます。
ベタ書きの改行は空白扱いになります。
テキストを段落として構造化するときはpタグを使います。
ひとつの段落につき、ひとつのpタグを使います。
<p>あいうえお</p><p>かきくけこ</p><p>さしすせそ</p>
このように、HTML上でpタグを1行で並べても結果は上記画像と同じになります。
pタグはテキストの一段落を表現するタグなので、
他によりふさわしいタグがある場合はそちらを使いましょう。
例えば、
箇条書きをする場合はpタグを並べるのではなく、ulタグとliタグを使います。
3.2 brタグ：改行
brタグ（br要素）はBreakの略で、改行を表現するタグです。
pタグで構造化されたテキストは、横幅に応じて自動的に折り返し表示されます。
pタグ内でベタ書きの改行をしても空白として扱われるだけで、
ブラウザでの表示上は改行されません。
ひとつのpタグ内の任意の場所で改行したい場合にbrを使用します。
【備考】
brタグは、<br>のほかに<br />が使われることもあります。
<br />は、XHTML1.0などで改行タグとして指定されているものです。
一方、HTML4.01やHTML5では、<br>を使うことになっています。
どちらも改行で使用できるタグですが、
現在Webページの作成において推奨されているHTML5に準じ、
改行タグも<br>を使うのが無難です。
3.3 hrタグ：話題の区切り
hrタグ（hr要素）（horizontal rule）は文章の切れ目を表現するタグです。
ブラウザのデフォルトスタイルでは、横線として表示される場合が多いです。
しかし、
横線を引きたいといった見た目上の理由だけでhrを使用することは推奨されていません。
文章の主題が切り替わるときや、小説で場面が変わるときなど、
文章の切れ目を構造化する場合に使用します。
人間が読む場合は、明確に判断できる文章の切れ目を、
構造化して機械にとっても明確にすることが大切です。
3.4 aタグ：リンクを付ける
aタグ（Anchor）（a要素）はリンクを表現するタグです。
リンク先のURLはhref属性で指定します。
target属性の値を“_blank”とすることで、
新しいウィンドウでリンクを開くように指定できます。
初期状態のブラウザでは青字と下線で表示され、
訪問済みリンクの場合は文字色が紫で表示されることが多いです。
3.5 emタグ：アクセントを付ける
emタグ（em要素）（Emphasis）は強調を表現するタグです。
段落内で強調したい部分に対して使用します。
ブラウザの初期状態では斜体で表示されることが多く、
日本語では英語などと違い、強調されていることが解りづらいので注意が必要です。
斜体が使いたいだけなのであれば、<i>タグを使いましょう。
あくまでも、emは強調の意味となるので、
斜体にしたいためだけの理由でemを使用すべきではありません。
3.6 strongタグ：強い強調
strongタグ（strong属性）はemよりもさらに強い強調を表現するタグです。
ブラウザの初期状態では太字で表示されることが多く、
初期状態でもemより強調が解りやすいという特徴があります。
太字にしたいだけなのであれば、下記のようなスタイルを使うほうが良いでしょう。
<b>～</b>
太字にしたいためだけの理由でstrongを使用すべきではありません。
【備考】
emやstrongのタグと似たような表示効果をもたらすタグに、
i、b、uのタグがあります。
<i>～</i>の間の文字列はitalic（斜体）で、<b>～</b>は（bold）で表示します。
<u>～</u>の間の文字列は、underline（下線付き）で表示します。
これのタグは、強調と意味合いではなく、
テキストが他の部分とは異なる意味合いを示すものです。
実用的には、日本語環境においては、
両者はほぼ同じと扱っても差し支えないように思いますが、どうなのでしょうか。
3.7 imgタグ：画像を表示
imgタグ（img要素）（Image）は、画像の埋め込みを表現するタグです。
画像はテキスト関連とは言えませんが、よく使うタグなのでここで一緒にご紹介します。
imgは、以下の属性を伴って使用することが多いです。
widthとheightでサイズを指定すると、
画像のオリジナルのサイズに関わらず指定した大きさで表示されます。
しかし、見た目上サイズが縮小されて表示されているだけで、
オリジナルの画像が読み込まれています。
特別な理由がない限り、表示上必要なサイズに画像自体を縮小して使用しましょう。
widthとheightの指定がない場合では、画像はオリジナルのサイズで表示されます。
サイズを指定しておくことで、表示の際にあらかじめサイズ分の領域を確保でき、
画像の読み込み完了までの表示の乱れを軽減できます。
以上
HTMLだと、
思うように編集することは難しく、やろうすればとっても時間が掛かります。
ですので、本記事の元となっているWordで作成したPDFを
ページ最後に貼り付けました。
役に立てていただければ、うれしく思います。
このPDFファイルは、自由に配布されてもかまいません。
ただし、再配布の際には、
入手元と著者名は明らかにしてください。
なお、上のPDFファイルの内容、また本文中の記述に、
誤字や脱字、誤った内容の記述など見つかりましたら、
下に示すフォームでご連絡いただければ幸いです。
