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

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

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

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

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

HTMLタグとは

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

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

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

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

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

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

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

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

pタグ【段落】

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

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

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

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

brタグ【改行】

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

使い方は

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

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

strongタグ【強調】

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

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

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

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

bタグ【太字】

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

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

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

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

nbspタグ【スペース】

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

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

ライ

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

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

hタグ【見出し】

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

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

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

という形です。

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

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

titleタグ【タイトル】

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

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

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

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

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

aタグ【リンク】

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

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

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

ライ

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

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

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

という形で記述します。

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

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

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

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

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

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

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

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

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

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

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

tableタグ【テーブル】

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

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

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

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

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

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

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

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

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

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

blockquoteタグ【引用】

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

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

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

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

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

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

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

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

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

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

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

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

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