HTMLとは?初心者でも10分で理解出来る知っておくべき基礎知識

こんにちは!侍エンジニア塾ブログ編集部です。

これからプログラミング学習や、HP作成などに取り組んでいこうとしている方が、まず最初に聞く単語といえば、「HTML」だと思います。

しかし、「HTML」を学習する上で

何から学べばいいかよく分からない・・・
結局何が出来るプログラミング言語なの?

と思う方も多いですよね。「HTML」は、WEBの世界においては基礎となるものなのですが、調べてみても専門用語が多くてわかりづらいということもあるでしょう。

そこで今回は、なるべく専門用語を使わずに、初心者でも10分で理解できるようにHTMLとはどういうものなのか?を説明していきます!これからWEBに触れていく方はぜひ参考にしてみてください!

HTMLとは?

shutterstock_549472756

画像:Shutterstock

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作成するためのMarkup(マークアップ)言語となります。

リファレンスではHTMLについて、以下のように説明されています。

HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。

引用元:HTML クイックリファレンス http://www.htmq.com/htmlkihon/001.shtml

今あなたがスマホやPCでみている画面(WEBページ)は、基本的にはこのHTMLという言語(文字)によって作られています。

「Markup:マークアップ」というのは「印をつける」という意味です。文字に印(タグという)をつけていくことでそれぞれ意味づけをして、画像や表を見れるようにすることができるのです。

WEBページが言語で作られているとは?

WEBページが言語(文字)で作られていると聞いても、少しイメージがわきづらいかもしれませんね。例えば、閲覧しているWebページで右クリックをして、「ページのソースを表示」を選択してみてください。

画像:ページのソースを表示

そうすると、このような画面が出ます。

画像:ページのソース画面

このように、WEBページの正体は、「HTMLでの印づけを使って構成されている文書」であり、これがブラウザで読み込まれることで、Webページが表示されているのです。

ソースコードは、あらゆるWEBページで見ることができるので、好きなページで試しに覗いてみてもいいでしょう。

普通の文字じゃダメなの?

リンクを使ったり、タグで意味づけをしたりと、初めて学んでいく方にとっては少し複雑に感じるかと思います。なぜこのように一見面倒くさいことをするのかというと、シンプルに言えば、「コンピューターが理解できるようにするため」です。

文書内の各部分に目印をつけて、その部分がどんな要素なのかを明確にすることで、コンピュータがその文書の構造を理解できるようになります。

外国の方と英語でコミュニケーションをとるように、コンピューターとの間にも適したコミュニケーション方法があるということですね。

HTMLの役割

HTMLは一般的にWebサイトの骨組みとなる役割を持っています。先程ご紹介したとおり、Webサイトのソース画面を確認していただくと多くのHTMLが使用されています。

しかしHTMLだけでは普段見慣れたWebサイトは作成できません。基本的にWebサイトはHTMLとCSS、Javascriptなどを用いて作られています。

これを人にたとえてご紹介すると、HTMLは骨格、CSSが皮膚の役割をもち、皮膚や骨格を動かす筋肉がJavascriptとなります。その他にも作りたいWebサイトによって、必要なプログラミング言語が変わっていきます。

CSSやJavaScriptについて詳しく知りたい方はこちらの記事も合わせて御覧ください。


JavaScriptとは?初心者向けに概要や使い方をわかりやすく解説
更新日 : 2019年6月14日

HTMLがわかるとなにが良いの?

shutterstock_354018575

画像:Shutterstock

WEBの仕組みがわかる

ほとんどのWEBページはHTMLとCSSで作られています。そのため、HTMLでWEBページを作成することができれば、WEBの仕組み全般が分かるようになります。

CSSについては以下の記事でおすすめの書籍を紹介していますので、合わせて参考にしてください。

CSSの基本がしっかりわかる!おすすめ書籍10選

WEBデザインもできる

HTMLはWEBデザインの最も基本でもあります。自分でHTMLでWEBページを作成することができれば、WEBサイトやブログのデザインを変更したり、装飾することもできるようになります。

そのためにはHTMLの基本や構成、後述するタグの使い方について、しっかりと理解しておくことが大切です。

初心者でも簡単に習得できる

HTMLは最初にご紹介したとおり、「Markup言語」と呼ばれており、厳密にいうとプログラミング言語ではありません。

文字にタグを当てはめるだけで反映させることができるため、初心者でも比較的簡単に習得することができます。基本的にプログラミングの基礎となるため、HTML/CSSを習得してからプログラミング言語を学ぶ流れが一般的です。

HTMLのタグとは
タグとは、「テキストに意味を与える印」です。タグを付けることでテキストに色を付けたり見出しとして認識させることができます。

HTML基礎編!よく使うタグを紹介

HTMLはタグというものによって構成されています。

画像:タグ説明

先ほど紹介したサンプルのタイトルや見出し、リンクなどの他にも装飾や画像の表示など、すべてタグによって作られているのです。

WEBサイトを表示するために欠かせない部品と覚えておきましょう。このタグはめっちゃめちゃ種類があるので、全部覚えるのはなかなか大変です…

今回はそんな中でも、これだけは覚えておくべき基礎中の基礎となるタグをご紹介していきます!

リンクを貼ろう/aタグ

WEBサイトに欠かせない、他ページへのリンクを指定するタグです。

HTML

画面での表示

画像:リンクの説明

これで文字をクリックすれば、指定したURLへ移動することができます。

画像を表示する/imgタグ

ただ文字だけのWEBサイトなんてつまらないですよね。写真などの画像を表示するには、下記のようにimgタグというものを使います。

HTML

画面での表示

画像:画像の説明

画像のパスとは、画像がどのフォルダに入っているのかを指定するものです。HTMLで画像を表示する際、直接画像のデータを貼り付けるという訳ではありません。他の場所にある画像のデータを持ってきて、文字などと一緒に表示するという仕組みになっています。

画像:画像ファイルの説明

そのため、URLにちょっと似ているパスというものを使って、ファイルの場所を指定してあげるのです。

ここについては下記の記事でも詳しく解説しているので、併せてチェックしてみてください。

HTMLのパスってなに?活用方法をまるっと解説!

これはリストです/ulタグとliタグ

箇条書きのリストにもわざわざタグが用意されています。下記のように、ulタグの中にliタグを入れて使うようにしましょう。

HTML

画面での表示

画像:リストの説明

項目の頭に点がついた状態で表示されますね!リストっぽい感じに表示されて、なかなかいい感じです。

特に意味なし/divタグとspanタグ

見出しを見て、

特に意味ないなら覚えなくてもいいんじゃない?

と思った方、甘い!実はこのタグがHTMLで一番重要と言っても過言ではないのです。まずは書き方をチェック!

HTML

テキストが入ります

テキストが入ります

画面での表示

画像:divタグの説明

うん、何もおきませんね。この何もおきないのがとっても大事なんです。divタグとspanタグには、特に意味づけがされていません。なので、どんな場面でも使うことができるタグです。

例えば、「見た目を整えるためにいくつか文字のグループを作る必要がでてきた」なんて時、この意味がない2つを使えばうまくグループ分けができるのです!

画像:divタグの説明

今はちょっとまだ想像ができないかもしれません。

しかし超重要タグなので存在だけはしっかり覚えておきましょう!

HTMLタグは他にもたくさん!

もちろん、タグは他にもたくさんの種類があります。それぞれ必要な場面で活用できると、あなたのHTMLはぐんぐん上がっていくことでしょう!

どんなものがあるのかチェックしたい方は、下記のリファレンスなどを参照してみてくださいね。

HTMLタグリファレンス(ABC順)
HTMLタグ一覧

HTMLファイルを作ってみよう!


画像:Shutterstock

ここでは、実際にHTMLファイルを作成していきましょう。HTMLファイルを作成するには、拡張子「.html」をつけてファイルを新規に作成します。ここではファイル名を「sample.html」とします。

HTMLは以下のように記述します。

このファイルを保存して実行すると、以下のように表示されます!

sample_html_01
画像:見出しの説明

このHTMLでは、h1、h2、h3がそれぞれの見出しとなります。見出しの下の「侍エンジニア」の部分がリンクとなりURLと「侍エンジニア」と記載することで、クリックするとURL先のページへ移動します。

HTMLをきっかけに本格的にプログラミング学習をはじめよう

学習の目的を明確にしよう

HTMLをきっかけに本格的なプログラミング学習をはじめようという方は多いです。しかし、学習を始める前にまず学習の目的を明確にしましょう。目標は具体的なものであり期間まで明確に設定すると良いでしょう。

いきなりそんな事を言われてもどうすればいいか分からない…。

という方もいらっしゃいますよね。そんな方は「SMARTの法則」を使ってみましょう。

SMARTの法則とは、

Specific・・・具体性
Measurable・・・計測出来る
Achievable・・・現実的か
Relevant・・・現実的
Time-bound・・・期日が明確

という意味があり、この「フレームワーク」をうまく使用することで、自分の成長を感じられる効果的な目標設定が行えます。

以下の例をもとに実際に目標を立ててみましょう。

例:プログラミングの基礎を学ぶ

  • Specific:平日2時間、土日5時間勉強する
  • Measurable:学習記録をつける
  • Achievable:平日2時間、土日5時間なら無理なく続けられる
  • Relevant:プログラミングスキルを身につけられる
  • Time-related:3か月

目的に応じた言語選定をしよう

目標設定が出来たら、目標に対してどんなプログラミング言語が必要なのか考えてみましょう。

プログラミング言語の選定にはこちらの「プログラミング学習診断アプリ」をご活用下さい。最短1分間であなたの目的に応じた必要なプログラミング言語を診断いたします。
学習診断を行う

HTMLから学んでWebサイトを開発しよう

HTMLについて紹介しましたが、まず基礎からしっかり学び、Webサイト制作を始めたいとお考えの方はプログラミングスクールで学習することをおすすめします。

侍エンジニア塾では、初心者が安心して学習できる「マンツーマンレッスン」を行っています。カリキュラムもあなたに合ったプランをご用意させていただきます。

どんな事が学べるのかというと

  • Webサイト制作の基本であるHTMLを学べる
  • 本格的なWebサイト制作のノウハウを学べる
  • Webサイト制作の仕事獲得までを徹底サポート


このようなサポートを徹底的に行っています。1人で学習するのに不安を感じる方・・・「無料体験レッスン」も行っているので、今後の学習プランやどの言語を学んでいくべきか、気軽にご相談ください!

この無料体験レッスンでは

  • キャリアを考えた学習プラン
  • あなたに合ったカリキュラムの提案
  • あなたが抱える不安に対しての解決案


などです。

無料体験レッスンであなたの悩みを解決して、プログラミング学習を効率よく進めましょう!

↓のカレンダーから無料体験レッスンの予約ができます!

未経験者でも安心の徹底サポート!まずは完全無料の体験レッスン!

「プログラミングに興味があるけど未経験だし、、、」とお悩みの方はご安心ください。

  • 24時間質問し放題
  • あなただけのオーダーメイドカリキュラムで学習の効率化
  • 仕事獲得方法からオリジナルアプリ開発方法

侍エンジニア塾では徹底したサポートによる「オーダーメイドカリキュラム」を作成しています。

まずは無料体験レッスンで、「挫折しない学習方法」や「あなただけの学習ロードマップ」を知り、学習の効率化をしましょう。独学の難点である「オリジナルアプリの作り方やエラーの対処法」についてもアドバイスさせていただきます。

詳しいサービス内容は、下記よりご参照ください。

cta_mtm1

LINEで送る
Pocket

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説