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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

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

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

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …

[HTML] ルビを振る方法

どうも、べ〜やんです。 今回こんかいは、HTMLでルビを振ふる方法ほうほうを紹介しょうかいします。 ルビを振るとは ご存知の方がほとんどだと思いますが、ルビとは(ふりがな)のことです。 なんで(ふりが …

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …