【WEB初心者必見】HTMLとは? ブラウザのためでなく「Google語」という側面もあるよ

about-html-336

こんにちは! ヨス(@yossense)です。

今回はWEBサイトやブログを作っていると必ず出てくる「HTML」という言葉について噛み砕いて説明します。

ヨス

超カンタンに言うと、WEBサイトを作るために使う特別な言語ですね。

「HTML」って?

HTMLは、WEBページを作成するときに使う特別な言語(マークアップ言語)のことです。

こういう暗号みたいなコードですね。

HTMLはこういうやつ
HTMLはこういうやつ

で、人間にとってHTMLは「ややこしい記号が混じった文字」なんですけど、それをブラウザが読み込むとこんな画面に変換してくれるんですね。

HTMLをブラウザで見るとこう見える
HTMLをブラウザで見るとこう見える

おおー! さっきの暗号はいつも見ている
Yahoo!JAPANの裏側のコードだったんですねー。

念のために説明しておくと、「ブラウザ」は、今まさにあなたがこのページを見るために使っているソフト(アプリ)のことですね(Google Chromeがおすすめ!)。

つまり、HTMLは「WEBサイト(ホームページ)を作るために使われる特別な言葉」で、世界中にあるWEBサイトは、HTMLを使って構築されているってこと。

試しにWEBサイトのどこでもいいので、右クリックして「ソースの表示」を選ぶと、どのページでもHTMLが表示されます。

HTMLの例をちょっと見てみる

さて、HTMLがどういうものかが何となくわかったところで、ちょっとだけHTMLの例を見ましょう。

ヨス

え……?!
コードなんてムリムリ!

……と拒絶するのはお待ちください! こういうコード類の中で最も簡単だと思うので!

たとえば、文章内でリンクを入れたいときにこんな記述を「HTML」でします。

わたしは<a href="http://ipa-mania.com/">英語びより</a>というブログも運営しています。

この中にある「<a href="http://ipa-mania.com/">」みたいなコードをHTMLタグと呼びます。

これはリンクタグ(aタグ)と呼ばれるHTMLタグです。<a></a>に挟まれたテキストを「href="ここにリンク先URL"」で指定したリンク先に飛ばせるHTMLタグです。

ヨス

そして、このコードをブラウザを通して見るとこうなりますよー!

わたしは英語びよりというブログも運営しています。

うーん。なんとなくわかったでしょうか?

HTMLはWEBサイトを作成するために使う特別な言語なんですね。

そして、この「HTMLタグ」というのは、「Google語(← わたしが作った言葉)」という側面もあります。

「HTMLタグ」はGoogle語?

「Google語」というのがどういう意味かと言うと、検索エンジンである「Google(もちろんグーグル以外もあります)」が読みやすくするための言語だからです。

Googleは、今あなたが読んでいるこの記事を、人間が読んでいるのとは違うように見ているんですね。

この記事をGoogleがどんな風に見ているかというと、下記のような感じです。

<p>こんにちは! ヨス(<a href="https://twitter.com/yossense" target="_blank" class="exit" rel="nofollow">@yossense</a>)です。</p><p>WEBサイトやブログを作っていると必ず出てくる「<strong>HTML</strong>」という言葉について噛み砕いて説明します。</p><div class="voice cf l big"><figure class="icon"><img src="http://yossense.com/images/article/yos-01.png"><figcaption class="name">ヨス</figcaption></figure><p class="voicecomment">超カンタンに言うと、WEBサイトを作るために使う<b>特別な言語</b>ですね。</p></div><h2>「HTML」って?</h2><p><dfn><abbr title="Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)">HTML</abbr></dfn>は、WEBページを作成するときに使う特別な言語(マークアップ言語)のことです。</p>

ヨス

うわー!! これはイヤになりますね(笑)。わたしは見慣れていますが。

たとえば、上のコードをよく見ると<h2></h2>という文字(太字にしている)が見えるのがわかりますか? 下記に抜き出してみます。

<h2>「HTML」って?</h2>

「『HTML』って?」という言葉を<h2></h2>で囲んでいますよね。

この2つをセットで<h2>タグと呼びます。この2つのコードで囲まれた内側(ここでは「『見出し』ってなに?」の部分)が「見出し」としてGoogleが認識する部分です。

人間向けの「読みやすさ」とGoogle向けの「読みやすさ」

こちらの画像を見てください。

人間向けの「読みやすさ」とGoogle向けの「読みやすさ」
人間向けの「読みやすさ」とGoogle向けの「読みやすさ」

人間向けの「読みやすさ」とGoogle向けの「読みやすさ」を比較しています。

補足すると、人間にとってのわかりやすさは……

  • 文字の背景を赤くする
  • 文字の背景に影をつける
  • 文字を大きくする
  • 文字を白くする

……と、こういう見た目の変化をさせることで、この部分が「見出し」だと認識できます。

でもGoogleにとっては、これは「単なる背景を赤くした白抜き文字」 としか認識できないんですね。

じゃあどうするかというと適切にHTMLを使うのです!!

ここでは「<h2>タグ」を使うのですっ!! Googleは「見出しタグ」である<h2></h2>というコードに挟まれている部分を「見出し」だと認識するんです!

ヨス

逆にGoogleは、<h2>のような「見出しタグ」を使わない限り「見出し」だとわかってくれません

なんでGoogleにちゃんと認識してもらわないとダメなの?

では、なぜGoogleに「ここが見出しだよ!」と伝わらないとダメなのでしょうか?

それは、Googleが検索順位を司っているからです。

つまり、Googleが「このブログ、わかりやすいな!」と認識すると、検索順位で上位にきます。逆に「このサイトはわかりづらい……」と認識すれば検索順位は下げられるんですね。

じゃあGoogleが「わかりやすい!」と評価する記事ってどんな記事かというと……

人間向けの「読みやすさ」とGoogle向けの「読みやすさ」
人間向けの「読みやすさ」とGoogle向けの「読みやすさ」

さっきのこれですね。

文章をダーっと書くだけでなく……

  • 見出しタグ(<h2>など)
  • 箇条書きタグ(<ul>など)

……を使って、Googleに分かりやすいように適切なHTMLで記述しましょう!

もちろん、CSSを使って、人間にもわかりやすいデザインにするのは言うまでもありません。

Googleから評価されることも大切ですが、読むのはあくまで人間なので!

さて、今回はHTMLってなんなの? ということについてまとめました。

文章は人間のためにありますが、コードはコンピューターのためにあるんですね。

ということで、HTMLについて適切な知識をつけることはブロガーにとってもWEB関係者にとっても重要ですよー。

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!