WordPress初心者が最低限知っておきたいhtmlタグを9個紹介

仕事や個人のブログでWordpressを使っている人は多いです。でも……

多くの方がこのような悩みを持っていますよね。

実は、これらの悩みは、HTMLタグの知識を身に付けることで解決することが多いのです。

HTMLタグには難しいイメージがあったり、そもそもHTMLタグってなに？という方もいらっしゃるでしょう。そのような方にもわかりやすいように、本記事ではWordPress初心者の方に向けて最低限知っておきたいHTMLタグを9個紹介します。ぜひ、参考にしてみてください。

すぐに理解できる：HTMLタグの基礎知識

HTMLタグとは、HTMLというマークアップ言語をコンピュータに文書の意味を理解してもらうために、タグ付けをしたものです。HTMLタグは< >(大なり小なり)の記号で囲んで使用します。

HTMLタグの存在があることで、文章構造や役割をコンピューターに正確に伝えることが出来ます。基本的に、HTMLタグは、指定したい範囲をタグで囲みます。

例：<◯◯>テキスト</◯◯>

HTMLタグはWordPressの「テキスト投稿」に使用

WordPressのエディター(編集画面)は、以下の2種類があります。

• ビジュアル投稿の画面
• テキスト投稿の画面

ビジュアル投稿の画面にはHTMLタグがなく、直感的な操作が可能です。一方、テキスト投稿の画面はHTMLで囲まれています。

##WordPressをプレス初心者が最低限知っておきたいHTMLタグ9選

1. 見出しタグ(h1～h6タグ)

見出しタグは、コンテンツ内の階層構造を表すタグで、「h(heading)」で表します。見出しタグは、h1～h6タグの順番に使用します。

WordPressでは、基本的にh1タグは本文の記事タイトル部分に設定されており、投稿ではh2タグから設定することになります。

例えば、タイトルの次に大きな見出しは、

<h2>テキスト</h2>

と表します。

見出しタグの注意点

見出しタグの注意点は、「使用する順番を守ること」です。具体的な話をすると、h2タグの直下にh4タグがあったり、h3タグの直下にh6があるのは間違った使い方ですね。

<h1>記事タイトル</h1>

　<h2>テキスト</h2>

　　<h3>テキスト</h3>

　<h2>テキスト</h2>

　<h2>テキスト</h2>

　　<h3>テキスト</h3>

　　　<h4>テキスト</h4>

　　　　<h5>テキスト</h5>

　　　　　<h6>テキスト</h6>

　　　<h4>テキスト</h4>

　　　　<h5>テキスト</h5>

　　　　　<h6>テキスト</h6>

このように使用しましょう。

2. pタグ

pタグは、文章の区切りごとに設定されます。pは「paragraph」の頭文字です。Wordpressでは、ビジュアル入力で改行をした場合に、それぞれの文が<p></p>で囲われるようになっています。

上の文章をpタグで囲むと、以下のようになります。

<p>pタグは、文章の区切りごとに設定されます。pは「paragraph」の頭文字です。</p>

<p>WordPressでは、ビジュアル入力で改行をした場合に、それぞれの文が<p></p>で囲われるようになっています。</p>

3. brタグ

brタグは、テキストの改行をしたい箇所に設置をします。brは「break」の頭文字です。文章の途中で改行をしたいけど、段落では分けたくないという場合に使用します。

注意点として、brタグは、閉じタグが必要ありません。

今回扱うタグの中では、このbrタグと次のimgタグが閉じタグを必要としません。

4. imgタグ

imgタグは、ページに画像を設置する場合に用います。imgは画像を意味する「image」の頭文字です。imgタグも、閉じタグが不要です。

「src=””」の「””」の中に画像のURLを入れ、「alt=””」の中には画像の説明文を入れます。

「<img src=”画像URL” alt=”画像説明”>」という形になります。

5. aタグ

aタグは、リンクを設定するために用いられるタグです。aは「anchor」の頭文字です。「href=””」の「””」の中に、遷移したいページのURLを入力します。

「<a href=”遷移したいリンク先のURL”>テキスト</a>」という形で使います。

6.spanタグ

spanタグは、テキストの一部を囲うことで、spanタグにスタイルを充てることができるようになります。

使い方の一例として、「WordPress初心者は<span style=”color:#008000;”>HTMLタグ</span>を覚えておきましょう。」とすることで、「HTMLタグ」というテキストの部分だけ、緑色に変えることが出来ます。

7. bタグ

bタグはただ文字を太くしたい場合に用います。bは「bold」の頭文字です。文字を太くしたい部分を<b></b>で囲んで使用します。

「WordPress初心者は<b>HTMLタグ</b>を覚えておきましょう。」という形で使います。

この場合、「HTMLタグ」というテキスト部分が太字になります。

8.リストタグ(<ul>、<ol>、<li>)

リストタグは、コンテンツ内に箇条書きしたい要素がある場合に使用します。リストタグには<ul><ol><li>の３種類のタグがあり、以下のような使い方をします。ulは番号がついていない箇条書きリストで、olは番号つきの箇条書きリストです。

<ul>

<li>リスト</li>

<li>リスト</li>

<li>リスト</li>

</ul>

<ol>

<li>リスト</li>

<li>リスト</li>

<li>リスト</li>

</ol>

このように記述すると、ブラウザ上では、以下のように表示されます。

・リスト

・リスト

・リスト

1.リスト

2.リスト

3.リスト

9.テーブルタグ(<table>、<tr>、<th>、<td>)

tableタグは、表を作成するためのタグです。データなどを表として表示させたい場合に用います。

それぞれのタグには、以下の役割があります。

テーブルタグは、以下のように使用します。

<table>

<tr>

<th>列の項目1</th>

<td>列の内容1</td>

</tr>

<tr>

<th>列の項目2</th>

<td>列の内容2</td>

</tr>

<tr>

<th>列の項目3</th>

<td>列の内容3</td>

</tr>

<tr>

<th>列の項目4</th>

<td>列の内容4</td>

</tr>

</table>

ブラウザ上では、以下のように表示されます。

列の項目1　列の内容1

列の項目2　列の内容2

列の項目3　列の内容3

列の項目4　列の内容4

まとめ：WordPressでHTMLタグを活用しよう

本記事では、WordPress初心者が最低限知っておきたいHTMLタグを11個、使い方と合わせて紹介しました。

HTMLタグを上手に活用することで、WordPressでできることの幅が広がります。ぜひ、HTMLタグをマスターして、WordPressを使いこないていきましょう。