【HTMLとは?】初心者や入門したての方に向けて解説!

ウェブサイトを作れるようになりたい!

と思いたちホームページ制作ウェブ開発というキーワードで情報収集を進めていくとHTMLという言語を身につける必要があるのか?という情報にたどり着くでしょう。

今回は入門者の方向けにHTMLについて徹底解説していきます。

HTMLとは?

HTML(エイチ・ティー・エム・エル)とは皆さんがネットで見るウェブページを作るための言語です。

ウェブサイトにある文字や画像の全てがHTMLによって作られています。
HTMLを読み書きできるようになることで文字や画像を表示するウェブページを作ることができるようになります。

そのウェブページの集合体を作ることがウェブサイト制作となります。

補足

HTMLは目に見えないメタ情報(設定情報のようなもの)も作ることができます

HTMLはどこで使われている?

HTMLが使われているもの

  • ブラウザで見るウェブサイト
  • ブラウザと同じ仕組みで動くアプリ(Visual Studio Codeなど)
補足

ブラウザとはChromeやEdgeのようにウェブ上の情報を見るためのソフトのこと

HTMLが使われていないもの

  • ネイティブアプリ
補足

ネイティブアプリとはスマホやパソコンに直接インストールして使うアプリのこと

ブラウザ内で動くものはHTMLで出来ている

HTMLを解析して内容を表示する仕組みがブラウザに備わっているため、HTMLは主にブラウザ内で動くものをメインに使われています。

なのでホームページのようにブラウザを使って見るものを作りたい場合はHTMLを学ぶことで作れるようになります。

アプリにはHTMLが使われていない?

スマホやパソコンのネイティブアプリの多くはHTMLではなく別の言語で動いています。

例えば
iPhoneやMacはSwift(スイフト)
AndroidはJava(ジャバ)やKotlin(コトリン)
WindowsはVisualBasic(ビジュアルベーシック)
などが有名です。

しかし、HTMLではアプリ開発が絶対に出来ない、というわけではありません。
HTMLがネイティブアプリでも動くように変換するツールも存在します。

ただし、開発効率や安定性という面であまり一般的では有りません。

HTMLだけでウェブサイトが作れる?

HTMLだけでもウェブサイトを作ることは可能です。

しかし、HTMLの役割は文字や画像をウェブページに表示するだけであり、文字の大きさや画像の位置などを細かく調整することは出来ません。

なのでHTMLだけではユーザーにとって使いにくいサイトになってしまいます。

CSSとJavaScriptを一緒に使う

実際にウェブページを作成するときにはCSSとJavaScript(以下、JS)と組み合わせることになります。
それぞれの言語の役割は以下のとおりです。

HTML

  • 文字や画像をページに表示する
  • ページの中のアウトライン(枠組み)を作る

CSS

  • 表示された文字の大きさや書体を変える
  • 表示された画像の位置や大きさを変える
  • ページ全体のレイアウトを決める

JavaScript

  • ウェブページに高度な仕組みを加える
  • ユーザーの操作に反応できる仕組みを加える

HTML,CSS,JSの関係を例えると?

HTML、CSS、JSをフル活用したウェブサイト作りはよく家に例えられます。

HTMLは家の骨組みです。
CSSは外壁の色を変えたり、模様替えをして家を華やかにする役割です。
JSはインターホンを設置したり、エアコンや冷蔵庫を置いたりして住む人にとって家を機能的で便利にするために必要です。

3つの言語ならどれから学習したら良い?

ウェブサイトを作りたいなら、まずはHTMLとCSSを並行して学習することをオススメします!
JSはウェブサイト制作に絶対に必要というわけでは有りません。
ただ、JSは難易度がワンランク高いので同時にやろうとすると挫折しやすいです。

シンプルなウェブサイトで良ければHTMLとCSSだけでも作ることができます。

HTMLの技術的な役割

​⚠️ 注意

ここから開発していきたい人向けの少し難しい内容になります
すべて理解できなくてもHTML学習は可能です
開発面に興味のある方や、意味を深く知りたい人はぜひ読んでみてください。

HTMLの役割

HTMLの役割は要素の意味づけです。

ウェブページには文字や画像、動画など様々な要素が表示されています。
その要素たちがどういう役割を持っているのか?ということを定義づけることがHTMLを書くということです。

要素の意味付け

HTML入門者の方にはこの意味付けが何か?というイメージが湧きにくいでしょう。

ではまずサンプルを見てみましょう!

<h1>太陽系の惑星</h1>
<ul>
<li>水星</li>
<li>金星</li>
<li>地球</li>
<li>火星</li>
</ul>

ちなみにこの意味付けをすることをマークアップと言います。
なのでHTMLのことを分類分けするときにマークアップ言語ということもあります。

HTML=プログラミング?

HTMLはプログラミング言語の一種ではありますがHTMLを書くことをプログラミングと呼ぶ場面は少なく、どちらかというとマークアップやコーディングと呼ばれることが多いです。

開発現場ではプログラミング言語=スクリプト言語を示すことが多いです。
なのでプログラマーの大半はHTMLよりJSなどのスクリプト言語を専門としている人ばかりです。

スクリプト言語を使ってソフトウェアやアプリを開発することをプログラミングというのに対し、HTMLを使ってウェブページの意味付けを行うことはコーディングと呼ばれます。