HTMLタグの基礎知識

2018.05.17 2018.05.21記事作成について
HTMLタグの基礎知識

WordPressでは、HTMLタグを知らなくてもページを作成できます。

しかし、やはり知っているのといないのとではページの見やすさ、SEO的な効果などに無視できない差が出てきます。

重要なタグだけでも使えるようにしておくことで、将来的な収益に大きな違いを生み出します。

是非、この機会に身につけてしまいましょう。

HTMLとは？

HTMLタグとSEO

HTMLタグにはそれぞれ意味があり、HTMLタグで文章を囲うことで、その文章が文書内でどんな役割や意味を持つものかを示しています。

そのため、検索エンジンはこのHTMLタグによって、文書内の重要な要素は何であるかを判別し、検索結果に反映しています。

「SEOでは見出しにキーワードを入れることが重要」と言われるのはこのためです。

ブロック要素とインライン要素

HTMLタグには大きく分けて「ブロック要素」と呼ばれるものと「インライン要素」と呼ばれるものがあります。

ブロック要素は文書の骨組みとなるもので、一つのかたまり(ブロック)として扱われます。具体的には、見出しや段落、表などです。

主な特徴としては、前後で改行され、デフォルトの状態でコンテンツ幅いっぱいに表示されるということです。

CSSで幅や高さなどサイズを指定することができ、レイアウト上大きな役割を果たします。

一方インライン要素は、文章の一部として扱われ、段落などの文章のかたまりの中の一要素として認識されます。

インライン要素の前後には改行が入らず、幅・高さなどサイズの指定ができません。

正確には、現在ではブロック要素とインライン要素という概念は廃止されています。しかし両者間でレイアウト状の性質に違いがあるため、ここではその説明のため各HTMLタグを「ブロック要素」「インライン要素」としてご説明しています。

よく使われるHTMLタグ

Webページ作成においてよく使われるHTMLタグをご紹介します。ここにあるものだけでも覚えておけば、ブログ記事作成に困ることはないでしょう。

なお、HTMLタグには終了タグがあるものとないものとがありますので、注意してください。

pタグ

<p>ここに文章を入力します。このタグに囲まれた部分が段落として認識されます。</p>

段落を示すタグです。

上記のような形で段落としたい文章のかたまりをpタグで囲むことで、その部分が段落として扱われます。

brタグ

<p>ここに文章を入力します。<br>このタグに囲まれた部分が段落として認識されます。</p>

文章を改行するためのタグです。閉じタグはいりません。

<br><!-- これだけでOK -->
<br></br><!-- こういう書き方はしない -->

brタグに関して注意したいのは、スペース(行間)を空ける目的で使用しないということです。

そういう使い方をしてしまうと、検索エンジンが文章構造を正しく認識してくれず、SEO的に不利になるおそれがあります。

スペースを空けたい場合にはpタグを使って段落を分ける、CSSによってマージン(余白)を指定するようにしましょう。

divタグ

<div>
  <p>ここに文章を入力します。このタグに囲まれた部分が段落として認識されます。</p>
  <p>ここに文章を入力します。このタグに囲まれた部分が段落として認識されます。</p>
  <p>ここに文章を入力します。このタグに囲まれた部分が段落として認識されます。</p>
  <p>ここに文章を入力します。このタグに囲まれた部分が段落として認識されます。</p>
</div>

divタグで囲まれた部分は、一つのかたまりとして扱われます。

いくつかの段落をまとめたり、ヘッダー・フッター・サイドバーなどの文書全体の骨組みを作るときに使われます。

aタグ

<p>リンクタグで囲まれたテキストに<a href="http://xxxxxxxxx.com">リンク</a>を設置できます。</p>

文章にリンクを挿入するためのタグです。

テキストや画像などをaタグで囲むと、その部分にリンクを設置できます。

「href=””」には、リンクしたいページのURLを入力します。

また、リンク先のページを別タグで開くようにしたい場合は下記のように「target=”_blank”」を追加します。

<p>リンクタグで囲まれたテキストに<a href="http://xxxxxxxxx.com" target="_blank">リンク</a>を設置できます。</p>

なお、すべてのリンクを別タブで開くようにしてしまうと、ユーザーにとっては使いづらくなってしまいます。

「ブログ内リンクは同一タブ、外部サイトは別タブ」など自分なりにルールを設けて、使いやすさを意識して設定するようにしましょう。

spanタグ

<p>spanタグで囲まれた部分は<span>インライン要素のかたまり</span>として扱われます。</p>

spanタグはdivタグと同様、一つのまとまりとして扱われます。

divタグとの違いは、divタグはそのまとまりがブロック要素として扱われるのに対し、spanタグはインライン要素のまとまりとして扱われる点です。

そのため、divタグは前後に改行が入りますが、spanタグには入りません。

文章の中のある特定の箇所にスタイルを指定したい場合などに便利です。

h1～h6タグ

<h1>このタグで囲まれた部分が見出しになります。</h1>
  <h2>このタグで囲まれた部分が見出しになります。</h2>
    <h3>このタグで囲まれた部分が見出しになります。</h3>
      <h4>このタグで囲まれた部分が見出しになります。</h4>
        <h5>このタグで囲まれた部分が見出しになります。</h5>
          <h6>このタグで囲まれた部分が見出しになります。</h6>

h1～h6タグで囲まれた部分は、見出しとして扱われます。

h1がもっとも大きなかたまりの見出し(大見出し)で、h2、h3、h4、……　の順により小さな見出し(中見出しや小見出し)として扱われます。

見出しは、SEO的にも特に重要視されるタグとされています。

また、記事を書く上でも読む上でもまとまりも出ますので、必ず使うようにしましょう。

なお、見出しタグは数字を飛ばして使うのはヨシとされていません。

あるかたまりの中でh2タグのあとにh3タグを飛び越えてh4タグを使うというようなことはしないでください。

ulタグ・olタグ

<ul>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>

<ol>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ol>

リスト(箇条書き)として表示したい場合には、ulタグとolタグを使用します。

ulタグでは一般的に各項目の先頭に「●」が、olでは数字が付きます。リスト内の項目はliタグで囲います。

また、リストは入れ子(ネスト化)することができ、リストの中にさらにリストを作ることもできます。その場合、ulタグの中にolタグを使ったり、またその逆も可能です。

<ul>
  <li>リスト項目</li>
  <li>リスト項目
    <ul>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
    </ul>
  </li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>

ダラダラと文章で説明するよりも、箇条書きで書いた方がスッキリして伝わりやすいというケースはよくあります。

使いどころだと思ったら積極的に使うようにしましょう。

dlタグ

<dl>
  <dt>リンゴ</dt>
  <dd>バラ科リンゴ属の果実。赤くて甘酸っぱい。</dd>
</dl>

ある単語・語句とその説明を入力する場合には、定義リストが便利です。

上記のような形でdtタグで説明したい語句を入力し、ddタグにその説明を入力します。

tableタグ

<table>
  <tr>
    <th>くだもの</th>
    <td>ミカン</td>
    <td>リンゴ</td>
    <td>ブドウ</td>
    <td>バナナ</td>
  </tr>
</table>

tableタグで表を作ることができます。

tableタグ内のtrタグは横一行を定義し、thタグは見出し、tdタグは内容を入力する際に使用します。

上記の入力例だと、「くだもの」という見出しの横に「ミカン」などの内容を表示しています。

なお、セルを結合したい場合には、colspanとrowspanを使用します。

<table>
  <tr>
    <th colspan="2">くだもの</th>
  </tr>
  <tr>
    <td>ミカン</td>
    <td>リンゴ</td>
  </tr>
  <tr>
    <td>ブドウ</td>
    <td>バナナ</td>
  </tr>
</table>

<table>
  <tr>
    <th rowspan="4">くだもの</th>
    <td>ミカン</td>
  </tr>
  <tr>
    <td>リンゴ</td>
  </tr>
  <tr>
    <td>ブドウ</td>
  </tr>
  <tr>
    <td>バナナ</td>
  </tr>
</table>

colspanは横方向の結合、rowspanは縦方向の結合、横の数字が結合したいセルの個数です。

blockquoteタグ

<blockquote>他のブログや書籍などから引用した文章は、ここに入力します。</blockquote>

引用を示すタグです。

ブログを運営していると、ときに他のブログや書籍の文章を引用して紹介したいときがあります。

そんなときには、上記のような形で引用タグを使います。

引用タグを使うことで、その文章が他からの引用であることを示すことができます。

このタグを使わずに引用してしまうと、検索エンジンにコピーコンテンツと判定されてしまうおそれがありますので、引用の際には必ず使うようにしましょう。

imgタグ

<img src="images/xxxxx.png" alt="画像の説明">

画像を表示したいときには、imgタグを使います。

「src」に画像ファイルへのパスを入力し、「alt」には画像の説明を入力します。

何らかの理由で画像を表示できない場合などに、alt属性に入力したテキストが代わりに表示されます。

そのため、alt属性には「それが何の画像であるか」が分かるテキストを記述しておきましょう。

また検索エンジンは、文章は判別できても画像は判別できません。

そのため、このalt属性によって情報を取得しています。できるだけ記述しておきましょう。

alt属性に特に入力しておくことがなくても、「alt=””」というような形で記述しておいてください。

hrタグ

<p>前の段落の文章が入力されています。</p>
<hr>
<p>話題が変わって次の段落が始まります。</p>

hrタグで水平線を挿入できます。

ある話題から別の話題にガラッと変わるときなどには、あいだに水平線を挿入すると見た目にも分かりやすいです。

同じブロック内で内容が変わるときなどに活用してください。

HTMLマークアップのコツ

最低限、以上のタグを覚えておけば、WordPressで記事を書くときに困ることはあまりなくなるでしょう。

もちろんこれ以外にもHTMLタグはたくさんありますが、ブログを運営しながら少しずつ身につけていけば大丈夫です。

文章にHTMLタグを打ち込んでいくことをマークアップと言いますが、HTMLマークアップを上達するコツは、文章の構造や各パーツの役割(見出しなのか本文なのか？など)を考えながら作業をする癖をつけることです。

また、マークアップには「こうじゃなくちゃいけない」という正解はありません。

もちろん一つ一つのタグに意味や役割はありますが、人によって文章構造の解釈が違うことは当然ですし、それによって使用するタグが変わってくるのも自然なことです。

SEO的に重要なタグもあるので、まったく気にしないのはまずいですが、難しく考えすぎず、少しずつ覚えていって頂ければと思います。

HIGHLANDをダウンロード

今すぐダウンロード
柴田竹思

柴田竹思

WordPress案件を得意とするWebクリエイター。ベトナム在住。大手企業や教育機関などの大規模制作案件、フリーランス・個人事業主のスタートアップから売上を伸ばしていくお手伝いなど、わりと幅広くWeb関連の仕事をしています。

関連記事