WordPress（ワードプレス）でブログ記事を作成する時に、知っておくと便利なHTMLタグの解説です。
ブログを書く時にはビジュアルエディタ（記事作成画面のテキストで無い方）を利用することが多いと思いますので、通常はHTMLタグを意識する必要はありません。
ですが別のサービス（アフィリエイトなど）で生成されたHTMLタグを記事内に設置したり、またウィジェットに直接HTMLを記述する場合があります。
そのような時に基本的なHTMLを知っておくと、間違いが防げます。それでは以下、HTMLタグの基本です。
HTMLタグの基本
HTMLタグは
<>
というカッコに囲われています。
<タグ>◯◯◯</タグ>
基本的には上記のように、開始タグとスラッシュが付く終了タグをワンセットで使います。
<span>◯◯◯</span>
開始タグと終了タグの中には、上記例の「span」のように同じ文字列が入ります。
<br>
<br />
上記例「<br>」のように、終了タグの無いHTMLタグもあります。この場合は単独で使用します。
なお上の例では<br>と<br />の2つを挙げました。これらの違いはスラッシュ（とその手前の半角スペース）が付いているか付いていないかですが、現在主流となっているHTML5ではどちらの書き方でも問題はありません。
文法上は厳密な定義があるかもしれませんが、少なくともブラウザで表示する時はどちらでもエラーになりません。WordPressで出力される時は、スラッシュ付きの場合が多いようです。
ここまでがHTMLの基本。以下、WordPressで良く使うHTMLタグです。
aタグ
リンクを指定するaタグ。
基本的には
<a href="https://www.yahoo.co.jp/" target="_blank">ヤフー</a>
のような形でHTML内に記載。「href」の後にリンク先のURLを指定します。「target=”_blank”」が指定されている場合は、リンク先のURLが新規ウィンドウまたは新規タブで開きます。
通常はhrefとtargetを記載するだけで良いのですが、WordPressでは「rel=”nofollow noopener”」のような指定が自動的に付加されることがあります。
「nofollow」は、hrefに指定したリンク先を検索エンジンがたどらないように、という指定です。
「noopener」は、リンク先でリンク元（この場合はあなたのページ）を参照できなくするためのものです。「noreferrer」という指定が付いていることもあります。
ここでは詳しい説明は省きますが、セキュリティ上の理由でWordPressが自動的に付加している、と考えてください。
リンクの修正はビジュアルエディタでも可能ですが、テキストエディタからaタグの内容を修正する必要がある場合は、上記を参考にしてみてください。
hタグ
文章内の見出しをあらわすテキストを囲うためのタグがhタグです。
<h1>見出しレベル1</h1> <h2>見出しレベル2</h2>
のようにhのあとには1～7までの数字が入ります。ちなみにこのセンテンス（段落）の見出し「hタグ」の文字は、h2タグで囲まれています。
WordPressでは一般的にタイトルに設定された文言がにh1（最上位の見出し）で囲まれています。なので本部中で設定される見出しはh2以下が多いでしょう（※利用しているテンプレートによって異なる場合もあります）。
imgタグ
aタグと同じぐらい使用頻度の高いタグがimgタグ。HTML内で画像を表示するために利用されるタグです。
<img src="https://～中略～○○○.jpg" alt="説明テキスト" width="100" height="100" />
上記のような指定が一般的です。終了タグは必要ありません。
<img src="https://～中略～○○○.jpg" />
このような簡易な表記でも画像は表示されます。ですがその他の情報もあった方が、HTML的には親切ではあります。
「src」には画像ファイルのパス（画像ファイルの置き場所＋画像ファイル名）を指定します。「alt」属性には画像内容を説明する適切な文章を入れます。空でも構いませんが、「alt=””」のような記載は残しておいた方が良いでしょう。
「width」「height」にはそれぞれ画像ファイルの幅・高さのピクセル数を入力します。「px」などの文字は不要です。width・heightを指定しておくと、画像表示のスピードを上げることができます。
strongタグ
ビジュアルエディタでテキストを選択し、入力フォームの上にある「B」マークのボタンを押すと、選択したテキストがstrongタグで囲まれます。
<strong>○○○</strong>
strongタグは囲ったテキストを「強調」するものです。囲われた文字は、基本的に見た目が太字になります（テンプレートやスタイルシートの指定によっては太字にならない場合もあります）。
まとめ
以上、ワードプレス（WordPress）でブログ運営をするときに知っておくと便利なHTMLの基本、でした。
基本的に直接HTMLを編集しなくても記事の作成は可能です。ですが外部サービスのHTMLソースを挿入したり、テキストエディタ（WordPressの）から文字列を編集する時に、これらのHTMLソースを理解しておくと何かと役に立ちますよ。
本ブログはレンタルサーバー「エックスサーバー」にて稼働中です。
公式サイト：エックスサーバー
コメント