WordPressの始め方を分かりやすく解説!こちらをクリック

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

ブログのライティング
  • URLをコピーしました!

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

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

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

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

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

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

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

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

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

上記の合計14個です。

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

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

目次

SEOに強くて、お洒落で、記事制作スピードも速いテーマ!
マクサンでも使っている超おすすめテーマ「SWELL」はこちら!

1976年生まれ。東京都出身。合同会社田舎暮らし代表。複数の業界にて20年近くWebマーケティングの仕事に携わる。2013年より副業でブログを開始。 複数のブログ・SNSを運営した経験を活かし、ブログやアフィリエ イトのノウハウを発信する当ブログを開設。またブロガーのためのオンラインサロン「マクサン」の共同オーナーを務める。フォロワー10万人を抱えるInstagram「ベランダ飯」も運営。借金地獄のどん底からブログ一本で這いあがり、月収300~400万円を稼げるように。2020年2月には累計収益が1億円を突破。著書に『マクサン式Webライティング実践スキル大全(マクサン本)』(大和書房)などがある。GMOのオウンドメディア「ワプ活」で全記事の監修も務める。本名は吉岡 智将

いや、俺なんてそんな、どこにでもいるただのマクリンですよ。 副業でガジェットサイト「マクリン」の運営を2017年5月に開始し、2019年12月に副業を株式会社makuriに法人化。2020年4月に合同会社レイテラスを設立し、コワーキングスペース「レイテラス」を開店。撮影スタジオ「レイテラススタジオ」もスタート。ブロガー向けオンラインサロン「マクサン」の共同オーナーをつとめ「マクサン本」の共著者。

※当ページの情報は執筆時点のものであり、最新の情報は各サービスの公式サイトよりご確認ください。
※当ページのリンクには広告が含まれる場合があります。

初心者に必要な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タグです。

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

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=”https://makusan.jp/blog/”>引用文章</blockquote>

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

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

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

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

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

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

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

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

ブログのライティング

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次