【HTMLタグ一覧】初心者が最低限おぼえるべき７個＋α

みなさんは普段どのように記事を書いていますか？

ちなみに私は、PCだと「サクラエディタ」、スマホだと「iテキスト」というメモ帳ツール（アプリ）を使って文章を作成しています。

メモ帳の時点で簡単なHTMLタグまで記載しちゃってから、ブログやWordPressにコピペして仕上げます。

まぁどんな方法で書くにせよ、ある程度デザインや文字修飾にこだわって読みやすく工夫するのであれば、

HTMLタグを覚えておくと表現の幅が大きく拡がりますし、便利で時間短縮にもなります。

とはいえすべてのHTMLやCSSを覚えることはけっこう難しいので…

今回は、初心者ブロガーや初心者アフィリエイターが「最低限これだけは覚えておくべきHTMLタグ」というテーマでお届けしたいと思います。

これだけは覚えるべきというのはどのくらいの数かというと、

上記の合計14個です。

これだけ覚えれば初心者としては充分（お恥ずかしながら筆者もこれくらいしか知りません…）。

ぜひこの機会に覚えていただければと思います！

初心者に必要なHTMLタグ一覧

今回ご紹介するHTMLタグを一覧表にしてみました。

ブックマークしておき、慣れるまではこちらの一覧表を見ながら（もしくはコピペしながら）記事を書くと便利ですよ。

名称divタグ名称	役割	使い方
pタグ	段落	<p>～</p>
brタグ	改行	～</ br>
strongタグ	強調	<strong>～</strong>
bタグ	太字	<b>～</b>
nbspタグ	スペース	&nbsp;
hタグ	大見出し 中見出し 小見出し	<h2>～</h2> <h3>～</h3> <h4>～</h4>
titleタグ	タイトル	<title>～</title>
divタグ	デザイン指定	<span>～</span>
spanタグ	デザイン指定	<span>～</span>
tableタグ	表	※table生成ツール
ulタグ liタグ	黒丸つき 箇条書き	<ul> 　<li>～</li> </ul>
olタグ liタグ	番号つき 箇条書き	<ol> 　<li>～</li> </ol>
aタグ	リンク	<a href=”～”>～</a>
色コード	色指定	※原色大辞典
blockquote	引用	<blockquote>～</blockquote>

では1つ1つ簡単に解説していきましょう。

pタグ［段落］

「pタグ」は段落を表すためのHTMLタグです。

…という形でテキストを囲むと、そのテキストは1つの文章のかたまり（一段落）として表示されます。

また、一般的なブラウザではpタグの前後には1行分の改行が入ります。

pタグは無料ブログやWordPressなどで記事を作成する場合、

もっとも使用頻度が高く、もっとも基本的なHTMLタグと言えるでしょう。

筆者の場合は、だいたい一文（文頭から「。」で終わるまで）を一段落としてpタグで囲っています。

さらに2〜3段落続けたあとは、キリのよいところで空白（後述するnbspタグ）を使って箸休め的にスペースを作っています。

なぜかと言うと、段落やスペースが少ないと文章がゴミゴミして見難くなるので、できるだけ細かく段落を区切っているわけです。

とくに一般的なブログのアクセスの7〜8割を占めるスマホユーザーにとっては、

2〜3行（50文字前後）で一段落、話題が変わったらスペースを空ける…というのがもっとも見やすいと思います。

あくまで個人的な感覚値ですけどね。

brタグ［改行］

「brタグ」は改行するためのHTMLタグです。

上記のように文末に記載すると、その部分で改行されます。

ちなみに、ブログ初心者のなかにはbrタグを連続して使うひとも多いのですが、

brタグを連続するのはHTMLのルール上 正しくないとされているのでやめましょう。（たまに私も使っちゃいますが…）

一行分の空白を空けたい際には、brタグの連続ではなく必ず「pタグ」を使ってください。

…って考えると、brタグの使い道って今やほとんどないんですよね。

※ちなみに無料ブログの一部やWordPressでは、そもそもpタグが表示されない（自動で挿入される）ものが多いです。

筆者の場合は、冒頭で書いたようにメモ帳などのツールに一度下書きをしてpタグやbrタグなどのHTMLタグも書いちゃってからブログにコピペしています。

その方がHTMLタグを覚えますし、細かいデザイン調整ができるようになるので初心者にもおすすめですよ。

また、pタグをいちいち書くのはとっても面倒くさいので、

筆者の場合は自動でpタグやbrタグを入れてくれる「PタグBRタグ挿入ツール」を使っています。

便利なのでぜひみなさんも使ってみてください。

strongタグ［強調］

「strongタグ」は強調を表すHTMLタグで、太字で表示されます。

読者に「ここは重要やで！」と伝えたい時に使います。

ちなみに、おなじ太字で表示されるHTMLタグとして、次に説明するbタグというものがありますが、

bタグには強調の意味はなく、ただ太字になるだけです。

だからといってstrongタグとbタグのあいだに実質的な違いはありません。

一部に「strongタグで対策キーワードを囲むと、SEO効果が高こうなる！」という噂がありますが…これはあくまで噂。
Googleもはっきりと「strongやろうとbrやろうと、SEO効果に違いはないんやで！」と明言しています。

bタグ［太字］

「bタグ」は太字で表示したいときに使うHTMLタグです。

前述のとおり、bタグとstrongタグの役割はほとんど一緒です。

どちらも読者に「ここ、めっちゃ重要やねん！」と伝えたい時に使います。

nbspタグ［スペース］

「nbspタグ」はスペース、つまり空白を作るためのHTMLタグ（特殊文字）です。

nbspタグを使うと、ブラウザ上では半角スペースができたように見えます。

「&nbsp;」だけだと正直あまり使いどころはないのですが、「<p>&nbsp;</p>」と表記すれば複数行分の空白を作ることができます。

※ちなみにこの方法はHTML上では正しい記載ではないようです。

空白を作りたい場合はCSSでマージンを指定するなどの方法が良いようですが、筆者は面倒くさいので「<p>&nbsp;</p>」を乱用しちゃってます。

今のところ問題は発生していないので、まぁいいんじゃないですかね…。（テキトー）

hタグ［見出し］

「hタグ」は見出しに使うHTMLタグです。

hタグは「h1」から「h6」まであり、「h1」がもっとも上位の見出しで、数字が大きくなるにつれ下位の見出しになります。

ちなみに、WordPressや無料ブログなどでは「記事タイトル＝h1タグ」に設定されている場合が多いです。

なので、私たちが実際に記事本文内に使うhタグは「h2」以降が中心になりますね。

また、ブラウザ表示上では上位の見出しほど文字の大きさが大きく見た目が派手になるように設定されているはずです。

文章構成上で注意したいのが、見出しの大きさは順番を守り、入れ子方式で使うという点です。

言葉で説明するのが難しいのですが…下記の例を見ていただくと分かりやすいでしょうか。

つまり、上位の見出しのなかに下位の見出しを入れたり、h2のあとにh3を飛ばしてh4を置いたりするのはやめましょうということです。

Googleの中の人は「あんま気にせんでええけど、できればちゃんと使い分けてや！」とおっしゃってますけどね。

ちなみに、hタグはSEOにおいてもそこそこ重要なHTMLタグなので、

検索対策をしたいキーワードは、できるだけhタグの中に含めるようにしましょう。

titleタグ［タイトル］

「titleタグ」はブログやサイトのタイトル（題名）や、そのページのタイトルを指定するためのHTMLタグです。

実際に私たちがtitleタグを書くことはまずありませんが、SEO的にとても重要なタグなので覚えておきましょう。

「titleタグ」の中に書かれたテキストは、そのページの題名になるとともに、Yahoo!やGoogleなどの検索エンジンの検索結果ページに表示されます。

つまりそのページ・記事の「顔」になるということ。

読者はまずタイトルを見てその記事を読むか読まないかを判断しますので、アクセスを集めるためにはめちゃくちゃ大切な要素だと言えます。

当然ながら検索エンジンが「そのページが何について書かれているのか？」を判断する根拠にもなるので、

検索結果の上位にあげたいキーワードは、かならずtitleタグのなかに（つまり記事タイトルのなかに）入れるようにしたいですね。

さて、絶対に覚えるべきHTMLタグは以上です。

次からは知識としてぜひ知っておきたいHTMLタグを紹介しましょう。

divタグ/spanタグ［デザイン指定］

覚えても覚えなくてもいいのですが、知識として知っておきたいのが「divタグ」「spanタグ」です。

「divタグ」「spanタグ」はそれ自体では意味がなく、ブラウザ表示にはなにも影響しません。

ただし、タグで囲むことでテキストをグルーピングして、その部分だけデザインを指定することができます。

デザインとは例えば、色、文字の大きさ、高さや幅などのことです。

指定の方法は…長くなるのでここには書きません。需要がありそうであれば別途記事にしますね。

ちなみにdivとspanの違いですが…

divの中にspanを入れることはよくありますが、spanの中にdivを入れることはありません。

divはspanでもdivでもpでもあらゆるタグを入れることができ大きなグループを作れますが、pタグは小さなグループ（主に文字）しか作れません。

また、divは前後に改行が入りますが、spanでは改行は入りません。

divは幅と高さの指定ができますが、spanは指定できません。

tableタグ［表］

「tableタグ」はテーブル（表）を作るためのHTMLタグです。

「表」は記事をビジュアル的にわかりやすくするために積極的に使いたい表現ですが…

めっちゃ面倒くさいんですよね、tableタグで表を作るのって。

筆者の場合は自分でtableタグを作ることは早々にあきらめて…

エクセルで作った表をコピペするだけで、瞬時にtableタグを生成してくれるというツール「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」を利用しています。

なんてったって初心者ですから。余計なことを覚える必要はありません。

そんな時間があるなら、1つでも記事を多く書くべきですからね。

便利なツールがあるんだから、それを使って賢く時短しちゃいましょう。

ul/ol/li［箇条書き］

「ulタグ」「olタグ」「liタグ」は箇条書きを使うためのHTMLタグです。

「ulとli」はセットで黒丸つきの箇条書き、「olとli」はセットで番号つきの箇条書きに使います。

黒丸のデザインを変えたり、番号をアルファベットにしたりというのもできますが…

これも本記事では省略しますね。

aタグ［リンク］

「aタグ」はリンクを指定するHTMLタグです。

基本的にどんな無料ブログでもWordPressでも、エディター内にリンクを作るボタンがありますので、

自分で「aタグ」を書くことはまずありませんけどね。

aタグは飛び先ページの概要を記載する「alt=”概要を入れる”」や、ページを別タブで開く「target=”_blank」、

おなじページ内の任意の箇所に飛ばす方法（アンカー）などいろいろな小技（？）がありますが…

まあ初心者には難しいので、ここでは省略しておきますね。

カラーコード［色指定］

HTMLでは文字色や背景色、ボックスの枠色や背景色など、

さまざまな箇所に色を指定することができます。

その多くは「div」「span」で使うことが多いですね。

色指定の仕方は省略しますが、カラーコードはけっこう頻繁に使う要素なので参考となるサイトを紹介しておきます。

筆者がよく参考にしているのは「原色大辞典」というサイトです。

ビジュアル的にとても見やすいので重宝しますよ。

blockquoteタグ［引用］

「blockquoteタグ」は他のサイトなどから文章を引用するときに使用するHTMLタグです。

ちなみにblockquoteタグは長い文章を引用するときに使いますが、短い文章や文章の一部だけを引用する場合は「qタグ」を使います。

ちなみに私も知らなかったんですが、引用元を記載するにはaタグでリンクさせるのではなく、cite属性というものを使うようですね。

<blockquote cite=”https://makusan.ne.jp/”>引用文章</blockquote>

というように記載します。

検索エンジンにもちゃんと「これは引用やで！」と理解してもらるように、ちゃんとcite属性を使うようにしましょう。

コメントアウトタグ［非表示］

「コメントアウトタグ」は、ブラウザ上に表示させないようにするHTMLタグです。

メモ書きや、情報を一時的に非表示にしておく際などに使用します。

そこに何が書かれているのかを、自分が後から見るときに分かりやすくするためや、

期間が限定されている情報などを、すばやく表示にしたり非表示にしたりする際に便利ですよ。