【超初心者向け】ブログでよく使われるHTMLタグを紹介!【理解しておくと便利】

スマホのみのブログ「LINEブログ」などでは使うことができないんですけど、主要なブログサービスや WordPress などの CMS なら記事を書く時に使える「HTML」。

そんなに本格的にやりたいわけじゃないし、プログラミング言語はちょっと…

くま五郎

リョウ

「HTML」はプログラミング言語ではなくて、ページを表示するための「標識」みたいなものだよ!

「HTML」はプログラミングをして動くようなものではなく、マークアップ言語と言われる文字をどのように表示させるかを案内する「標識」のような役割をしています。

そして、私たちがよく目にしている WEB サイトのほとんどが「HTML」で書かれているほど、基本中の基本

ブログサービスなどで文字を入力するだけのエディタを使っている場合には関係ないようにも思いますけど、サービス側が自動で「HTML」に変換して WEB ページに表示してくれています。

つまり、「HTML」を使わない人でも間接的には使っていることにはなるので、知っておくと便利です

HTML の基本的な考えた

「HTML」を使う場合には、ブログサービスや WordPress においてもエディタ画面で切り替えて入力をする必要があります。

特に、アフィリエイトをする場合は「HTML」に絶対触れるので、少しづつでも学んでおくと良いでしょう

タグの基本①:始まりと終わり

「HTML」においては、ほとんどの場合が < > から始まり < />で閉じられます。

中には「空要素」と呼ばれる < > だけのものもありますが、あまり多くはないのですぐに覚えられます。

HTMLの例
<p>テストです</p>

タグの基本②:整理整頓をしておく

「HTML」のエディタで入力すると、そのルールに従って WEB のページでは表示されることになります。そのため、エディタで入力した内容がぐちゃぐちゃでも、ルール優先となるので「HTML」の記述通りに表示されます。

ただ、検索エンジン(Google、Bing など)は「HTML」の方を読んで色々と判断します

「このページは読みにくいな…」と思われると評価が下がるので、整理整頓はしておきましょう。

リョウ

自分が後から編集する場合にも、グチャグチャになっていてはやる気がなくなりますからね。そういった面でも、無駄なものは排除したり順番を綺麗にしておきたいですね。

タグの基本③:順番を間違えないようにする

「HTML」には、ある程度の「順番」というものがあります。CSS によってデザインをしてあるからといって、順番をグチャグチャにするとあまりよくありません。

使うべき順番を考えながら、タグを使っていきましょう

もし、デザインを気に入っている場合には、CSS を使って設定した方が良いです。

タグの基本④:使いすぎは良くないものもある

「HTML」のタグなら何回使っても問題ないのですが、多用しすぎると良くないものや連続して使わない方が良いものもあります。

それらは、大抵の場合他の方法で解決することができます。

ブログでよく使われる HTML タグ一覧

本格的にサイトを作る場合には色々なタグを使いますけど、ブログではそんなに多くの種類を使うことはないです。

その中でも、特によく使われる HTML タグを紹介してきましょう。

<h1> 〜 <h6>:見出しダグ

ブログ記事を書く時に基本となる形が「見出し」と「本文」という考え方。

この記事でも「HTML の基本的な考えた」「ブログでよく使われる HTML タグ一覧」という「見出し」があって、その後に関する本文を書いていますよね。

この「見出し」は、よく使うからこそルールはちゃんと守った方が良いタグの1つです。

見出しダグで守るべきルール
  • 順番に使う
  • <h1> タグは1回だけ

順番に使う

見出しタグには <h1> <h2> <h3> <h4> <h5> <h6> とあるんですけど、数字が大きいと大きな見出し、小さいと小さな見出しとなります。

Heading

ここで重要なのは、数字の順番通りに「枠」の役割を持っているということ。そのため、順番を変えて使うことは御法度とされています。

Heading

詳しいことは、ブログに見出しは必要?それとも不要?【あるに越したことはない理由】にも書いているので参考にしてみてください。

<h1> タグは1回だけ

見出しタグとしては <h1> から <h6> まであるのですが、<h1> だけはページ内で1回だけ使うというルールがあります。

基本として、<h1> はページの見出しなどに使われているので、普通にブログを書いていれば使うことはないです。

また、HTML ではないエディタの場合には、「大見出し」と選んでも <h2> や <h3> にしかならないので心配することもないです。

ただ、HTML で入力してみたいという人は、大きな見出しを使いたいからといって <h1> を使うのはやめましょう。

HTMLの例
<h2>見出し<h2>
<h3>見出し<h3>
<h4>見出し<h4>
<h5>見出し<h5>
<h6>見出し<h6>

<a href=””> </a>:別のページへ飛ばす

ブログで記事を書いていると、別のページなどに飛ばしたい時がありますよね。そんな時は、<a href=””> </a> を使います。

使いかあは、上記のタグの ” と ” の間に飛ばしたいページの URL を入力。そして、そして、タグの間にはリンクとして表示させる文字を入力します。

HTMLの例
<a href="https://bryog.com">https://bryog.com</a>

すると、https://bryog.com のようになります。

新しいウィンドウで開くようにする

上記の方法は、リンクを表示する基本。そのままでも良いですが、別のウィンドウを新しく開くように指定することもできます。

その場合に使うのは、target=”_blank”

HTMLの例
<a href="https://www.yahoo.co.jp/" target="_blank">Yahoo!検索</a>

すると、Yahoo!検索のようになるので、試しにクリックしてみてください。すると、新しいウィンドウを開きながら「Yahoo!検索」のページが表示されるはずです。

同じページ内で別の場所へ飛ばす

別のページへ飛ばすだけではなく、同じページ内でも任意の場所へ飛ばすことができます。

その場合に使うのが、href=”#” と id=””

まずは、飛ばす場所とリンクを結びつけるために id を決めます。今回は、htmltag1 としておきましょうかね。

そして、まずは飛ばしたいところに id=”htmltag1″ をどこかのタグ何に埋め込みます。今回は、「<h1> タグは1回だけ」という見出しに飛ぶようにしてみましょうか。

HTMLの例
<h3 id="htmltag1"><h1> タグは1回だけ</h3>

次に、リンクを作ります。リンク先には、先ほどの id の前に # を入れたものを入力します。

HTMLの例
<a href="#htmltag1">こちら</a>

それでは、こちらをクリックしてみてください。すると、「<h1> タグは1回だけ」という見出しに飛ぶはずです。

<img src=””>:画像を表示する

ブログでは欠かせない「画像」は、<img src=””>を使って表示することができます。

HTMLの例
<img src="https://bryog.com/wp-content/uploads/2019/07/DSC_0145.jpg">

すると、こんな感じで表示されます。

ただ、基本の状態で画像を表示させると左寄りになるんですよね。もし、中央で表示させたい場合には、<div align=”center”></div>で囲ってあげると中央表示となります。(ひとまず深く考えなくて大丈夫です)

そして、画像をクリックして他のページへ飛ばしたい時がありますよね。これは、先ほどのページを飛ばすタグを応用すると可能になります。

HTMLの例
<a href="https://bryog.com" target="_blank"><img src="https://bryog.com/wp-content/uploads/2019/07/DSC_0145.jpg"></a>

すると、こんな感じで表示されるはずなので、試しにクリックしてみてください。すると、新しいウィンドウでこのブログのトップへ飛ぶはずです。

画像の説明を入れる

実は絶対に画像が表示されるわけではなく、アップロード元の画像が消えたりネットワークの問題で画像が表示されないような時のために「説明」を入れておきます。

その場合に付け加えるのが、alt=””

HTMLの例
<img src="https://bryog.com/wp-content/uploads/2019/07/DSC_0145.jpg" alt="りょうのプロフ画像">

すると、画像が表示できない時にも役立つのですが、Google で検索した時にも関連する語句が含まれている画像が検索結果に出るようになります。

そのため、SEO の観点からも alt=”” は入れておきましょう

表示する時に大きさを調整する

アップロードした画像をそのまま使うと、その画像の大きさのまま表示されます。そのため、画質の良い画像を使うと画面いっぱいに表示されるでしょう。

でも、小さく表示させたい時もありますよね。そんな時は width=”” と height=”” で調整することもできます。

width は幅、height は高さになり、それぞれピクセル(px)で指定することができます。

例えば、先ほどの私のプロフ画像は縦横 280px。これを 100px の大きさに小さくするとこのような記述になります。

HTMLの例
<img src="https://bryog.com/wp-content/uploads/2019/07/DSC_0145.jpg" width="100px" height="100px" alt="りょうのプロフ画像">

すると、こんな感じで表示されます。

りょうのプロフ画像

まあ、このように画像の大きさを指定して表示するのも良いのですが、画像元の容量はそのままとなるので余分な情報を持ったまま表示させることになるんですよね。

そのため、なるべく画像は小さく加工してから使った方が良いです

画像を小さくする方法やメリットについていは、【SEO対策】画像を圧縮して最適化するツール9選【表示速度をあげる】で詳しく解説しているので参考にしてみてください。

<br> と <p>:改行と段落

文章を書いているときに、ずっーーーと文字だけを繋げていくと読みづらいですよね。

そんな時に使うのが、改行する時に使う <br> と 段落分けに使う <p> </p> です。

まずは改行の <br> から解説すると、これは閉じるタグがありません。単独で使います。

HTMLの例
明日は晴れる<br>かもしれないね。

と、こうタグを使った場合には下記のようになります。

明日は晴れる
かもしれないね。

非常に便利なタグであり多用したくなるのですが、連続して使うことは御法度となっています。というのも、連続すると余白を作ることができるんですね。

とはいえ、そういうためのタグではないので、SEO的には良くないとされています。

そして、段落を作ることができる <p> </p> はこのようにして使います。

HTMLの例
<p>明日は晴れるかもしれないね。</p>

この記事では普通に使っていることもあり、表示例を出しても分かりにくいので出しませんが、適度に段落を分けながら文章を作る時には便利なダグです。

ブログサービスやテキストエディタを使って「改行」をしていれば、自動で <p> タグを使われているので安心してください。

<b> と <strong>:文字を強調

厳密には他にも文字を強調するタグはあるのですが、ブログで使う程度であればこの2つを知っていれば十分だと思います。

<b> と <strong>はそれぞれ太字になるのですが、少し意味合いが異なってきます。

HTMLの例
<strong>人とロボットに対して強調</strong>
<b>人に対してだけ強調</b>

<strong> は、ページで太字にすることができ、ページをチェックするロボットにも「強調する場所ですよ!」と示すことができます。

<b> は、単純にページで太字にするためのタグになります。

これがどう違うのかというと、あまりにも <strong> を使いすぎると何が強調されているのかロボットが困ってしまうというところ。そのため、あまり多用しない方が良いとされています。

人に対して読んでもらいたい場所やデザイン的に太字にしたいだけの場合には、<b> を使った方が良いでしょう。

<blockquote>:引用する

誰かが記事で書いたことなどは、「引用」などとして表示する義務があります。あたかも自分が書いたかのように記事にすると問題になるので、注意が必要です。

そんな時に、これが引用文ですよと分かりやすくするためのタグが <blockquote>

HTMLの例
<blockquote>寒い日に味噌汁を飲むと、体にしみるなぁ...</blockquote>

と、こんなことは誰も言っていませんが、使う場合にはこのようにして使います。すると、テーマによってデザインが違います下のようにして表示されるはずです。

寒い日に味噌汁を飲むと、体にしみるなぁ…

たまにデザインが気に入ったからか、やたらとこのタグを利用して強調したい部分に使っている人がいますけど、これは「引用」として使うタグなのでページをチェックするロボットにも「あなたが書いた文字ではないのね」と認識されてしまいます。

また、引用をした場合には「引用元」を表示する義務もあります。そうした場合には、下記を加えてあげましょう。

HTMLの例
<cite>引用元:<a href=“”></a></cite>

これを付け加えると、このようになるはずです。

HTMLの例
<blockquote>寒い日に味噌汁を飲むと、体にしみるなぁ...
<cite>引用元:<a href="https://bryog.com/">https://bryog.com/</a></cite>
</blockquote>

すると、表記としてはこのようになります。

寒い日に味噌汁を飲むと、体にしみるなぁ…
引用元:https://bryog.com/

引用は使い方によってはとても効果があるのですが、使い方を間違っていると訴えられたりする可能性もあるので、しっかりと <blockquote>タグを使って表記しましょうね。

さいごに

最も使われるタグだけを紹介しましたが、それでもちょっと長くなってしまいましたね。実際には、もっと細かい設定もそれぞれのタグにはあるのですが、超初心者の場合にはこのくらいから始めていきましょう。

これからアフィリエイトを始めようとしている人は、特にリンクのタグに関しては勉強しておいた方が良いです。

アフィリエイトリンクをボタンにするには?【CSS追加するだけで簡単です】でも解説していますが、タグを知れるとこんなこともできるようになります。

少しづつでも良いでの、ぜひ HTML を使ってブログを楽しんでいきましょう!

アフィリエイトリンクをボタンにするには?【CSS追加するだけで簡単です】