【必須】ブログに必要なHTMLタグ総まとめ【11個を一気に紹介します】

Blog

 

『ブログはHTMLタグを使ったほうが良いと聞くけれど、プログラミングなんて一切やったことが無いです。ブログ初心者が、最低限覚えておくべきHTMLタグを、まとめて教えてほしいです』

 

こういった悩みにお応えします。

✅この記事の内容


  • ブログ執筆に必須のHTMLタグ11選【コピペでOK】
  • Googleは記事を「コード」で評価します
  • 見た目をキレイにするには【cssについて学ぼう】

この記事を書いている僕は、ブログ毎日投稿100記事ほど。
全ての記事をHTMLタグを使い書いているので、最低限必要なHTMLの知識は身についています。

結論、ブログ執筆にはHTMLタグを使ったほうが良いです。
理由はカンタンで、Googleからの評価が上がりやすいから。

この記事では、ブログ初心者が最低限覚えておくべきHTMLタグを11個、まとめて紹介します。
全てのタグを実践向きに整え、全てコピペできるようにしてありますので、使ってみて下さい。

 

この記事を読めば、ブログ記事にHTMLタグを使い、テキストエディタを用いて書くことができるようになります。

ぜひ参考にしてみて下さいませ。

 

✅ブログ執筆に必須のHTMLタグ11選【これさえ使えれば大丈夫です】

ブログ執筆に必須のHTMLタグ11選

下記のとおりです。「もくじ」としても使用できます。

 

上記の11個です。

僕のブログでは、この11個のHTMLタグしか使いません。
覚えてしまえば楽勝なので、初心者のうちから使い始めることをおすすめします。

 

☑①|見出しタグ【h1~h6】

ブログ記事には、「見出し」が必須です。
≫【超簡単】ブログの文章構成はたったの3STEP【本文はオマケです】の記事で詳しく解説しています。

※なお、Wordpressでブログ記事を書いている人は、記事タイトル = h1タグになっていますので、見出しは全てh2~を使います。
僕の記事の場合、使用するのは【h2 h3 h4】の3つです。

 

例えば、下記のとおりです。

See the Pen YzwyarE by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

✓見出しタグには「順番がある」

下記のとおりです。


  • 「h1」は、1つの記事に1つだけ(タイトルで使用)
  • 「h2 h3 h4」の順番を守る

 

上記です。
間違った例が下記です。

See the Pen WNrQzXm by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

上記のように、順番がごちゃごちゃになっているのはNGでして、必ず正しい順番で使用するのがポイントです。

 

☑②|本文タグ【p】

ブログ記事は、多くが本文ですよね。

本文にもタグをつけてあげる必要があります。

See the Pen RwrWMxM by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

上記のような感じです。

※なお、これだけだと改行や太字などの装飾は出来ず、文章がそのまま表示されるだけなので注意です。
改行したい場所がある場合や、強調したい場所があるなら、それぞれに対応したタグを使用します。

 

✔②-1|改行タグ【br】

改行タグを入れた場合、文字数に関係なく必ずそこで改行します。

ブログは、だらだらと長い文章だと読みづらいので、適切に改行を挟んであげると読者にとっては良い記事になります。

See the Pen KKVdoQO by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

読みやすさが段違いですので、改行は必須ですね。

 

✔②-2|強調タグ【strong】

本文の中で、特に強調したい場合に使います。

※後述する「b」タグとの違いは、strongタグで強調した部分は、Googleに「ここが大事です」とアピールできる点です。
「b」タグだけだと、ただの太字なので、あくまでもGoogleに強調を知らせる効果はないです。

 

See the Pen wvMKmmR by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

こんな感じで、太字になります。

 

✔②-3|太字タグ【b】

太字にするやり方はもう1つあり、「b」タグを使うことでも可能です。

※こちらはstrongタグと違い、単純に太字にするだけです。
Googleには重要だというアピールにはならないので、あくまでも「見やすさ」とか「読みやすさ」を重視して太字にしたい場合に使います。

 

See the Pen ExPVELN by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

こういった感じで、あるワードを少しアピールしたい場合などに使えますね

 

✔②-4|下線タグ【u】

本文にアンダーラインを引きたい場合に使います。

See the Pen PoZPRey by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

こんな感じになります。

※全ての本文にアンダーラインがあると逆に読みづらいので、使い過ぎに注意です。

 

☑③|リストタグ【ul oi li】

いわゆる「箇条書き」をしたい場合に使用します。

ブログの見やすさを考えると、箇条書きは記事内に必須でして、僕の記事でも箇条書きを多用しています。

 

そのため、リストタグは是非覚えておくべきHTMLです。

参考例は下記です。

See the Pen ExPVERN by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

例えば上記です。

「ul」ではドットが付き、「ol」では数字が頭につきますので、必要に応じて使い分ければOKです。

 

☑④|テーブルタグ【table】

何かを「表」にしたい場合に使用します。

※tableタグに関しては、少しややこしいので、初心者の対は完全コピペでOK。
記述するタグ名をすべて覚えなくても、使えますので。

 

See the Pen eYJpMjJ by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.



☑⑤|引用タグ【blockquote】

記事中に、他のサイトから文章を引用したい際に使います。

※勝手に他サイトの文章を〇パクリするのは著作権侵害として訴えられる危険すらあります。
そうでなくとも、無断転載はGoogleからの評価も低いので、引用する時は必ず引用タグを使いましょう。

 

引用タグについては、下記をコピペして使用してください。

See the Pen OJMyvwa by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

なお、文字色が青になっている部分は、後述する「リンクタグ」を使っているためです。

 

☑⑥|リンクタグ【a】

今いる記事から、他の記事へとリンクを貼りたい場合に使用します。

なお、リンクには2種類あり、


  • 内部リンク
  • 外部リンク

 

上記それぞれで、記述の方法が少し違います。

リンクに関しては、Googleからの評価や、読者のユーザビリティに直結する重要な部分なので、正しくタグを使うことが大切。
下記のとおりです。

 

✅内部リンク(自分の記事から自分の他の記事へ)

See the Pen MWKaVqw by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

✅外部リンク(自分の記事から他のサイトのページへ)

See the Pen RwrWMYJ by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

こんな感じでOKです。

 

☑⑦|画像タグ【img】

見出しの下に画像を入れたい場合や、記事中で自分の撮影した画像を挿入したい場合に使います。

※画像タグについては、他のHTMLタグと違い、「閉じタグ」が不要です。
また、画像のサイズや、画像が表示されない場合の「代替テキスト」も一緒に記述してあげると、読者にもGoogleにもやさしいので覚えておきましょう。

 

正しい画像タグの使い方は、下記のコピペでOKです。

See the Pen MWKaVPa by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.



✅ブログはHTMLタグを使って書こう

ブログはHTMLタグを使って書こう

この記事で紹介したHTMLタグを使えば、今日からテキストエディタでブログが書けますね。

最低限、上記11個はマストで覚えておくことをおすすめします。

 

☑Googleは記事を「コード」で評価する

例えば、この記事をGoogleクローラーが巡回してくる際に、見てくれるのはこのページ自体ではなく、下記のような「コード」です。

この記事のHTMKコード

そのため、


  • 記事の検索順位を上げたい
  • 書いた記事を、正しくGoogleに評価してもらいたい

 

上記のようなブロガーは、HTMLタグを用いて記事執筆するほうが効果が高いです。

タグを使わず、ビジュアルエディタなどで記事を書くと、余計なタグ記述が増えていたり、必要なタグ記述が省略されていたりします。
その結果、あなたの記事がどんな内容なのかをGoogleが正しく判断できない可能性があります。

 

☑見た目をキレイにするには【cssについて学ぼう】

例えば、下記です。

See the Pen jOWbYRw by ともさん@積み上げパパ|元消防士 (@tomo___san_2525) on CodePen.

こんな感じで、自分で装飾をしたり、見た目を整えたりしたい場合、「CSS」という記述方法が必要になってきます。

ただし、HTMLと比べると少し難解だったり、ややこしかったりするので、ちょっとずつ勉強していけばOK。
見た目にこだわり過ぎると、かんじんの記事執筆ができなくなりますので注意です。

 

✅CSS勉強におすすめの本

 

1冊読めば、大体の見た目調整は出来るようになります。

 

✅CSS知識が無くても、見た目がオシャレになるWordpressテーマ(例)

 

無料テーマと有料テーマの違いは、「見た目の改良がいるか、いらないか」です。

自分でCSSをいじるのが苦手な人は、有料テーマに課金するのも手でして、独学するよりも早く、デザイン性に優れたブログをゲットできます。
ここについてはお財布と相談ですね。

 

☑ブログ初心者におすすめのプログラミング学習法

下記の3つです。

 

上記のとおり。

ブログ執筆だけに限らず、インターネットが主流になってきた現代において、プログラミングの知識は必須と言えます。

その証拠に、小学校の授業でプログラミングが導入されていますからね。
今、プログラミングができない大人は、10年後にピンチになるかもです。

 

僕も独学でサラっと勉強しただけですが、プログラミングの知識はブログ執筆にかなり役立ちますので、ちょっとでも勉強してみることをおすすめします。



それでは、今回は以上です。