HTMLとは？を知る（意外と知らなかったHTMLが必要な理由）

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

今日の内容

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

  まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
  » 今すぐ無料講座をチェックする

  

  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というソフトが無料であるのでそちらをダウンロードするのもいいかとおもいます。

Skillhubのおすすめ、無料で使用できるエディタは以下の2つです。
どちらもHTMLだけでなくプログラミングでも使えます。

1. Sublime Text
2. Visual Studio Code（VS Code）

Sublime Text

Sublime Textは無料でも使え、インターフェースがシンプルなのが特徴です。直感的な操作ができ、テキストを素早く編集できるため、特にコードを書く際に多くの開発者に好まれています。また、シンプルで軽快な操作性が重視されており、起動・動作が早い事が特徴。
Skillhubの講座などでも、Sublime Textを使用している場合が多いです。

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

インストールや日本語化、基本的な使い方に関しては以下が参考になります。
https://freelance.shiftinc.jp/column/sublime-text

Visual Studio Code（VS Code）

Visual Studio Code（VS Code）は、Microsoftが提供している無料のエディタで、多機能・カスタマイズ性の高さが特徴です。VS Codeは、デバッグ、Gitの統合、プラグインを通じて多くのプログラミング言語に対応できる点も指示されています。
また、カスタマイズ性が高く、自分の作業スタイルに合わせて使いやすく設定できます。

VScodeのインストール、基本的な使い方は下記記事で紹介しています。

まとめ

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