ビジュアルエディタを使ってブログを書いているなら、細かい HTML タグを覚える必要はないかもしれません。
でも、記事を書くことにちょっと慣れてきたなら、各タグの使い方と役割を理解しておくことでさらに読みやすい記事が書けるようになると思います。
そこで今回はブログ記事内でよく使うタグをまとめました。もしかすると使ったことがないタグがあるかも！？
Headline
HTMLタグの基本的な使い方
まず基本の “キ” からおさらいしておきましょう。
タグは半角英数字と半角記号を使いますが、英字に関しては大文字でも小文字でもかまいません。ただ、HTML に似た XHTML というものがあって、この場合はすべて小文字にしなければならない、というルールがあります。
詳しい説明は省きますが、混同を避けるために「HTML タグは小文字で書く」というのが一般的です。
開始タグと終了タグとは
タグには大きく分けて 2 種類あります。
- 開始タグと終了タグを必要とするもの
- 開始タグのみで OK なもの（空要素）
たとえば、段落を意味する p はこのように使います。
<p>ここがひとつの段落となります。</p>
スラッシュ「/」をつけることで「閉じる」という意味をもつ終了タグになります。
通常はこのように <開始タグ> ～ </ 終了タグ> で要素を囲むのですが、改行を意味する br は、というと…
任意の場所で改行させてみましょう。<br>
あまり多用すると読みづらいかも？
要素を囲むのではなく、単独で置かれていますね。このように囲む要素がないタグを「空要素」といいます。
ややこしいことに、XHTML では空要素も閉じる必要があります。br はこのように記述しなくてはなりません。
XHTML だと空要素にスラッシュが必要になります。<br />
HTML5 ではスラッシュがあってもなくてもかまいません。
ちなみに、「 br 」と「 / 」のあいだには半角スペースをいれます。
WordPress であれば、テーマによって HTML なのか XHTML なのか変わります。どちらが使われているのかわかりづらいですし、後々テーマを変更した時に手直しするのは大変なのでこのように統一しておきましょう。
- タグはすべて小文字で書く
- 空要素にもスラッシュをつける
実際には記述ミスがあっても見た目には問題ないのですが、僕は几帳面な A 型なので気にしてしまいますｗ
参考HTML・CSS・WordPressテーマをチェックできる無料サービス一覧
タグにつける属性とは
各タグには以下のように「属性」をつけることができます。
<p 属性=”値”> ～ </p>
たとえば、このような使い方をよく見るんじゃないでしょうか。
<p class=”red”>この段落には “red” というクラス名がつきます。</p>
.red {
color:red;
}
この段落には “red” というクラス名がつきます。
このクラス名は、おもに CSS のスタイルを適用したいときに使います。
上の例では「.red」に赤文字を指定しているので、<p> で囲まれたテキストが赤文字で表示されています。
「擬似クラス」というものを使うと、こんな指定もできます。
ここにカーソルを乗せてみてください。
.blue{
color: #3300ff;
}
.blue:hover {
background: #ffff99;
}
カーソルを乗せると、テキストの背景色が黄色になりますよね。
属性はたくさんあって、タグごとに使えるものも変わります。すべて覚える必要はありませんが、class だけでも覚えておくといろんな表現ができて楽しいですよ！
タグを入れ子にするとは
HTML タグは入れ子にして使うことができます。
タグの中に、さらにタグがあるということですね。
<p><strong> ここが強調文字 </strong> になります。そのほかは普通の文字です。</p>
でも、このように順番が前後してしまうと NG。
<strong><p> ここが強調文字 </strong> になります。そのほかは普通の文字です。</p>
ブログ記事内なら複雑な入れ子を使うことはありませんが、基本として覚えておきましょう。
ブログ記事でよく使われているタグ一覧
それでは、記事でよく使うタグをご紹介していきます。
見出しタグ h1 ～ h6
見出しタグは文字どおり見出しに指定するもの。<h1> から <h6> まで 6 段階あって、若い番号のほうが強い意味を持ちます。
テーマにもよりますが、記事タイトルには最も大きな見出しとして <h1> が割り当てられていることが多いですね。
この場合、記事内の大見出しを <h2>、中見出しを <h3> と順番に使っていくのが理想です。いまご覧いただいているこの記事も、こんな風になっています。
<h1>ブログ初心者が…（記事タイトル）</h1>
<h2>HTMLタグの基本的な使い方</h2>
<h3>開始タグと終了タグとは</h3>
<h2>ブログ記事でよく使われているタグ一覧</h2>
<h3>見出しタグ h1 ～ h6</h3>
ただダラダラと文章が続いているよりは区切りがあって読みやすいと思いますし、検索エンジンもこの見出しを評価対象としています。
あまりに記事が短い場合には不要だと思いますが、長くなってしまうなら使ってみてください。のっぺりとした文章にメリハリがつきますよ。
WordPress では、プラグインを使ってこの見出しから目次を自動生成することもできます。
参考WordPressで見やすい目次を簡単に作る「Table of Contents Plus」
段落タグ p と改行タグ br
段落や改行に関しては、ビジュアルエディタを使っているならとくに意識する必要はありません。
WordPress のように、HTML モードで書いていても <p> と <br> だけは自動挿入されることがありますしね。
でも、段落と改行がもつ意味に関してはちょっと考えたほうがよいかもしれません。
参考連続改行brはNG！？覚えておいて損はない改行と段落の使い分け方
句読点を目安にこまかな改行をいれたり、ひとつの段落がやたらと長かったり、1 行ごとに間隔をあけたり。ここら辺は書き手のセンスというか特徴が現れる部分です。
今はタブレットやスマホでブログが読まれることが多いので、PC での見た目だけ考えて書くのではなく、スマホでの読みやすさも考慮しなければなりません。
これが正解だ！ というのは残念ながらないのですが、せめて自分のルールだけは徹底したほうが全体の統一感が生まれてスッキリした記事になると思います。
リストタグ ul ol
リストタグは箇条書き用のタグです。
<ul> は順序のないリスト、<ol> は順序があるリストをあらわしていて、どちらも <li> と組み合わせて使います。
<ul>
<li>ここが 1 つめ</li>
<li>ここが 2 つめ</li>
</ul>
<ol>
<li>ここが 1 つめ</li>
<li>ここが 2 つめ</li>
</ol>
実際に表示すると、<ul> にはただの点がつき、<ol> には数字が振られます。
- ここが 1 つめ
- ここが 2 つめ
- ここが 1 つめ
- ここが 2 つめ
点や数字の種類は CSS の「list-style-type」で変更可能です。
参考list-style-type－スタイルシートリファレンス
単純に <br> で改行して箇条書きにしてもよいのですが、リストタグを使うことで検索エンジンが構造を認識しやすくなる、というメリットがあります。
リストを多用すれば検索順位が上がるわけではありませんが、せっかくタグが用意されているのですから使うべきところには使いましょう。
リンクタグ a
このタグに関しては説明するまでもないかもしれませんが、他のサイトや自分のブログ記事へリンクをはるときに使います。
<a href=”URL”>テキストまたは画像</a>
「href」が属性、「URL」が値となっているわけですね。
その他にこんな属性が使えます。
| 属性 | 値 | 概要 |
|---|---|---|
| target | _blank | リンクを新規タブで開く |
| rel | nofollow | リンク先をクロールさせない |
| rel | noreferrer | リンク先にリファラーを伝えない |
target 属性
まず、リンクをどのように開いてもらうのかを指定する target 属性から。
何も指定してない場合は現在のタブでリンクが開かれますが、「_blank」を指定すると新規タブでリンクが開かれます。
<a href="https://naifix.com/" target="_blank">新しいタブまたはウィンドウでリンクを開きます</a>
このほかにも「_self」や「_parent 」という値があるのですが、使う機会はほぼないので覚えなくてもよいでしょう。
rel 属性
つづいて、リンクのタイプを指定する rel 属性です。
<a> では、「検索エンジンのクローラーにリンク先を巡回させない」という意味をもつ nofollow を使うことが多いかもしれません。
SEO 関連でよく話題になるのですが、あまり意識する必要はないかなと思います。とくに 内部リンクの nofollow は取り扱いに注意しましょう。
nofollow 以外に「noreferrer」という値もあります。
<a href="http://www.love2labo.com/" target="_blank" rel="noreferrer">参照元をあめたまさんに伝えません</a>
アクセス解析で参照元（どこからきたのか）を見ることができますが、この値をつけることで参照元をわからなくできます。
サンプルでは、Love2Labo.com 管理人のあめたまさんがアクセス解析を見ても、参照元に naifix.com が表示されません。
個人的にブログで使ったことはないのですが、ご参考までに。
画像タグ img
<img> は記事内に画像を出したいときに使うタグです。空要素のため、スラッシュをつけておきましょう。
<img src=”画像までのパス” />
よく使われる属性はこちら。
| 属性 | 値 |
|---|---|
| src | 画像 URL（※必須） |
| alt | 代替文字列（※推奨） |
| width | 画像の横幅（単位は px） |
| height | 画像の高さ（単位は px） |
alt 属性の役割
「alt」で指定されたテキストには以下の役割があります。
- 画像が読み込まれない場合の代わり
- 検索エンジンに画像の内容を伝える
- 音声読み上げ
“SEO で重要だから” という説明が多いですが、本来は “ブログに訪れてくれた読者のため” のものです。
HTML5 では alt を省略してもよいことになっていますが、個人的には必須属性だと思います。とくにブログ名のロゴや記事内で重要な意味を持つ画像の場合は必ずいれておきましょう。
アイコンなど重要な意味をもたない画像は、 alt の値を空白にしておくのがよいですね。
width と height 属性
width と height は記事の表示スピードに関わってくるため、必ず入れておくべき属性と認識されていました。
表示スピードをテストする GTmetrix でも、「Specify image dimensions」という項目で画像に width と height を付与するよう注意が出ます。
しかし実際のところ、ブログ記事で使うような画像であれば、この属性は表示速度にそれほど影響しません。
また、width=”600″ とした画像をスマホで見た場合にどう処理されるのか、という疑問も出てきます。この場合は CSS の設定が優先されるのですが、それなら width 属性は必要ないのではとも思います。
いろいろな見解がありますが、つけておくのが無難、といったところでしょうか。
特にこだわりがなければ、<img> はこのように指定しておくのがベストということです。
<img src="image/beautiful-girl.jpg" alt="きれいなお姉さん" width="300" height="200" />
強調タグ strong
<strong> は読者や検索エンジンに重要な語句を伝えます。
<strong> 僕の師匠は T.Murakami さんです </strong>
必要な属性はとくにありませんが、CSS を設定してクラス名をつけておくと同じタグでも見た目が変わります。
ブログを書く側からすると、あれもこれも重要でいたるところに <strong> をつけたくなりますが、読む側からすれば重要なポイントは数点しかありません。
乱用しても SEO に有利なことはありませんので、文章内の最も重要な部分に使いましょう。
範囲定義タグ span
<span> というタグ自身には何の意味もありません。「ここからここまで」を定義するものです。
Naifix は <span class=”red-border”> 1 歳 6 ヶ月 </span> になりました！
.red-border {
border-bottom: 2px solid #cc0033;
}
Naifix は 1 歳 6 ヶ月 になりました！
文章にアクセントをつけたいけれど、<strong> を使うほど重要なキーワードではない… というときに使えます。
引用タグ blockquote
<blockquote> は引用部分を明確にするためのタグです。
<blockquote cite=”https://naifix.com/seek/”>
<p>記事本文の一部を紹介して、そこにひとこと付け加えるだけで終わるなら引用とは言えません。</p>
</blockquote>
cite 属性に引用元の URL を入れることができますが、これは必須ではありません。それよりも、目に見える部分に引用元へのリンクをおく必要があります。
記事本文の一部を紹介して、そこにひとこと付け加えるだけで終わるなら引用とは言えません。
<blockquote> を使えばなんでも引用とみなされるわけではありません。
要件を満たしたものだけが引用となり、タグはそれを補完するものです。
表タグ table
表を作成するには、<table> <tr> <td> をワンセットで使います。
<table>
<tr>
<td>左上</td>
<td>右上</td>
</tr>
<tr>
<td>左下</td>
<td>右下</td>
</tr>
</table>
| 左上 | 右上 |
| 左下 | 右下 |
<tr> が横 1 行で、<td> が各セルです。
また、<td> のかわりに <th> を使うと、そのセルが見出しという定義になります。CSS では太文字でセンタリングされていたり、背景色がつけられていることが多いですね。
<table>
<tr>
<th>左上</th>
<th>右上</th>
</tr>
<tr>
<td>左下</td>
<td>右下</td>
</tr>
</table>
| 左上 | 右上 |
|---|---|
| 左下 | 右下 |
属性をつけると、セルを結合させることができます。
colspan 属性
「colspan」はセルを横方向に結合します。<td> または <th> で使います。
<table>
<tr>
<td colspan=”2″>上</td>
</tr>
<tr>
<td>左下</td>
<td>右下</td>
</tr>
</table>
| 上 | |
| 左下 | 右下 |
値に入れる数字は「セルを何個つなぐのか」を表しています。
rowspan 属性
「rowspan」は縦方向の結合です。こちらも <td> または <th> で使います。
<table>
<tr>
<td rowspan=”2″>左</td>
<td>右上</td>
</tr>
<tr>
<td>右下</td>
</tr>
</table>
| 左 | 右上 |
| 右下 |
colspan と同じく、値には結合するセルの数を入れます。
表を簡単に作成する方法
HTML4 ではほかにも見た目を調整するいくつかの属性がありますが、HTML5 ではほとんど廃止されました。そのため、デザインはおもに CSS で設定していく必要があります。
もっとも、手打ちで複雑な表を作るのはかなり面倒な作業ですから、ツールを使って挿入するのがおすすめです。
Excel の表を HTML に変換してくれるツールなんか便利ですよね。
参考ブログへの表挿入に。エクセル表からHTMLテーブルを作ってくれるツールが便利すぎる
WordPress ならプラグインを入れればビジュアルモードで簡単に表を作成できます。
細かい修正を必要とする場合もあるので、基本的な部分だけでも理解しておきましょう。
まとめ
本日ご紹介したタグをまとめてみます。
| <h1> ～ <h6> | 見出し |
|---|---|
| <p> | 段落 |
| <ul>・<ol> | 箇条書き |
| <br> | 改行 |
| <a> | リンク |
| <img> | 画像表示 |
| <strong> | 強調文字 |
| <span> | 範囲定義 |
| <blockquote> | 引用 |
| <table> | 表組み |
このほかにも <div> や <dl> などがありますが、とりあえずご紹介したタグだけでそれなりの記事が書けると思います。
すべて覚えるのは大変かもしれませんが、それぞれのタグがもつ意味は何となくでも理解しておきたいところ。
もしかして、たんにテキストを太字にしたいなと思ったときに <h2> を使ったりしていませんでしたか？ これでは全体の構造が崩れてしまい、検索エンジンが理解しづらい記事になってしまいます。
小手先の SEO テクニックを取り入れる前に、まずはしっかりと基本をマスターしておきましょう。最も大切なのは、人が読みやすい書き方ですけどね。
それでは、また。