ブログなどのコンテンツ制作に役立つ、知っておくと便利なHTMLタグについて解説します。ライターやディレクターなど、ブログ制作者の方に参考にしていただければと思います。
HTMLタグを知っておくべき理由とは？
近年ではオウンドメディアなどのコンテンツマーケティングが注目を集めています。リスティングなどのWeb広告よりも大幅にコストが削減できますし、見込み顧客となるユーザーとの信頼関係も構築しやすいと言えます。
さて、コンテンツと言ってもさまざまな種類がありますが、ブログを活用したオウンドメディアは広く活用されています。ご存じのように、ブログは見出しや写真、表などの要素で構成されています。ブログ制作者が基本的なHTMLの知識をつけておくべき理由は、こういったところにあるのです。
知っておくと便利なHTMLタグ
さて、それでは本題に入っていきましょう！
ブログ記事の執筆に欠かせないHTMLタグをご紹介していきます。HTMLタグを使ったことのない方にもご理解いただけるよう、できるだけかみ砕いて解説していきますね。
※なお本記事では、あくまでブログなどの制作者向けにHTMLタグを選んで解説してあります。Webエンジニアやデザイナーなどの開発者向けのものではありませんのでご注意ください。
見出し（h1、h2、h3、h4、h5、h6）
文章は一般的に、見出しをともなうものです。一番最初にタイトルがあり、その次に見出し、本文へと続いていきます。見出しにも階層があって、大見出しや小見出しなどがあります。
HTMLには見出しタグというものがあり、タイトルや大見出し、小見出しなどに使います。h1が最も上の見出しタグで、その次がh2といった具合に、階層に沿った見出しタグが用意されています。
見出しタグを使った時の例を上げておきましょう。
<h1>タイトル</h1> <h2>大見出し</h2> <p>本文</p> <h3>中見出し</h3> <p>本文</p>
さて、見出しタグを使う時に気をつけて欲しいことがあります。それは、見出しの順番を守ること。下の例を見てみてください。
<h1>タイトル</h1> <h3>大見出し</h3> <p>本文</p>
この文章では、h1の次にh2ではなくh3がきていますね。これはNG。見出しタグはその順番をしっかりと守ることが必要です。
それでは、下の例はいかがでしょうか？
<h1>タイトル</h1> <h2>大見出し</h2> <p>本文</p> <h2>大見出し</h2> <h3>中見出し</h3> <p>本文</p> <h3>中見出し</h3> <p>本文</p> <h2>大見出し</h2> <p>本文</p>
ちょっと難しかったかもしれませんが、この例はOKです。見出しタグの順番も、階層構造も守られているから。
見出しタグを適切に使うことで、文章の構造がわかりやすくなります。ユーザーにとっては文章が読みやすくなりますし、Googleなどの検索エンジン（クローラー）の対策にもなります。正しく使っていきましょう。
段落（p）
上の見出しのところであげた例では、本文をpというタグで囲ってありました。HTMLでは、ひとまとまりの文章である段落を、pというタグを使って表現します。
pタグは下のように、文章を囲んで使います。
<p>文章</p>
pタグを使うとHTMLの構造だけでなく、読み手にもわかりやすい文章にすることができます。読みやすさなども考えながら、pタグを使っていきましょう。
リンク（a）
ブログの文章は、リンクを含んでいることもあります。参考URLが載っていたり、関連記事やページ内リンクなどもあるでしょう。このときに使われるのがリンクタグ（a）です。リンクタグのaはanchor（アンカー）から来ています。
リンクタグの例をあげましょう。
<a href="リンクURL">リンクさせる文章</a>
このように、hrefの部分にリンクさせたいURLを記述します。リンクタグで囲った部分をクリックすると、リンク先に遷移する仕組みになっています。上の例で言うと、「リンクさせる文章」のテキストをクリックすると、リンク先に移動します。リンクタグで囲むのはテキストである必要はなく、画像でもOKです。
なお、外部サイトのページにリンクを張るときなど、リンクを別のタブで開きたいこともあるでしょう。そういった時はリンクタグにtargetという属性を追記します。
<a href="リンクURL" target="_blank">リンクさせる文章</a>
リンクタグではtargetの他にも、relなどの属性が知られています。例えば、リンク先にリファラを送信したくない場合は、下のようにリンクタグを使います。
<a href="リンクURL" target="_blank" rel="noreferrer">リンクさせる文章</a>
画像（img）
文章だけのブログ記事もありますが、見栄えがよくわかりやすい内容にするには画像を使った方がいいでしょう。HTMLではimgタグを使って画像を配置していきます。
imgタグを使った時の例を見てみましょう。
<img src="画像へのパス" />
imgを記述したあと、srcの部分に画像へのパスを書きます。このパスが間違っていると、リンク切れが起きてしまいます。リンク切れが起こると画像が表示されないので注意してください。
なお、画像を配置するときには代替テキストを設定しておくことをおすすめします。万が一画像が表示されなかった時に表示されるテキストのことです。検索エンジンのクローラーに画像情報を伝えることもできるので、SEOでも有利になります。
alt属性を使って、下のように記述します。
<img src="画像へのパス" alt="画像の代替テキスト" />
この他にも、画像の縦幅を指定するheightや横幅を指定するwidthなどがあります。状況に応じて活用していってください。
リスト（ul、ol）
リスト用のHTMLタグです。これにはulとolの2つのタグが用意されています。順に見ていきましょう。
まずはulタグです。こちらは項目を並べるHTMLタグになります。各項目の先頭には、点（・）が表示されたりします。リスト全体をulタグで囲み、リストの各項目はliで囲まれます。
<ul> <li>赤</li> <li>青</li> <li>緑</li> </ul>
実際には、下のようにページに表示されます。
・赤
・青
・緑
次は、olタグです。使い方はulタグと同じです。
<ol> <li>赤</li> <li>青</li> <li>緑</li> </ol>
ulタグとの違いは、ページに表示されたときにわかります。下の表示例を見てください。
１．赤
２．青
３．緑
つまり、olタグには順序があるのです。順序が関係ない場合はulタグを、順番があるのであればolタグを使うようにしましょう。
引用（blockquote）
ブログでは他のページから文章を引っ張ってくるときなど、引用を表示することもあるでしょう。HTMLではblockquoteという専用のタグが用意されています。使い方ですが、下のように引用文をblockquoteタグで囲むだけでOKです。
<blockquote>ここに引用文を書く</blockquote>
cite属性を使って、引用元を明示することも可能です。
<blockquote cite="引用元のURL">ここに引用文を書く</blockquote>
ニュースでも著作権の問題が注目を集めていますし、ブログでも引用についてはしっかりとしていきたいところですね。
あとがき
ブログなどのコンテンツ制作者が知っておくべきHTMLについて解説しました。見た目を整えることもそうですが、より魅力的なブログを作っていくためにはHTMLの知識は欠かせません。記事では基本的なものをご紹介しましたが、その他にも便利なタグはいろいろとあります。実際にブログを運用しながら、うまく使っていってください。