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] CSSで吹き出し風デザイン・三角形

どうも、べ〜やんです。 今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。 三角形がぴょこって付いているアレです。 三角形 まずはCSSで三角形を作る方法をざっくり紹介します。 三角形 …

[CSS] CSSで縦書きにする方法

どうも、べ〜やんです。 今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。 和風のデザインやサイドにメニューバーを配置する時などに便利です。 縦書きデザイン 和風テイストのデザインやサイド …

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …

[CSS] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …