【HTMLタグ】ブログ初心者が最低限おぼえるべき14個のタグを紹介

ブログの始め方

こんにちはツカサです。

今回は、初心者ブロガーや初心者アフィリエイターが
「最低限覚えておくべきHTMLタグ14個」について発信したいと思います。

こんな人に読んでほしいと思って記事を書いています。

・WordPress初心者で自分オリジナルデザインをつくりたい
・HTMLコードを使ってブログを作りたい

 

下記、これだけ覚えれば初心者としては充分です。
プログラミング歴10年の私が普段から使用しているタグや便利な場面について解説していきます。

本記事に登場するHTMLタグを一覧表にしてみました。

よかったらコピペでご自分のメモ帳やデスクトップなどにペーストして使ってみてくださいね。

名称 役割 使い方
pタグ 段落 <p>~</p>
brタグ 改行 ~</ br>
strongタグ 強調 <strong>~</strong>
bタグ 太字 <b>~</b>
nbspタグ スペース &nbsp;
hタグ 大見出し
中見出し
小見出し
<h2>~</h2>
<h3>~</h3>
<h4>~</h4>
titleタグ タイトル <title>~</title>
divタグ デザイン
指定
<div>~</div>
tableタグ table生成ツール
ulタグ
liタグ
黒丸つき
箇条書き
<ul>
 <li>~</li>
</ul>
olタグ
liタグ
番号つき
箇条書き
<ol>
 <li>~</li>
</ol>
色コード 色指定 原色大辞典
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文字前後)で一段落、話題が変わったらスペースを空ける…というのがもっとも見やすいからです。

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を置いたりするのはやめましょうということです。

ちなみに、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タグです。

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

チームでコーディングしているときなんかは重宝しますよ、誰がいつ修正したとか修正した理由とか書いています。

例 <!– 20XX0101 TSUKASA 追記 ○○のほうが見やすいため–>
例 <!– 20XX0101 TSUKASA コメントアウト不要のため一時的にコメントアウトなど–>

<!– コメントアウトしたいテキスト –>
そこに何が書かれているのかを、自分が後から見るときに分かりやすくするためや、

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

というわけで、今回は「初心者が最低限覚えておくべきタグ」の話をしてみました。
参考になれば幸いです。

コメント

タイトルとURLをコピーしました