月額5万円から始めるWebコンサルティング|Sense Literacy

WordPressでよく使うHTMLタグ10選と使用方法

WordPressでコンテンツ制作をおこなう際、「HTMLタグ」を使用します。
HTMLタグとは、見出しや太字など、文字に装飾を施したり、図表や画像を表示させるためのタグのことをいいます。

ウェブページを制作するためには、構造を定義する「HTML」というプログラミング言語がベースとなっています。
表示したい文字や情報を「HTMLタグ」で挟むことで、表現します。

今回のレクチャーでは、HTMLタグのルールを解説していきます。
また、記事の後半では、WordPressでのコンテンツ制作に役立つHTMLタグを紹介します。
これからWordPressでコンテンツ制作をはじめようと思っている方は、ぜひ参考にしてくださいね。

リサ

HTMLタグは、使いはじめの頃はやや高度に感じるかもしれませんが、慣れれば、よりオリジナリティ溢れるコンテンツをつくることができるようになりますので、頑張って使いこなせるようにしましょう!

HTMLタグとは?

HTMLは、ウェブページのベースとなる、情報の「構造」を定義するプログラミング言語です。
「Hyper Text Markup Language」の略で、直訳すると「ハイパーテキストに目印をつける言語」という意味の通り、書かれている情報がどのような構造なのか、伝える役割があります

HTMLタグとは?

記載される情報がどのような構造なのか、目印をつけることを「マークアップ」といい、そのために「HTMLタグ」を使用します。
HTMLタグは、「<>」で囲まれた英数字と記号でできており、HTMLタグを使用することで、情報の構造を伝えることができます

HTMLは、スラッシュなしの開始タグと、スラッシュありの終了タグで囲むのが、絶対のルールです。

例えばヘッダーやフッター、サイドバーといった、ウェブサイトのレイアウトはHTMLによって定義されます
コンテンツ制作では、文字に装飾を施したり、図表や画像を挿入することができます

ちなみに、ウェブページは、HTMLだけではなく、CSSやJavaScriptなどの他の言語を組み合わせて制作していきます。

Dr.TD

キーワード
  • タグ:開始タグと終了タグをまとめた呼称。
  • 開始タグ:「要素」の先頭にあるタグ。「属性」を含めることが可能。
  • 終了タグ:「要素」の末尾にあるタグ。「属性」を含めることはできない。
  • タグ名:タグを表す名称。
  • 属性:「属性」を使うことによってタグに追加の情報を与えることができる。
  • 属性値:「属性」に設定したい値を記述する。
  • 要素の内容:タグで囲まれた情報。
  • 要素:開始タグから終了タグまでのすべての情報。

WordPressでHTMLタグを使おう!

WordPressでHTMLタグを使おう!

WordPressでコンテンツ制作をする際、HTMLタグは投稿画面の「テキストエディタ」で使用します。
改行や段落分けは、タグを挿入しなくても自動で反映されますが、見出しや、文字の装飾、図表、画像の挿入は、HTMLタグを使用します。

コンテンツ制作においてHTMLタグは、もちろん情報の構造を伝える役割もありますが、文字の装飾や図表、画像の挿入など、コンテンツを読みやすくするための意味合いが強いかもしれません

Dr.TD

リサ

HTMLタグを使って、コンテンツを読みやすく、華やかにしましょう!

WordPressでHTMLタグを使おう!

WordPressの投稿機能を使ってコンテンツを公開する方法:HTMLタグを追加する

HTMLタグで装飾したテキストを下書き保存し、プレビューを開くと、画像のように表示されます。
HTMLタグで囲まれた文字は、装飾されていることがわかりますね。

WordPressの投稿画面には、テキストエディタの他に、HTMLタグを使用せずに、直接、文字の装飾や画像の挿入がおこなえる「ビジュアルエディタ」があります。
ビジュアルエディタは、Wordの操作方法に似ており、初心者の方でも直感的にコンテンツ制作がおこないやすい一方、複雑な文字の装飾や図表の作成ができない場合や、意図せぬ装飾が挿入される可能性があります

テキストエディタでHTMLをタグを使用したコンテンツ制作は、はじめのうちは操作が難しく感じるかもしれません。
ただ、少しずつ操作に慣れていくと、ビジュアルエディタよりもテキストエディタの方が、逆説的ではありますが、タグの存在を意識せずコンテンツ制作をおこなうことができます
質の高いコンテンツ制作を目指している方には、テキストエディタの使用をおすすめします。

慣れてくると、プレビューをしなくてもテキストエディタの状態で実際に装飾された状態が、頭に浮かぶようになります。

Dr.TD

リサ

『マトリックス』みたいですね〜!

コンテンツ制作に役立つHTMLタグ10選

ここからは、コンテンツ制作に欠かせない、基本的なHTMLタグを10個紹介していきます。
この他にも、テーマやプラグインによってカスタマイズされたHTMLタグや、複雑な処理を呼び出せるショートコードを活用することによって、よりよいコンテンツ制作をおこなっていきましょう!

WordPressのテキストエディタの上部には、よく使うHTMLタグがボタンになっています。テキストを選択してボタンを押すだけで、かんたんに囲むことができます。

Dr.TD

見出しタグ(h2、h3、h4・・・)

見出しタグ(h2、h3、h4・・・)
見出しタグ(h2、h3、h4・・・)
タグ表記<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
定義見出し
<h1>記事タイトル</h1>

「見出しタグ」は、囲まれた文字列が「見出し」であるという、まさに情報の構造を定義するためのタグになります。
“h”は見出しを意味する「heading」の略です。   

見出しタグ(h2、h3、h4・・・)

見出しとは、コンテンツの階層構造を正しく表現するために使用します。
h1からh6までのタグを順番通りに使うことによって、ユーザーや検索エンジンにコンテンツの階層構造を伝えることができます。
h2の見出しタグの下層には、h3を、h3の次にはh4を、見出しタグは順番通りに正しく使用しましょう

見出しタグは、使いすぎると見辛くなるので、h3くらいまでで収めるととスッキリしていて見やすいです。

WordPressでは、記事タイトルにh1が使われていることが多いので、コンテンツ本文の見出しはh2から使用しましょう!

Dr.TD

見出しタグのデザインは、CSSを使用しておしゃれに装飾することができます。
「Lipple inc.」では、左に線を表示させるデザインを採用しており、他には下線をひく、見出し全体を囲う、背景色をつけるなどの装飾ができますよ。

段落タグ(p)

段落タグ(p)
段落タグ(p)
タグ表記<p></p>
定義段落
<p>テキスト</p>

「段落タグ」の”p”は段落を意味する「paragraph」の略です。
テキストの区切りに設定する必要があります。WordPressでは、テキストエディタでテキストを2回改行すると自動で挿入されます。

意識して使うことはほとんどありませんが、例えば、中央寄せしたい時など、段落を装飾したい場合に、意図的に使用することもあります

ここでは、段落は段落タグが使用されることだけ覚えておきましょう。

Dr.TD

改行タグ(br)

改行タグ(br)
改行タグ(br)
タグ表記<br>
定義改行
テキスト<br>テキスト

「改行タグ」の”br”とは、改行を意味する”break”の略です。テキストを改行したい部分に設置します。
ほとんどのタグには「開始タグ」と「終了タグ」がありますが、改行タグはひとつのタグ単体で定義をおこないます

こういったタグを「空要素」と言います。

Dr.TD

WordPressでは段落タグと同じように、テキストエディタでテキストを改行すると自動で挿入されます
意図的に挿入するタイミングももちろんあります。タグを使った要素の内容で改行をおこないたい時には、改行タグを使用する必要がある場合があります

強調タグ(strong、b)

強調タグ(strong、b)
強調タグ(strong、b)
タグ表記<strong></strong>
<b></b>
定義強調
太字
<strong>強調しています</strong>
<b>太字にしています</b>

「強調タグ」は”strong”を使用します。
文字を太字にして、強調することができます。

太字にすることで、テキストの中で文字列を目立たせることができるので、ユーザーへコンテンツの内容をよりわかりやすく伝えるために使用します
また、検索エンジンに対しても強調していることを伝えることができます。

検索エンジンには強調していることを伝えず、太字にしたい場合には「太字タグ」を使用します。
太字タグの”b”は太字を意味する「bold」の頭文字です。

Googleの公式見解によると、強調タグを使っても、太字タグを使っても、SEOに効果の差はないそうです

参考 Is there a difference between the "strong" and "b" tags in terms of SEO?YouTube
WordPressには、強調タグがテキストエディタにワンクリックで装飾できるボタンも実装されていますので、こだわりがなければ強調タグを使用することをおすすめします。

Dr.TD

スパンタグ(span)

スパンタグ(span)
スパンタグ(span)
タグ表記<span></span>
定義
<span>テキスト</span>

「スパンタグ」は、タグの中で使用することが多いタグです。
例えば段落タグや強調タグの中で、さらに文字を装飾したい場合に使用します。

スパンタグは単独では、ほとんど使うことはありません。
属性でスタイルを指定するなど、初歩的なCSSの知識を使って文字を装飾します。

上の例では、見た目としてはピンクの太字になっていますが、検索エンジンには強調を伝えていません。

他にも赤字にしたいときや、文字を大きくしたときに使ってみましょう。

Dr.TD

引用タグ(blockquote、q)

引用タグ(blockquote)
引用タグ(blockquote)
タグ表記<blockquote></blockquote>
<q></q>
定義引用
<blockquote>引用文です。
引用文です。
引用文です。</blockquote>
<q>引用テキスト</q>

「引用タグ」で囲むことによって、そのテキストが引用・転載文であることを示すことができます。
比較的長いテキストを、段落ごと引用する際に使用します。

改行を伴わない短いテキストでは、”q”を使用して引用・抜粋であることを示します。
引用タグのテキストの下層部には、次に紹介するリンクタグを使用し、引用元をリンクしておくと親切です。

作品やコンテンツからの引用だけではなく、商品説明をそのまま使用するときなどにも使用しましょう!

Dr.TD

リンクタグ(a)

リンクタグ(a)
リンクタグ(a)
タグ表記<a href=""></a>
定義リンク
<a href="https://lipple.co.jp/">株式会社Lipple</a>

「リンクタグ」の”a”は「anchor」の略です。
リンクを設定するために使用するタグです。

リンクタグをそのまま使用しても、リンクは設定できません。
「href」という属性と属性値を使用することで、リンクを設定できます。

リンクタグ(a)

WordPressではリンクにしたい文字列を選択して、リンクのタグボタンを押せばURLを設定するだけで、かんたんにタグを設定できます。
「リンク新しいタブで開く」にチェックをいれると、新しいタブでリンク先を開くリンクになります

HTML
<a href="https://lipple.co.jp/">株式会社Lipple</a>
<a href="https://lipple.co.jp/" rel="noopener" target="_blank">株式会社Lipple</a>

上のリンクタグは、そのままページがリンク先に移動するリンクです。
下のリンクタグは、新しいタブでリンク先が開くリンクになります。

新しいタブでリンク先を開く設定は、外部リンクを設定する場合に使うことをおすすめします!

Dr.TD

画像タグ(img)

画像タグ(img)
画像タグ(img)
タグ表記<img>
定義画像
<img src="画像のURL" alt="画像の説明">

「画像タグ」を使用することで、画像を挿入することができます
“img”はそのまま、画像を意味する「image」の略です。画像のほかにもGIFを挿入することもできます。

画像タグも、テキストエディタの上にある「メディアを追加」ボタンを使って挿入するのが便利です。

細かい調整は挿入されたタグをカスタマイズしましょう。

Dr.TD

WordPressの投稿機能を使ってコンテンツを公開する方法:画像を挿入する

リストタグ(ul、ol、li)

リストタグ(ul、ol、li)
リストタグ(ul、ol、li)
タグ表記<ul></ul>
<ol></ol>
<li></li>
定義リスト
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>

コンテンツ制作で箇条書きしたい要素がある場合は、「リストタグ」を使用しましょう。

「・」を使ったリストを並べるだけでは、箇条書きとして検索エンジンは認識しないので、必ずリストタグを使用しましょう。
リストタグを使うことで検索エンジンに正しく箇条書きを認識してもらえるだけでなく、箇条書きのデザインが整います。

リストタグにはulタグolタグの2種類があります。
ulタグは番号がないリスト表示で、olタグは番号ありのリスト表示が表現できます。
ulタグは「unordered list」の略で、olタグは「ordered list」の略です。

少し複雑なタグに見えますが、箇条書きにしたい項目を並べたら、それぞれをliタグで囲み、上下をulタグかolタグで囲むだけです。

Dr.TD

リサ

慣れればかんたんですよ!

テーブルタグ(table)

リストタグ(ul、ol、li)
リストタグ(ul、ol、li)
タグ表記<table></table>
<tr></tr>
<th></th>
<td></td>
定義テーブル
<table>
<tr>
<th>列の項目</th>
<td>列の内容</td>
</tr>
</table>

「テーブルタグ」は、表を表示させたいときに使用します
少し複雑ですが、コーポレートサイトでも、ブログでも使用するタイミングが必ずあるタグですので、マスターしておきましょう。

表全体をtableタグで定義し、行を意味するtrタグ列の見出しに使うthタグ列の内容を表示するtdタグを使用します。

テーブルタグは最初に作成する表が決まっていれば、リストタグと同じようにタグを前後に囲んで行けばいいのですが、直感的に表を作っていきたいことも多いと思います。

運営しているウェブサイトで、あまり表を使わない場合は、「Table Tag Generator」というサービスを利用しましょう
よく表を使う場合には、「TablePress」というプラグインを活用することをおすすめします。

サービスやプラグインを使って表を作成する場合にも、テーブルタグの基本的なタグの使い方は理解しておくと、表のカスタマイズがかんたんに行えるようになりますよ。

Dr.TD

参考 HTMLの表を簡単に作成・結合ツール。テーブルタグジェネレーターTable Tag Generator 参考 Tables in WordPress made easy.TablePress

まとめ

英数字や記号が羅列されているだけのHTMLタグは、コンテンツ制作初心者の方にとって、抵抗感があるかもしれません。

しかし、HTMLタグは役割や使い方を知ることで、初心者の方でもかんたんに使えるようになります。
特にWordPressのコンテンツ制作で必要なHTMLタグは、基本的かつシンプルなものが多く、はじめてのコンテンツ制作でも活用しやすいものばかりです。

今回紹介したHTMLタグを使用して、読みやすく、華やかなコンテンツ制作を目指してみてください。

次回は、ウェブサイトの運用ツールとして欠かせない「Google Analytics」や「Google Search Console」について解説します!

Dr.TD

リサ

名前は聞いたことはありますが、機能や使い方はさっぱりわかりませんね・・・
しっかり勉強したいと思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です