HTMLとは?を知る(意外と知らなかったHTMLが必要な理由)

5日 3月

こんにちは。スキルハブの吉田です。 さて、今日は基本中の基本「HTMLとは?」について書きたいと思います。なんでHTMLなんていう言語で書かなければいけないのだろう?というところを懇切丁寧に解説します。それでは始めましょう!

今日の内容

  • HTMLとは何か?
  • 基本的なツールの紹介
  • Demoを見ながら概要をつかむ
  • 実際に書いてみる  

    HTMLとは何か

HTMLとは、文章に意味付けをするための言語です。 THE BEATLESを紹介するページがあったとすると、人間は見た目で文章の構造を理解します。例えば「色が赤だから強調されているんだな」「文字が大きいから重要なんだな」などという感じです。

例えば以下のような図は人間にはわかりますよね。「あ、これはビートルズに関するページなんだな、デビューまでの道のりなんかも書いてありそうだ」とその見た目から理解することができます。

しかしロボットの場合は色や大きさなどで表現しても、どこが重要なのかや、どこを目立たせたい部分なのかを理解できません。人間とは違って見た目では判断できないのですね。

インターネットの世界では、ロボットが適切に情報を判断して、それを正確に処理させる必要があります。例えばGoogleなどはロボットを使って情報を収集して、機会的にその情報を処理します。Googleで自分の作ったページが表示されるようにするには、Googleロボットがわかりやすい言葉で書く必要があります。

ようするにロボットの分かりやすい様な言葉で書かなければいけないというわけですね。そこでどうするかというと…HTMLという言語でマークアップするのです。

上の図でもわかるように大見出しの部分には<h1></h1>というマークアップ(タグ付け)をすることで「ここは大見出しだよ」ということを表しています。 このような書き方をすると、ロボットでも理解できるというわけです。<h2></h2>は中見出し、<h3></h3>は小見出しという意味になっています。この様に文章をHTMLタグで囲んであげると、ロボットも理解して自動的に処理できるようになります。

###HTMLとは機械でも判断できるように文書をマークアップするためのもの # 機械が自動処理できるようにするためにHTMLはある # Googleのような検索エンジンは内容をタグで理解する # タグに気をつけてかかないと適切な検索結果として反映されない # HTMLは見た目を整えるための言語ではなく「意味付け」のための言語

基本的なツールの紹介

HTMLを書く為には文字を書くツールが必要になってきます。 文字が書けるテキストエディタなら何でもいいです、Windowsであればメモ帳でもかまいませんが、HTMLを書いた時に色分けがされなかったりしてあまり適していません。 なので、Windowsならサクラエディタ・MacならMiというソフトが無料であるのでそちらをダウンロードするのもいいかとおもいます。 おすすめはSublime Text 2というエディタで、こちらは英語になってしまうのですがフリーで高機能になっていて、HTMLだけでなくプログラミングでも使えます。高機能なのに動作が軽いというところもおすすめです。 ※この講座でもSublime Text 2をつかっていきます。

Sublime Text参考リンク

公式サイト http://www.sublimetext.com/

基本的な使い方に関しては以下が参考になります。 http://liginc.co.jp/designer/archives/6774

まとめ

いかがだったでしょうか?今回はHTMLの基礎的な考え方について説明しました。次回は実際にHTMLでコーディングしてみます。お楽しみに。

Web制作のプロになろう!スキルハブの無料ビデオ

無料ビデオ12講座/84レッスンが受け放題!

わかりやすい動画レッスンHTML/CSS, JS, デザイン, WordPress, Railsなどがなんと無料。 募集人数には制限があります。サインアップはお早めに。

無料申し込み期限: 9月22日 まで
募集人数: 100名(残りわずか)

今すぐ12講座を受講する(無料)