スライドショースライドショースライドショー

HTMLとは?初心者でも10分で基礎がわかるように解説してみた

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

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

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

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

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

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

HTMLとは?

HTMLとは、Webページを作成するためのMarkup(マークアップ)言語です。

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

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

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

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

そんなHTMLについて、もっと詳しく見てみましょう。

HTMLは何の略?

HTMLは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。

Hyper Text:ハイパーテキスト」とは、日々みなさんがクリックしているリンクなど、通常の文字だけではない、別の役割を持っているテキストのことです。

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

つまりHTMLは、ハイパーテキストというテキストを使って印をつけて、文字、画像、表などを表示する言語ということになります。

HTMLは何に使われている?

HTMLの活躍場所は、今まさにあなたが見ているこのWebページ達です。

これらのWebページは、ただ文字を入力しただけでは表示できません。「これはWebページです」とパソコンにわかってもらう必要があります。

他にも、Webアプリに表示される文字や画像を指定するなど、画面に情報を表示する部分を担当しています。

Webに関わる様々なものに使われているため、HTMLはWebの基本と言われています。

試しに、閲覧しているWebページで右クリックをして、「ページのソースを表示」を選択してみてください。

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

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

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

これが閲覧しているWebページを構成しているHTMLです。これがブラウザで読み込まれることで、Webページが表示されています。

HTMLの役割

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

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

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

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


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

HTMLの基本構成

HTMLは、タグというものを使ってテキストを印付けしていきます。タグは始まりを表す開始タグと、終わりを表す終了タグがあり、それらで文字などを囲うことでマークアップをしていきます。

【HTMLの例】

<html><!--ここからHTMLが始まりますよという開始タグ-->
文字や画像表示のタグが入ります
</html><!--ここでHTMLが終わりますよという終了タグ-->

何故HTMLを使わなければいけないのか

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

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

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

HTMLを覚えるメリット

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

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

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

侍エンジニア塾卒業生:市川さん

侍エンジニア塾で学習をした市川さんも、初心者でありながらHTMLからWebの学習を始め、他の言語の学習を経てフリーランスデビューしました。現在はWebサイト制作などに限らず様々なフィールドで活躍しています。

33歳ホテルマンがわずか4ヶ月でフリーランスエンジニアデビュー
更新日 : 2019年11月21日

WEBの仕組みがわかる

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

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

【最新版】CSSがしっかりわかる!おすすめ書籍まとめ10選
更新日 : 2018年11月23日

WEBデザインもできる

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

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

HTMLを使うために必要なもの

HTMLを使うための準備はとても簡単!今から5分もかけずに準備をすることができます。

必要なものはたったの2つ「ブラウザ」と「テキストエディタ」です。

ブラウザ

難しく言うと、Webページを表示するアプリケーションのことです。

超簡単に言えば、今あなたがこのページを開いている「それ」です。Internet Explorerとか、Google Chromeとか、Safariとか、Firefoxとか…色んな種類がありますよね。それらのことをブラウザと言います。

HTMLを書く上でオススメなのはGoogle Chromeなのですが、ぶっちゃけどのブラウザでも問題ありません。好きなブラウザを用意しておきましょう。

テキストエディタ

パソコンで文字を入力し保存しておくためのアプリケーションのことです。ざっくり言うとメモ帳のことですね。

メモ帳でもHTMLは書けるのですが、HTMLなどの言語を書く際にはプログラミングに強いテキストエディタを使うことをオススメします。色々機能がついているので、超便利なんです!

下記の記事でオススメのテキストエディタを紹介しているので、好きなものをチョイスしてみてください。

HTML/CSS、JavaScriptで使える超優秀フリーエディタおすすめ5選
更新日 : 2019年8月15日

※ちなみに筆者はSublimeText3を愛用しています。

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

準備ができたら、早速HTMLファイルを作ってみましょう。手順はとっても簡単です。

※以降の解説の画像はMacでSublimeText3というテキストエディタを使用したものです。環境によって少し見た目などの違いがあるかもしれませんが、基本手順は変わりません。

テキストエディタを開く

まずはテキストエディタを開きましょう。最初なので何も書かれておらず、保存もされていない、まっさらな状態が表示されるはずです。

保存をする

何も書いていない状態ですが、これで保存しちゃいましょう。保存する際は、拡張子(※)を「.html」をつけてファイルを新規に作成します。ここではファイル名を「sample.html」とします。

※拡張子
ファイルの種類を示す一番最後の文字、jpg、pngなど。

はい、これでHTMLファイルができました。簡単ですね!

とはいえこれでは中身は何もない状態です。ここからいろいろなタグを組み合わせて、表示したい文字や画像を入れ込んでいく流れになります。

例として、下記のコードをご用意してみました。これを入力して上書き保存してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample.html</title>
  </head>
  <body>
    <h1>これはHTMLファイルです。</h1>
    <h2>これはHTMLファイルです。</h2>
    <h3>これはHTMLファイルです。</h3>
    <a href="https://www.sejuku.net/">侍エンジニア</a>
  </body>
</html>

保存したファイルをブラウザのアイコンにドラッグ&ドロップすると、ブラウザ上で内容を表示することができます。下記のように表示されればOKです!

sample_html_01
画像:見出しの説明

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

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

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

画像:タグ説明

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

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

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

リンクを貼ろう/aタグ

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

HTML

ここをクリックするとリンク先に飛びます

画面での表示

画像:リンクの説明

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

画像を表示する/imgタグ

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

HTML

画像の説明

画面での表示

画像:画像の説明

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

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

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

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

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

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

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

HTML

    • リスト項目1

 

    • リスト項目2

 

    • リスト項目3

 

    • リスト項目4

 

 

画面での表示

画像:リストの説明

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

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

見出しを見て、

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

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

HTML

テキストが入ります

テキストが入ります

画面での表示

画像:divタグの説明

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

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

画像:divタグの説明

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

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

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

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

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

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

HTMLを学習するときのコツ

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

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

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

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

SMARTの法則とは、

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

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

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

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

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

学習目標がなかなか決められない時は…

SMARTの法則を使うことで目標の明確化はしやすくなりますが、それでもフレームワークに当て込むことって難しいですよね。そんな時は、「プログラミング診断アプリ」を使ってみましょう。

このアプリは2〜3の質問からあなたに最適な学習プランを算出することができます。もちろん無料で使用できるのでぜひご活用ください。

まずは大まかに理解しよう

HTMLに限らず、Webの学習をする際、最初から全てを理解しようとしたり、出てくるタグなどを丸暗記しようとしてしまう人が多くいます。

しかしこれは大きなミス。Webについての学習は、全てを理解する必要も、丸暗記をする必要もありません

学生時代のテストとは違い、Webサイト作りはわからないことがあれば調べてOKです。タグをまとめた表を横に置いて作業してもいいでしょう。

大事なのは、調べられる程度の知識をつけることです。「ジグソーパズルをやるとき、周りから作ってだんだん真ん中を埋めていくイメージ」と、侍エンジニア塾卒業生の竹田さんも語っています。

文系出身SEがスキルを身につけられない環境から転職!開発業務を始めるまでの学習・転職秘話
更新日 : 2019年11月8日

覚えなきゃ!と構えずに、「なんとなくわかればいいや」くらいのマインドで進めていきましょう。

とにかく手を動かすことを考えよう

HTMLは、ただ本などの情報を読むだけでは習得できません。自分で考えてコードを書く作業を繰り返すことで、しっかりと自分の血肉にしていくことが重要です。

学習時に手を動かす重要性は、侍エンジニア塾講師の岩本さんも語っています。

ゲーム業界を目指す人必見!自然とポートフォリオが出来上がっていく指導方法とは?
更新日 : 2019年11月5日

大枠を掴みながら手を動かし、わからないところは調べる。これがHTMLに限らず、プログラミング言語学習の鉄則なのです。

行き詰まったら誰かに頼ろう

調べてもどうしてもわからなくて諦めそう
大枠と言われても、どこからどこまでが大枠なんだろう…

HTMLを学び始める人は、ほとんどがパソコンもそこまで詳しくない、Webの初心者ばかりだと思います。初心者向けの言語であるHTMLでも、大きな壁を感じてしまうこともあるでしょう。

でも、学習は一人でやりきらなければいけないわけではありません。知り合いのエンジニアに教えてもらったり、質問サイトなどを活用してみるなど、他の人の助けを受けながら学習をするのも全然OKです

下記の記事でオススメの質問サイトを紹介しているので、ぜひ活用してみてください。

悩める初心者の味方!プログラミング質問サイト厳選5選
更新日 : 2019年5月2日

悩みが解決しないときは…

Q&Aサイトに聞いてみたけど、よくわからない……。

プログラミング学習はエラーの連続。例えQ&Aサイトを活用したとしてもわからないことはでてきます。どうしてもエラーが解決出来ない時は、スクールを受講することも1つの方法です。

弊社が運営する「侍エンジニア塾」では、プロが考えたオリジナルのカリキュラム、いつでも質問でき、エンジニアが回答してくれる掲示板など、挫折するきっかけになるポイントをカバーしたサービスを提供しています。

まずは、無料体験レッスンでプロのコンサルタントに相談してみてください。IT業界の情報や学習のコツ、目標達成のためのプロセスについてなどをじっくりヒアリングした上でアドバイスをさせていただきます。

無料体験レッスンは、下記のフォームよりお申し込みいただけます。ぜひお気軽にお申し込みください。

まとめ

HTMLはWebに関わる全ての人の登竜門です。最初は意味がわからない部分もたくさんあると思いますが、ひとつひとつを紐解いていけば、パズルゲームのように組み合わせているだけの簡単で面白い言語です。

HTMLは書くための準備も簡単なので、ぜひ気軽に触れてみてくださいね。

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

侍ブログ編集部

侍ブログ編集部

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

おすすめコンテンツ

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

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