
どうも、べ〜やんです。
webデザインやプログラミングを学びはじめたとき、最初にHTMLとCSSから学ぶ人が多いのではないでしょうか?
私も一番最初にHTMLから学びました。
ということで、今回はHTMLについての記事を超初心者用に公開したいと思います。

目次
HTMLとは何か?
HTMLとは、WEBページを形作る基礎的な言語で、Hyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)の略です。
HTMLはマークアップ言語の一種で、厳密にいうとプログラミング言語とは区別されますが、プログラミングを学ぶうえでも必須の言語です。
ここでいうマークアップとは、意味づけや印づけという意味になります。
つまり、HTMLは文章に意味づけをするすごい言語ってことですね!
まだよくわからないですよね。
HTMLを見てみよう

このページや他のWEBページ上で右クリックをして、「ページのソースを表示」を選択してください。そうすると不思議な文章が表示されると思います。全てではありませんが、この<h1>、<div>、<head>や<link>などと書かれているものが、HTMLです。
普段私たちがみているWEBページは、このようにHTMLでここに見出しがあって次は画像があってなどと書かれている文章をコンピューターが読むことで作られています。
まだ意味不明な文章だと思いますが、HTMLの超基礎的は部分だけ見てみましょう。(私は、最初は文章だとも思えませんでしたが…)
意味づけとは
私たちは普段WEBページをみるとき無意識のうちに、(一番上に書かれているし他よりも太字で書かれているからこれが見出しだな)などとわかるのですが、コンピューターにはそれがわかりません。なのでコンピューターにわかるようにHTMLを使って意味づけをします。
HTMLは<h1>や<div>のように<>で囲まれたタグと呼ばれるもので、囲いをつけるように書かれています。
例えば、<h1>ここがタイトル</h1>というように<h1>と</h1>で挟まれた文字列は、これが一番重要な見出しだという意味がつけられ他の文字よりも大きく表示されます。この見出しタグは<h1>~<h6>まで用意されていて数字が小さいほど重要で大きく表示されます。このページでは、「HTMLとは」は<h1>タグで、「HTMLとは何か?」や「意味づけとは」などの箇所が<h2>タグで書かれています。
HTMLは骨組み
HTMLはWEBページを作るための基礎的な言語であるため、HTMLだけでは見栄えがよく機能的なWEBページは作れません。
なので、HTMLで骨組み部分を作り、CSSと呼ばれる他のマークアップ言語やプログラミング言語と組み合わせることでWEBページを形作っていきます。
HTMLを学ぶ方法
では、HTMLを学ぶ方法は何があるでしょうか?
独学
HTMLは基礎的な言語であるため、誰でも簡単に学べるサービスもあるので、ぜひ利用してみてください。オススメは、ドットインストールやProgateなどです。無料から始められますので少しでも興味があれば遊び感覚で触ってみるのもいいでしょう。
逆にオススメ出来ないのは、はじめから本をみて勉強することです。はじめから本をみて覚えようとしても、読むだけで疲れるしお金もかかります。
動画やスライドを見ながら自分の手を動かす方法がオススメです。
スクール
どうしてもプログラマーやWEBデザイナーになりたいという人や、短期間で技術を身につけたい、自分だけではどうしてもサボってしまう人などにオススメです。
私もプログラミングスクールで基礎から学びはじめ、三ヶ月でクラウドワークスで案件を受注することが出来ました。詳しくは他の機会に記事にしたいと思います。
ちなみに、私はプログラミングスクールTechAcademyのWebデザインコースとWordPressコースを受講しました。

おわりに
今回はHTMLとは何かをテーマに記事を公開しましたが、今後は細かいHTMLのルールや使い方なども記事にしていきたいと思います。
