HTMLについて知る

どーも。さいんです。

みなさんWebエンジニアに向けて日々行動を起こされていると思います。

今回はHTMLについてです。

すでにプログラミングを学習している人は聞いたことがありますよね？

これからプログラミングを始める人はもうすぐ出会う素敵な人です。

そんな素敵な人をこっそり紹介しちゃいます。

HTMLってどんなもの？

HTMLは　”えいちてぃーえむえる”　と発音するWebにとって最も重要となる技術です。

一体この文字列は何なんだ・・・

実はHTMLはHyperText Markup Languageの略だったんです！

そう。ハイパーテキストのマークアップのラングエッジです。

まさかメモした人いないですよね？Webエンジニアで覚えている人は多いですが、実際覚えてなくても困りません。

強いていうなら、Markup Languageというものが

タグで始まり、タグで終わる

ということを覚えておくと、他のMarkup Languageに出会ったときに少し仲良くなりやすいです。

HTMLはどこで使われているの？

HTMLの説明を雑にしましたが、

☑︎　HTMLはなんで勉強する必要があるのか
☑︎　HTMLはどこで使われているのか？

と疑問が出てくると思います。

HTMLが使われている場所。

それはずばりWEBです。ホームページです。

ホームページはHTMLでできているのです。

RubyやPythonなどすでにプログラミング言語を勉強している方も多いかもしれませんが、ホームページはHTMLでできているんです。

だから多くのプログラミングスクールでHTMLをはじめに勉強するようにカリキュラムが組まれていることが多いですよね。

HTMLってどんな言語？

先ほどHTMLはHyperText Markup Languageの略で、

Markup Languageはタグに始まり、タグに終わると説明しました。

では、早速サンプルを見てみましょう。

<h3>HTMLってどんな言語？</h3>
<p>先ほどHTMLは<b>HyperText Markup Language</b>の略で、</p>

あれ？どこかでみましたよね？

そう、この項目の見出しと次の行です。

もちろんこのNoteもホームページなのでHTMLでできています。

HTMLってどんな言語？
先ほどHTMLはHyperText Markup Languageの略で、

テキストだけだと味気ないですよね？

見出しは大きくしたいし、一部を太くしたい。

そこでHyperText Markup Languageで装飾してあげたのです。

タグにはそれぞれ意味があり

☑︎ h3　・・・　文字を大きく、タイトルの要素に
☑︎ p ・・・　文字の段落
☑︎ b　・・・　文字を太く

こういった意味があります。改めてHTMLをみてみましょう。

<h3>HTMLってどんな言語？</h3>
<p>先ほどHTMLは<b>HyperText Markup Language</b>の略で、</p>

先ほどのh3などが<>や</>で囲って、文字を挟んでいますよね？

これこそが、タグで始まり、タグで終わるという意味です

☑︎ <X>　・・・　Xの始まりのタグ
☑︎ </X>　・・・ Xの終わりのタグ

タグの始まりからタグの終わりまでの文字が大きくなっていたり、太くなっていたりすると思います。

これこそがHTMLなのです！

HTMLでできること

HTMLでできることは本当にたくさんあります。

もっとも基本にして、いきなりたくさんのことができすぎてパニックになりそうなぐらいです。

HTMLでできる主なことは

h1~6 : 見出し
p : 段落
br : 改行
font : フォント関係
b : 太い文字
i : 斜めの文字
img : 画像を貼る
a : リンクを貼る
table : 表を作る

いやいやいや、すでに多いです。

が・・・こんなもんじゃありません。

Wordでできることはほぼできますし、Word以上のこともできてしまうのがHTMLという魔物なのです。

そのため、一気に全てのタグを覚えようとしてプログラミングの勉強を諦めてしまう方がとても多いです。

HTMLのやるべきこと

そして、HTMLのできることとは別で、HTMLがやるべきことという考えかたもあります。

いろいろなことができるHTMLですが、時代の流れや技術の進化により、HTMLに求めることも変化しています。

HTMLは今や枠組みやパーツという役割の方が増えてきています。

☑︎　色や形を整えるのは、より得意なCSSが
☑︎　動きや中身の要素は、より得意なJavaScriptが

HTMLの技術を上手く扱いながら、HTMLではできない部分もやってくれるようになってきています。

HTMLは家の間取り図のような役割だと思ってもらえると、イメージしやすいと思います。

昔はホームページは技術も今に比べれは低く、自由度もあまりありませんでした。

そのためHTMLで作り込むというのが主流でした。

ホテルの部屋の間取り図のような、ベッドはここにあって、テーブルはここで椅子は何個と全て記載があるイメージです。

そこからCSSによって、ベッドのサイズを変えたり、色を変えたり、椅子の個数を減らしたりといった、若干のカスタマイズが可能となりました。

そして最近ではJavaScriptによって、初めは家の間取り図のような、枠組みだけで中身がなにも記載がない図に、好きなようにベッドを置いたり、テーブルを配置したり、はたまた増築して部屋を増やしたり、とあらゆることが可能になってきています。

そのため、最近ではカスタマイズしたいのに家にはじめから決められたベッドが置いてあると邪魔であるようにHTMLで作り込むより、後からJavaScriptによってユーザにあったHTMLを付け足すというやり方が主流になってきています。

とても重要なHTML

じゃあHTMLの知識は不要かというと、とーっても重要です。

あくまで、JavaScriptによってHTMLを付け足すというところがポイントでJavaScriptを勉強する場合でもHTMLの知識は必要となるので要注意です。

HTMLの知識があってこそCSSやJavaScriptを使いこなすことができ、より整ったホームページの作成が可能になります。

HTMLの基礎の基礎がついてからCSSやJavaScriptにステップアップしましょう。

まとめ

今回はHTMLの基礎中の基礎の話から、なぜプログラミングスクールやプログラミングのはじめとしてHTMLがおすすめされているかをご紹介しました。

プログラミングの勉強は次から次に新しい単語や用語、技術が出てきて今学習している内容が本当に役に立つのか心配になることも多いです。

私のNoteでは実践的な内容まで少しずつ作成していこうと思っており、、一つずつこなしていけば必ず実力がつくような内容にしていきたいと思います。

ProgateのHTML&CSS初級編を深掘り解説するNoteを作成いたしました。
HTML学習の第一歩としてProgateとNoteをぜひ活用してくださいね。