CODING

[超初心者] HTMLとは

投稿日:2019年10月2日 更新日:

どうも、べ〜やんです。

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のルールや使い方なども記事にしていきたいと思います。




-CODING
-

執筆者:


comment

関連記事

[CSS] 変形transformの使い方

どうも、べ〜やんです。 今回は、デザインを変形させるtransformを紹介します。 transformとは transformは変形を指定するプロパティで、transitionとセットで使用すること …

HTML文法チェックサービスMarkup Validation Service

どうも、べ〜やんです。 今回は、HTMLの文法にミスがないかを自動で判別してくれるサービスMarkup Validation Serviceを紹介します。 HTMLを独学で勉強していて自分の知識がどれ …

[CSS] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。 今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …

HTMLでリンクをはる

どうも、べ〜やんです。 今回は、HTMLでリンクを貼る方法をざっくり紹介します。 テキストや画像をクリックしたら、別のページに移動できるあれです。 <a href=""&gt …