基礎的なHTMLタグを覚えよう。ブロガー、アフィリエイター向け

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

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

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

 

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

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

 

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

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

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

最低限覚えるべきHTMLタグ…7個
できれば知識として知っておきたい…7個

 

上記の合計14個です。

 

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

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

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

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

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

名称 役割 使い方
pタグ 段落 <p>~</p>
brタグ 改行 ~</ br>
strongタグ 強調 <strong>~</strong>
bタグ 太字 <b>~</b>
nbspタグ スペース &nbsp;
複数行
の空白
<p>&nbsp;</p>
hタグ 大見出し
中見出し
小見出し
<h2>~</h2>
<h3>~</h3>
<h4>~</h4>
titleタグ タイトル <title>~</title>
divタグ デザイン
指定
<div>~</div>
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タグです。

<p>1つの段落</p>

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

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

 

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

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

 

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

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

 

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

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

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

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

PR

LINE@で「裏ブログ部」はじめます!友だち追加ブログには書けない裏話、収益報告、更新通知、友だち限定情報などを配信(完全無料)!まずは友だち追加を♪

 

brタグ[改行]

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

テキストの最後</ br>
または、
テキストの最後<br>

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

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

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

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

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

 

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

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

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

 

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

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

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

 

strongタグ[強調]

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

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

<strong>強調したいテキスト</strong>

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

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

 

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

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

 

bタグ[太字]

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

<b>強調したいテキスト</b>

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

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

 

nbspタグ[スペース]

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

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

&nbsp;(半角分の空白が空く)

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

 

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

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

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

 

hタグ[見出し]

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

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

<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>

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

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

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

 

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

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

<h2>大見出し</h2>
    <p>本文テキスト本文テキスト</p>

<h2>大見出し</h2>
    <p>本文テキスト本文テキスト</p>
 <h3>中見出し</h3>
    <p>本文テキスト本文テキスト</p>
  <h4>小見出し</h4>
      <p>本文テキスト本文テキスト</p>
  <h4>小見出し</h4>
      <p>本文テキスト本文テキスト</p>
  <h4>小見出し</h4>
      <p>本文テキスト本文テキスト</p>
 <h3>中見出し</h3>
    <p>本文テキスト本文テキスト</p>

<h2>大見出し</h2>
    <p>本文テキスト本文テキスト</p>

つまり、上位の見出しのなかに下位の見出しを入れたり、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>デザイン指定したいテキスト</div>
<span>デザイン指定したいテキスト</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」はセットで番号つきの箇条書きに使います。

<ul>
 <li>黒丸つきのリスト①</li>
 <li>黒丸つきのリスト②</li>
 <li>黒丸つきのリスト③</li>
</ul>

 

<ol>
 <li>番号つきのリスト①</li>
 <li>番号つきのリスト②</li>
 <li>番号つきのリスト③</li>
</ol>

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

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

 

aタグ[リンク]

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

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

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

<a href=”URL”>表示したいテキスト</a>

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

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

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

 

カラーコード[色指定]

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

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

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

 

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

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

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

 

blockquoteタグ[引用]

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

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

<blockquote>長い引用文章</blockquote>
<q>短い引用文章</q>

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

<blockquote cite=”http://ebloger.net/”>引用文章</blockquote>

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

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

 

コメントアウトタグ[非表示]

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

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

<!– コメントアウトしたいテキスト –>

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

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

 

WordPressを始めるなら!
【筆者おすすめレンタルサーバ&ドメイン】

初心者なら迷わずコレ一択!スタンダードで優良対応の高性能レンタルサーバー
エックスサーバー『X10』

中級者向け!1つで複数サイト運用も可能なWordPress特化型レンタルサーバー
エックスサーバー『wpX』

国内最大級&最安値のドメイン取得サービス
お名前.com

※関連記事「スマホだけでWordPressを開設する方法
※関連記事「5分でよく分かるWordPressのはじめ方!

※期間限定 無料プレゼント※
サーバーを契約した方全員にもれなく

独自ドメイン1本 永年無料!!

 

WordPress開設ならエックスサーバーが最適です。