こんにちは！ProgRiroです。
今回のテーマは「HTMLとは何かを徹底解説！」です。
Webサイトを作成するにあたって、必ず学習すると言えるHTMLについて、画像を交えながら簡単に解説していこうと思います。
1. HTMLとは
ズバリ、HTMLとはWebサイトの構成や文章を記述するための言語です。
正式名称は HyperText Markup Language（ハイパーテキストマークアップランゲージ）といいます。
マークアップ言語というのは、HTMLやXMLといった言語です。また、マークダウン記法というものもあり、より簡単な記述でHTMLを生成できる言語です。ここでは、詳しい解説は省略します。
HTMLの簡単な例として「たい焼き」を想像してみましょう。
たい焼きを作るときに必要不可欠なものは、焼くための型ですよね！
型を作ることでたい焼きの形にすることができます。また、型に凹凸を作ることで模様を作ることがきます。
Webサイトの文章 = たい焼きの模様と考えると分かりやすいかもしれません。つまり、HTMLはたい焼きの型のようなもので自由に型（構造や文章）を作れるのです！
2. Webページの構成例
先程は、たい焼きを例としてHTMLの役割を説明しました。
この項では、Webページがどのように構成されているのかを「土地」を例として解説します。
日本国土を基準としてさいたま市の土地までを考えていきましょう。
日本
⬇︎⬇︎⬇︎⬇︎⬇︎
関東地方
⬇︎⬇︎⬇︎⬇︎⬇︎
埼玉県
⬇︎⬇︎⬇︎⬇︎⬇︎
さいたま市
上に示したように、土地の中に土地が作られています。小さな土地は、大きな土地のなかに含まれていることも分かりますね！
Webページも、1つのページを分割していくことで構成されています。そして、1つのページを分割する仕事をしてくれるのが HTML です。
HTMLによって、土地の大きさや位置を自由に決めることができるため、好きなレイアウトにすることが可能です。
2-1. 簡単なWebページの構成
ここで簡単なWebページの構成を見てみましょう。
先程の例で示すと以下のようになっています。
country : 日本
region : 関東地方
prefecture : 埼玉県
city : さいたま市
ここでの「country」や「region」はHTMLにおける「名前」のようなものです。自分の好きな名前にすることが可能です。
詳しいことは、後の記事で解説します。
2-2. 新たに追加したくなった時
もしここで、新たに別の県を追加したくなった場合は以下のようにすることで実現できます。
3. 最後に
これまで読んでみてどうでしょうか？
Webページがどのように構成されているかイメージができると、プログラミング学習の速度も上がります。今自分が勉強しているHTMLという言語の特徴を理解しながら、学習してみてください。
最後までお読みいただき、ありがとうございました。
