ブログ

初心者向けに基本的なHTMLタグ一覧を解説【具体的な使い方もあり】

初心者向けに基本的なHTMLタグ一覧を解説【具体的な使い方もあり】

ブログを書いていると「HTMLタグ」が出てくることがありますよね。

色々なタグがありますが、初心者の方だと各HTMLタグにどのような役割があるのか分からない人も多いと思います。

そこで今回は、初心者が覚えておくべき基本的なHTMLタグの一覧をご紹介します。

初心者でも分かりやすいように解説していきますので、HTMLタグについて知りたい人はぜひ参考にしてください。

 

LINE登録バナー

HTMLタグとは

HTMLタグのイメージ画像

HTMLとは、「HyperText Markup Language」の略です。

基本的にWebページに書かれている文字はすべてHTMLで記載されており、この記事を書く際にもHTMLを使用しています。

HTMLのタグとは「文字に意味を与える印のようなもの」となっており、ただの文字が「見出し」や「強調」などの意味を持つような形です。

【例1】

<h2>これは見出しです</h2>

「これは見出しです」というテキストにh2(見出し)という意味が与えられた。

【例2】

<strong>ここを強調します</strong>

「ここを強調します」というテキストにstrong(強調)という意味が与えられた。

上記のように、HTMLタグを使うことでテキストに様々な意味をもたせることができます。

 

【一覧】基本的なHTMLタグ13選【初心者向け】

初心者が知っておくべき基本的なHTMLタグの役割と使い方を一覧表にまとめました。

※HTMLタグの名前をクリックすると詳細部分を読むことができます。

名前 役割 使い方
pタグ 段落 <p>〜</p>
brタグ 改行 <br>
strongタグ 強調 <strong>〜</strong>
bタグ 太字 <b>〜</b>
nbspタグ スペース &nbsp;
hタグ 大見出し
中見出し
小見出し
<h2>〜</h2>
<h3>〜</h3>
<h4>〜</h4>
titleタグ タイトル <title>〜</title>
aタグ リンク <a href="〇〇">〜</a>
div/spanタグ デザイン指定 <div>〜</div>
<span>〜</span>
ulタグ
liタグ
箇条書き <ul>
<li>〜</li>
</ul>
olタグ
liタグ
番号付き箇条書き <ol>
<li>〜</li>
</ol>
tableタグ <table>
<tr>
<th>〜</th>
</tr>
<tr>
<td>〜</td>
</tr>
</table>
カラーコード 色指定 ※カラーコード表
blockquoteタグ 引用 <blockquote>

<cite><a href=”〇〇”>〜</a></cite>
</blockquote>

ここから1つずつ詳しく解説していきます。

 

pタグ【段落】

名前 pタグ
役割 段落
使い方 <p>〜</p>

pタグは「段落」を意味するHTMLタグです。

ちなみに「p」は「paragraph」の略になります。

<p>〜</p>

で囲まれた部分は1つの段落として認識されるので、基本的には1文をpタグで囲むのが良いでしょう。

pタグは最も基本的なタグになるので、ブログを書くならぜひ覚えておいてください。

 

brタグ【改行】

名前 brタグ
役割 改行
使い方 <br>

brタグは「改行」を意味するHTMLタグです。

使い方は

<br>

というタグを記述します。

一つの段落内で改行を入れたいときなどに使用してください。

【例】
<p>
ここで<br>
改行します。
</p>

 

strongタグ【強調】

名前 strongタグ
役割 強調
使い方 <strong>〜</strong>

strongタグは「強調」を意味するHTMLタグで、<strong>〜</strong>という形で使います。

strongタグには文字の見た目を太字にするという役割の他に、「strongタグで囲まれたテキストをSEO的に強調する」という意味があります。

そのため、無闇にstrongタグを使うのではなく記事で上位表示を狙うキーワードや関連キーワードなどが入っている文章にstrongタグを使うのがおすすめです。

また、strongタグの使いすぎはSEO的に良くないとも言われているため、何箇所もstrongタグを使うのは控えましょう。

 

bタグ【太字】

名前 bタグ
役割 太字
使い方 <b>〜</b>

bタグは「太字」を意味するHTMLタグで、<b>〜</b>という形で記述します。

ちなみにbとは「bold」の略です。

見た目はstrongタグと同じく太字になるのですが、bタグの場合はstrongタグのように単語の意味を強調する効果はありません。

そのため、単純にデザイン的に太字にしたいときにbタグを使うようにしましょう。

 

nbspタグ【スペース】

名前 nbspタグ
役割 スペース
使い方 &nbsp;

nbspタグは「スペース」を意味するHTMLタグで、「&nbsp;」という特殊文字で記述します。

テキストに「&nbsp;」を記述することで1行分のスペースを開けることができるので、記事の中でのレイアウトを整える際などに使用するのがおすすめです。

ライ
僕の場合はh見出しの前に「 」を記述して適度なスペースを開けるようにしています。

あまり知られていないタグですが、使いこなせるとかなり便利なのでぜひ覚えておいてください。

 

hタグ【見出し】

名前 hタグ
役割 見出し
使い方 <h2>〜</h2>
<h3>〜</h3>
<h4>〜</h4>

hタグは「見出し」を意味するHTMLタグで、<h2>〜</h2>などの形で記述します。

Googleやユーザーに対して記事の重要なテーマを伝え、分かりやすいページを作成する際に使用します。

例えば、本記事のhタグとしては、

<h1>初心者向けに基本的なHTMLタグ一覧を解説【具体的な使い方もあり】</h1>
<h2>HTMLタグとは</h2>
<h2>【一覧】基本的なHTMLタグ13選【初心者向け】</h2>
<h3>pタグ【段落】</h3>
<h3>brタグ【改行】</h3>
<h3>strongタグ【強調】</h3>
<h3>bタグ【太字】</h3>
<h3>nbspタグ【スペース】</h3>
<h3>hタグ【見出し】</h3>
<h3>titleタグ【タイトル】</h3>
<h3>aタグ【リンク】</h3>
<h3>div/spanタグ【デザイン指定】</h3>
<h3>ul/ol/liタグ【箇条書き】</h3>
<h3>tableタグ【テーブル】</h3>
<h3>カラーコード【色の指定】</h3>
<h3>blockquoteタグ【引用】</h3>
<h2>まとめ:初心者は基本的なHTMLタグだけでも覚えよう</h2>

という形です。

hタグで記述する記事の見出し構成は狙ったキーワードで上位表示させるために重要になるので、記事を書く前にはしっかり見出しを作るようにしましょう。

ブログ記事の見出し構成の作り方に関しては読まれるブログ記事構成を作る5つの手順を解説【初心者必見です】の記事も参考にしてください。

 

titleタグ【タイトル】

名前 titleタグ
役割 タイトル
使い方 <title>〜</title>

titleタグは記事ページのタイトルを意味し、<title>〜</title>という形で記述します。

ただ、WordPressの場合は投稿編集画面の「タイトル欄」に入力したテキストが自動的にtitleタグになるため、titleタグを設定する必要はありません。

titleタグで囲まれた部分はSEOで最も重要視されるため、狙うキーワードや関連キーワードをしっかり考えて入れるのが大事です。

タイトルの付け方に関しては下記の記事をどうぞ。

関連記事読まれるブログ記事タイトルの付け方の3つのコツ【クリック率UP】

 

aタグ【リンク】

名前 aタグ
役割 リンク
使い方 <a href="〇〇">〜</a>

aタグは「リンク」を意味するHTMLタグで、<a href="リンク先URL">〜</a>という形で記述します。

テキストリンクや画像リンクなど、クリックした際に特定のページへリンクさせたいときに使用してください。

記事を読んでいると別のページを見たいときがあると思いますが、その際にはaタグを使ってリンクを設定するのがおすすめです。

ライ
ちなみに、リンク先を自分のサイト内にすると「内部リンク」、リンク先を他サイトにすると「外部リンク」と呼びます。

 

div/spanタグ【デザイン指定】

名前 div/spanタグ
役割 デザイン指定
使い方 <div>〜</div>
<span>〜</span>

divタグやspanタグはデザインを指定する際に使うHTMLタグで、

<div>〜</div>

<span>〜</span>

という形で記述します。

divタグやspanタグはそれ自体では意味を持ちませんが、

<div class="box">〜</div>

<span style="color: red;">〜</span>

などデザインの指定をすることでタグで囲まれた部分のデザインを変更することが可能です。

例えば僕の記事の中でも、囲みデザインや文字色を指定する際などにdivタグやspanタグを使っています。

テキストだけの記事は読みにくいので、なるべく読者が読みやすいデザインに整えるのがおすすめです。

関連記事【保存版】おしゃれなブログデザインを実現する17のコツ【事例あり】

 

ul/ol/liタグ【箇条書き】

名前 ulタグ
olタグ
liタグ
役割 箇条書き
番号付き箇条書き
使い方 <ul>
<li>〜</li>
</ul>

<ol>
<li>〜</li>
</ol>

ul/ol/liタグは「リストタグ」と呼ばれ、箇条書きを意味するHTMLタグです。

具体的なHTMLタグの使い方は下記の通りです。

【番号なしリスト】
<ul>
<li>〜</li>
<li>〜</li>
<li>〜</li>
</ul>
【番号付きリスト】
<ol>
<li>〜</li>
<li>〜</li>
<li>〜</li>
</ol>

ブログを書いていると箇条書きで説明する部分が出てくると思いますが、単純にテキストで「・」で書くのではなく必ずリストタグを使うようにしましょう。

リストタグを使うことでGoogleが箇条書きだと認識できるようになって評価が上がるからです。

細かい部分ですが、SEOはこういう細かい施策の積み重ねで徐々に評価が上がっていくのでしっかりタグを使うようにしましょう。

 

tableタグ【テーブル】

名前 tableタグ
役割
使い方 <table>
<tr>
<th>〜</th>
</tr>
<tr>
<td>〜</td>
</tr>
</table>

tableタグは「テーブル(表)」を意味するHTMLタグで、具体的な使い方は下記の通りです。

<table>
<tbody>
<tr>
<th>〜</th>
<th>〜</th>
</tr>
<tr>
<td>〜</td>
<td>〜</td>
</tr>
<tr>
<td>〜</td>
<td>〜</td>
</tr>
</tbody>
</table>

ただ、テーブルはプラグインやEXCELからの貼り付けなどでも作成することができるので上記のタグを使う機会は少ないと思います。

Googleはtableタグを使わないと表だと認識することができないので、比較表などを作成する際には画像ではなくtableタグを使うようにしましょう。

tableタグを使って比較表を作ることで、ユーザーが情報を一目で理解することができるので記事をしっかり読んでもらいやすくなります。

 

カラーコード【色の指定】

名前 カラーコード
役割 色指定
使い方 ※カラーコード表

カラーコードは色の指定をするためのHTMLタグで、「#000000」などのように#と6桁の英数字で記述します。

色ごとにカラーコードが決まっているので、文字や囲み枠の色を指定したいときには希望の色のカラーコードを記述してあげましょう。

カラーコードを調べる際にはカラーコード表などのサイトを使うと便利です。

例えば、文字の色を赤にしたい場合は、下記のように使います。

<span style="color: #ff0000;">〜</span>

ブログを書いていると文字色の変更は頻繁に行うので、覚えておくと便利です。

 

blockquoteタグ【引用】

名前 blockquoteタグ
役割 引用
使い方 <blockquote>

<cite><a href=”〇〇”>〜</a></cite>
</blockquote>

blockquoteタグは「引用」を意味するHTMLタグで、他のサイトから文章を引用する際に使用します。

引用タグで指定した部分はGoogleも他サイトからの引用だと認識することができるので、自分の記事として評価されなくなります。

具体的なHTMLタグの使い方は以下の通りです。

<blockquote>引用内容
<cite>引用元:<a href="引用元URL">引用元サイト名</a></cite></blockquote>

引用タグを使用する際には、記事のオリジナルコンテンツの割合を超えないように注意しましょう。

引用の割合がオリジナル文章よりも多くなってしまうと、Googleから独自性のない記事だと判断されて評価が下がってしまうからです。

引用の割合は全体の1〜2割くらいにしておきましょう。

 

まとめ:初心者は基本的なHTMLタグだけでも覚えよう

ここまで、初心者が知っておくべき基本的なHTMLタグについて詳しく解説してきました。

最近のWordPressはブロックエディターといってHTMLタグを知らなくても簡単に編集ができるようになっていますが、細かいデザインの指定などをする際などにはHTMLの知識があった方が便利です。

今回紹介したHTMLタグはどれも基本的なものになりますので、ここで紹介したタグだけでも覚えてみてください。

あなたがブログで収益化できるようになることを祈っています。

人気記事WordPressブログおすすめテーマ7選【SEO対策済み】

人気記事ブログアフィリエイトでおすすめ神ツール10選【稼ぐには必須】

SEOスタートアップ講座のイメージ
最後まで記事を読んでいただき、ありがとうございます。

当ブログの読者様限定で、SEOコンサルタントのライが作成したオリジナル教材動画を無料プレゼント中です!
 
 

【プレゼントの内容】
 

  • ブロガーがアクセス&収益を増やすためのSEO解説動画
  • ブログで0→5万を稼ぐためのロードマップ
  • LINEの友だち限定で特別なプレゼントあり

 
 

【受け取り方法】

ライをLINEで友だちに追加して無料動画教材をLINEで受け取ってください。

下矢印

友だち追加

※LINEの配信はブロックすることでいつでも解除できます。

-ブログ

Copyright© ライノート│ブログ初心者の収益化をお手伝い , 2021 All Rights Reserved.