【まずはこの5つ!】ブログで最低限必要になるHTMLのタグと意味

ブロガーに必要な5つのHTMLタグの知識と意味



WordPressでブログを始めてから「全然HTMLの知識なくてもブログ書けるじゃん!」と驚いてます。

他にもライブドアブログやアメーバブログ、はてなブログでも同じように、専門的なHTMLの知識がなくても簡単に記事が書けちゃうように出来てるんですね。

いやーHTMLとCSSをベタ打ちしていた昔の僕に教えてあげたい…「そんなに覚えなくてもサイト作れるよ!」って。

それでもやっぱり基本的なHTMLの知識がないと、SEO(検索エンジン)に評価してもらえず誰にも見られないサイトになっちゃうので、HTMLの基本的な仕組みは理解しておく必要があります。

せっかく書いたのに誰にも見てもらえないなんて、何のためにブログ書いてるのかわからないもんね。

これからブログを始める方向けに、「HTMLの中でこの5つのタグだけ覚えておけばブログが書けるよ!」というタグを紹介します。

hタグ。

 <h1>hタグで囲うと見出しになります</h1>

まずはブログを書く上で必須のタグが「hタグ」です。

「hタグ」は見出しを表すのに使い、階層の高い順からh1~h6の6段階があります。

例えば、見出しの無い新聞を想像してみてください。読みにくくて仕方ないと思います。

なので、ブログは適度な文章に分けて見出しをつけましょう。

h1タグはブログのタイトルに既に使われているので、記事中で使えるのはh2~h6までです。

h1タグは複数使うこともできますが、1つのページ・記事内に1つのほうが混乱しないので、使いすぎないことがオススメです。

最初はh2~h3まで使えるようになれば、hタグはマスターしたも同然です。

そして、hタグで囲んだ文字はこのようにデザインされます。

h2タグのデザインです。

h3タグのデザインです。

h4タグのデザインです。

h5タグのデザインです。
h6タグのデザインです。

デザインはそれぞれですが、hタグを使うと文字の大きさやデザインが変わります。

でも、hタグを文字を大きさを変えるために使うのではなくて、あくまで文章の階層を表すために使いましょう。

hタグを使わないのも問題だけど、使いすぎても読みにくサイトになるので注意が必要です。

strongタグ。

 <h1>文字の重要度を表します。</h1>

strongタグは文字の重要度を表すときに使います。

このstrongタグを使うと太文字になるので、「strongタグは太文字にするもの」と勘違いしている人が結構いるんみたいなんですが、違いますよ、strongタグは文字の重要度を表すものです。

このタグはSEOでも重要な役割を果たすので、正しい使い方に注意が必要ですね。

とりあえず、使いすぎには注意です。

blockquoteタグ。

 <h1>引用文を表します。</h1>

blockquoteタグは他のサイトや本の文章などを、引用して自分のサイトに掲載する際に使うタグです。

blockquoteタグを使うとこのようにデザインされます。

 吾輩わがはいは猫である。名前はまだ無い。
どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
引用:吾輩は猫である/夏目漱石

文章の両サイドに「”(ダブルクオーテーション)」がついて、引用文だとはっきり分かるようになりました。

ちなみに僕は、引用元の情報をblockquoteタグの中に入れるようにしてます。

そのほうがわかりやすいし、デザイン的にもなんだか綺麗なので気に入ってます。

imgタグ。

 <img src="画像を表示するタグです。" alt="">

imgタグは画像を表示するときに使うタグです。

WordPressやライブドアブログなどのブログでは、ボタンひとつでimgタグを設置することができるので、特に詳しい使い方は覚えなくてもいいかもしれません。

もし個人的に画像を外から引っ張ってきたい場合は「相対パス」と「絶対パス」に関する知識が必要になるので、こちらの記事から勉強してみてください。

絶対に覚えるべし!相対パスと絶対パスの違い【練習ファイル付き】

aタグ。

 <a href="別のページへジャンプするときに使うタグです" target="_blank">

aタグは別のページにジャンプするときに使うタグです。リンク先とも呼ばれたりしますね。

これもimgタグと同様に、WordPressのようなブログだとボタンひとつで簡単に設置することができるようになっています。

構造としては「href=”ページ先のurl”」となっていて、hrefの中にページ先のurlの入れてあげます。

絶対パスはブラウザの上から確認できます。

ページのurlはサイトの上部から確認することができるので、コピー&ペーストで簡単に設定することができます。

ブロガーが覚えるべき5つのタグまとめ。

最後にブロガーに必要な5つのHTMLのタグと意味のまとめでです。

  • hタグ(見出し)
  • strongタグ(文字の重要度)
  • blockquoteタグ(引用文)
  • imgタグ(画像)
  • aタグ(リンクを設置)
    • この5つのタグの意味を理解すればとりあえず、ブロガーとしてのHTMLの知識は十分です。

      でもこれらはHTMLのほんの一部で、他にも100種類以上のタグが存在します。

      それを使いこなせばサイトのデザインも変えられるどころか、SEOに評価されてたくさんの人に見られるようにもなるかもしれませんので、暇なときに「他にどんなタグがあるんだろう?」とチェックしてみてください。

      あなただけのオンリーワンのサイトが作れると思いますよ。

      それでわ〜。