HTMLのよくある勘違い

勘違い

ブログだとWordを使ってるような感覚で
文字を装飾したり、レイアウトを整えたりできます。

これはHTMLが自動的に作られるからなんですが、
HTMLをよく分からずに使ってる人が多いと思います。

特に多い勘違いは、
「HTMLは見た目を変えるもの」と思っていることです。

確かに<タグ></タグ>で囲むと、
文字が大きくなったり太くなったりしますもんね。(^_^;)

でも、HTMLは見た目を変えるものではないですよー。

HTMLは文書構造を表すものなんです。

HTMLは文書構造を表すもの

HTMLは検索エンジンに
「文章のどこに何が書かれているか」を
正しく伝えるためのものです。

見た目を変えるためのものではないですよ。

たとえば

「ここは見出しです」
「ここは重要です」
「ここは引用です」

といったことを伝えるためのものなんです。

このように文章の構造を定義づけることを
「マークアップ」といいます。

だからHTML(ハイパーテキストマークアップランゲージ)と
呼ばれるんですね。

検索エンジンに内容を正確に伝えるためには、
正しくマークアップする必要があります。

ところが、普通にブログを作っていると
間違ったマークアップをしてしまうことが多々あります。

間違ったマークアップをすると、
検索エンジンが間違った認識をするので注意しましょう。

HTMLの間違った使い方

strongタグとbタグ

文字を太くするために太字ボタンを使っていませんか?

これは間違いですよ!

太字

太字ボタンを使うとstrongというタグが挿入されます。

このsrtongタグは「強調タグ」と呼ばれ、
検索エンジンに「ここは重要ですよ!」と伝えるために使われます。

だから
<strong>いや~、びっくりしました。</strong>
なんて使うと、検索エンジンは

この文章で大事なのは
「いや~、びっくりしました。」だ!

と認識してしまうんですね。(>_<)

これでは内容が正確に伝わりません。

strongタグは文章で一番大事なポイントにのみ
使うようにしましょう。

太字にしたいからと何回も使ってはダメですよ。

下手するとスパム扱いされてしまいます。

太字にしたいだけなら、bタグを使いましょう。

bタグは見た目だけを変更するタグなので、
太字にするだけならでbタグで囲むのが正しいやり方です。

h1~h6見出しタグ

たとえばこんなふうに
文字の装飾で無理やり見出しを作っていませんか?

■■肉じゃがの作り方■■
まずはジャガイモ、ニンジン、鶏肉を一口大に切ります。次にフライパンに小さじ一杯の油を入れ、鶏肉を炒めます。ある程度火が通ったら、ジャガイモ、ニンジンを加えます。

これだと、見出し部分も文章の一部と認識されます。

見出しはh1~h6のタグでくくって、
文章構造をはっきりさせましょう。

見出しタグ 

見出しタグを正しく使えば、内容をより正確に伝えられるので、
SEOにも有利ですよ。

brタグとpタグ

brタグとpタグを同じ改行目的で使っていませんか?

同じ改行でも、brタグとpタグでは意味が異なります。

brタグは見た目の改行として使われますが、
pタグは文章の区切りとして使われるんです。

pタグでくくった文章は
ひとまとまりの文章として認識されるんですね。

だから、下記のような使い方は間違いです。

アフィリエイトで大事なのは

諦めずにコツコツ作業をすることで

コツコツ作業を続けると

やがてそれが資産になるのです。

この文は全てpタグで改行しています。

これだと、全ての行が
別々の文章だと認識されてしまうんですね。

行間を空けるためだけにpタグを使っていると
こうなるので、注意が必要です。

HTMLとデザインは切り分ける

HTMLを「装飾するためのもの」と勘違いしていると、
このような間違いが起こります。

本来、HTMLとデザインは切り分るべきものです。

文書構造を表すのがHTMLで、
デザインはすべてCSSで定義するのが
正しいやり方です。

HTMLとCSS

すべての装飾がなくなっても
意味が通じるのがHTMLなんです。

HTMLでマークアップするのは
「見た目を変える」のではなく、
「意味を与える」こと
なんだと
理解しておきましょう。

ブログランキング参加中

もっとアフィリエイトを学ぶには

メルマガ

実際にSundayが作ったサイトを見ながらアフィリエイトを学べる無料メルマガ!

“HTMLのよくある勘違い” への4件のフィードバック

  1. はじめまして、tomatoと申します。
    ブログランキングからおじゃましました。

    HTMLの知識が、ほとんどない状態でブログ記事を
    書いていました。

    「なるほど」という部分が多々あり
    とても、ためになりました。
    早速、修正に行ってきます。

    また、勉強に来ます。
    応援ポチ!

    1. tomatoさん、こんにちは。^^

      記事が役に立ったようでよかったです。^-^
      HTMLは知らないままに間違った使い方をしてる人が多いと思います。
      ぜひ参考にしてくださいね!
      応援ありがとうございます~。

  2. Sundayさん、はじめまして。
    ちぃたろーと申します。
    ランキングサイトから飛んできました。

    いやー、私もやっちゃってました(><)
    との違いって何だろうと思いながらも
    見た目が同じだからいっか♪ってなってました。

    すごーい、役立つ記事をありがとうございます!
    今後は意識して書きつつ
    修正もしていきたいと思います!!

    応援ポチッとです(´∀`)

    1. ちぃたろーさん、こんにちは。^^

      HTMLは見た目が同じでも、意味が違うんですよね~。
      ついついやってしまう間違いなので、注意したいところです。
      役立ったようで何よりです。応援ありがとうございます!

コメントをどうぞ

サブコンテンツ

おすすめ教材・ツール

ルレアプラス

物販アフィリエイトの王道教材


「LUREA(ルレア)」は小手先のテクニックではなく、アフィリエイトの「本質」が学べる教材。基礎から応用まであらゆるノウハウが詰まったオールインワンパッケージ。


SIRIUS

アフィリエイト専用のホームページ作成ソフト


「SIRIUS(シリウス)」はブログ感覚でHTMLサイトを作るホームページ作成ソフト。アフィリエイトに特化した機能が満載で、初心者でも簡単に扱えます。

このページの先頭へ