HTMLとは?初心者でも分かる基礎知識から書き方まで詳しく解説

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

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

しかし、「HTML」を学習する上で
何から学べばいいかよく分からない……
結局何が出来るプログラミング言語なの?

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

そこで今回は、なるべく専門用語を使わずに、初心者でも10分で理解できるようにHTMLとはどういうものなのか? を説明していきます!

これからWebに触れていく方は、ぜひ参考にしてみてください!

HTMLとは?


HTMLとは?

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

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

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

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

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

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

HTMLは何の略?

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

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

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

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

HTML5とは?

HTML5とは、現在主流になっているHTMLの最新バージョンのことです。

HTML5の特徴として、ブラウザ間の交互性を高め今まで思うように表示されなかった問題が改善されている事が挙げられます。

また、今まで従来のHTMLで複雑だった処理がより簡単に実現できスッキリ書けるようになりました。

現在運用されているWebサイトはほとんどがHTML5で作られており、今後も新たに作る場合HTML5を使用し作ることになるでしょう。

今から学習を始める場合は、HTML5を優先で学んでおけば間違いありません。HTML5について詳しく知りたい方はこちらの記事を御覧ください。

HTML5とは?初心者向けに特長や使い方を超わかりやすく説明してみた
更新日 : 2020年6月19日

HTMLは何に使われている?

HTMLはWebサイトを作るのに使われれます。

Webサイトは、ただ文字を入力しただけでは表示できません。「これはWebサイトです」とコンピュータにわかってもらう必要があります。

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

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

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

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

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

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

HTMLの役割

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

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

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


Webサイトを人に例えたイメージ図

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


JavaScriptとは?概要・始め方・将来性を初心者にもわかりやすく解説
更新日 : 2020年7月23日

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

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

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

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

HTMLを構成する用語

タグ

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

【HTMLの例】

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

要素

HTMLは、大きく分けてhead要素とbody要素で構成されています。

head要素には、メタ情報と呼ばれるサイトに関する情報を定義し、実際の見た目には影響しません。

body要素には、テキストや画像など実際のサイトの見た目に関する部分を定義していきます。

head・body以外にも、見出しを表すh1要素やテキストを表すp要素など、様々な要素を定義してWebページを作成していきます。

それぞれの要素の始まりや終わりを示しているのが、タグと覚えておきましょう。ただし、要素の中には開始タグや終了タグが省略できるものもあるので、注意が必要です。

【構成例】

<html>
<head>
<title>~</title>
</head>
<body>
<h1>~</h1>
<p>~<span>~</span>~</p>
</body>
</html>

属性

上記で説明した要素には、属性を付けることができます。

属性と聞くとイメージが湧きづらいかもしれませんが、要素に何か設定を付けるものと覚えておけば良いと思います。

属性は、下記の構文で記述します。

<要素名 属性=”属性値”>

要素名の後ろは、半角スペースを空けるのを忘れないようにしましょう。属性の後ろに=(イコール)を付け、属性値は”(ダブルコーテーション)で囲むことで定義できます。

“‘(ダブルコーテーション)は引用符と呼ばれ、囲み忘れてうまくページが表示されないことが初心者によくあるので、忘れないように癖付けておきましょう。

【属性の設定例】

<meta charset=”UTF-8”>

HTMLを覚えるメリット


HTMLを学ぶ女性

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

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

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

侍エンジニア塾 卒業生:市川さん https://www.sejuku.net/?cid=text_6026_lp

侍エンジニア塾で学習をした市川さんも、初心者でありながら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を使うために必要なもの

HTMLを使うための準備はとても簡単! 今から5分もかけずに、準備をすることができます。必要なものはたったの2つ、「ブラウザ」と「テキストエディタ」です。

ブラウザ

難しく言うと、Webページを表示するアプリケーションのことです。超簡単に言えば、今あなたがこのページを開いている「それ」です。

Internet Explorerとか、Google Chromeとか、Safariとか、Firefoxとか……色んな種類がありますよね。それらのことをブラウザと言います。

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

テキストエディタ

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

メモ帳でもHTMLは書けるのですが、HTMLなどの言語を書く際にはプログラミングに強いテキストエディタを使うことをオススメします。予測変換やエラー発見など、様々な機能がついているのでとても便利ですよ。

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

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

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

まずはHTMLを体感してみよう!


HTMLを書く男性

テキストエディタが準備できたら、実際にHTMLを書いていってみましょう。

ここからは、

  • HTMLファイルの作り方
  • HTMLのコード例
  • HTMLファイルをブラウザに表示させる方法
  • よく使うタグ

を紹介をしていきます。

ぜひ皆さんも、読みながら一緒に手を動かしていってみてくださいね。

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

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

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

テキストエディタを開く

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


テキストエディタ

保存をする

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

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

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

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

HTMLを使ってサイトを表示してみよう

それでは、実際に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先のページへ移動します。

よく使うタグを紹介

先ほどの例で、<h2>や<a href....>といった、<>カッコで括られた文字がたくさん登場したのに気づきましたか? これをタグと言い、HTMLはタグによって構成されています。

画像:タグ説明

先ほど紹介したサンプルのタイトルや見出し、リンクなどの他にも装飾や画像の表示など、すべてタグによって作られているのです。Webサイトを表示するために欠かせない部品と覚えておきましょう。

ただ、HTMLには様々なタグが存在するので、全てを丸暗記する必要はあります。今回はそんな中でも、これだけは覚えておくべき基礎中の基礎となるタグをご紹介していきます!

リンクを貼ろう/aタグ

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

【HTML】

<a href="リンク先のURL">ここをクリックするとリンク先に飛びます</a>

【画面での表示】

画像:リンクの説明

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

画像を表示する/imgタグ

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

【HTML】

<img data-src="画像のパス" alt="画像の説明" class="lazyload">

【画面での表示】

画像:画像の説明

画像のパスとは、画像がどのフォルダに入っているのかを指定するものです。

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

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

そのため、URLにちょっと似ているパスというものを使って、ファイルの場所を指定してあげるのです。ここについては下記の記事でも詳しく解説しているので、併せてチェックしてみてください。

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

リストを作る/ulタグとolタグとliタグ

項目の種類によっては、リストタグが用意されています。リスト用のタグには二種類あり、箇条書きにする「ulタグ(unordered list=順序をつけないリスト)」と「olタグ(ordered list = 順序をつけるリスト)」があります。リストの内容には、「liタグ(list item=リストの項目)」をつけます。

例えば、ulタグとliタグを組み合わせると、以下のようなデザインになります。

【HTML】

<ul>
   <li>リスト項目1</li>
   <li>リスト項目2</li>
   <li>リスト項目3</li>
   <li>リスト項目4</li>
</ul>

画面での表示

画像:リストの説明

また、olタグとliタグを使うと以下のような番号がついたリストを作ることができます。

HTML

<ol>
   <li>リスト項目1</li>
   <li>リスト項目2</li>
   <li>リスト項目3</li>
   <li>リスト項目4</li>
</ol>

画面での表示

画像:リストの説明

こうしたタグを使えば、情報をわかりやすく表示することができます。

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

もちろん、タグは他にもたくさんの種類があります。一度に全てを丸暗記するのは難しいので、ぜひ少しずつ学習をすすめながら、学んでいってくださいね。

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

⇒参考:HTMLタグリファレンス(ABC順) http://www.htmq.com/html/
⇒参考:HTMLタグ一覧 http://www.fureai.or.jp/~irie/html-tag/

HTMLを学習するときのコツ


HTMLを学習する女性

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

HTMLをきっかけに、本格的なプログラミング学習をはじめようという方は多いです。

しかし、学習を始める前にまず学習の目的を明確にしましょう。
目標は具体的なものであり、期間まで明確に設定すると良いでしょう。

自分の目的に合わせて学習のボリュームを考え、無駄な学習をしないように効率よくステップアップしていきましょう。

Web制作やWebデザイナーを目指す場合

Webサイトの制作を行いたい場合やWebデザインを行いたい場合は、サイトを真似て作れるレベルまで学習することをオススメします。

タグの意味と使い方、またCSSも基礎を抑えておきたい所です。特にマークアップをメインに行うコーダーは、サイトを作れるだけでなくコンテンツに適したタグを使用してサイトを作れるようになれると良いでしょう。

1人ではなかなか間違っていることに気がつけない事もあるので、コードレビューをしてくれる人を見つけ改善していくとよりレベルアップしていくと思います。

HTMLの基本を網羅することはもちろん、CSSやJavaScriptも学習の視野に入れて目標を立てると良いでしょう。

Web系エンジニアを目指す場合

Web系エンジニアを目指す場合は、基本的なタグを使用できるレベルまで学習すると良いでしょう。もし未経験からエンジニアとして働くことを第一歩とするのであれば、HTMLの勉強に力の入れすぎる必要はないと思います。

HTMLは学習難易度が低く就職時のスキルとして大きく評価されるものではありませんし、HTMLのスキルだけで就職することは不可能と言っても良いでしょう。

あくまでプログラミング学習の入り口として学習する程度にし、自分の職種に合わせて他のプログラミング言語を学ぶべきです。

HTMLを学習した後に学習するおすすめのプログラミング言語は、JavaScriptです。

Web系エンジニアは大きく分けてフロントエンドエンジニアとサーバーサイドエンジニアの2つに分かれますが、JavaScriptはフロントサイドの理解だけではなく、サーバーサイド言語の理解を深めてくれます。

Web系の会社であれば使用頻度は非常に高く、フロントサイドとサーバーサイドどちらでも使用することができます。

サーバーサイドのエンジニアを目指す場合は、合わせてRubyやPHPといったサーバーサイドのプログラミング言語も学習しましょう。

ECサイトを自作したりオリジナルのWebサービスを作ってポートフォリオを持っておくことは、就職する場合もはや必須と言えます。

ポートフォリオとなるWebサービス等の作成を最終目標とし、学習プランを立てていくと良いでしょう。

フロントエンド言語やサーバーサイド言語についてはこちらの記事で詳しく解説しているので、合わせて御覧いただけるとより理解を深めることができるかと思います。

フロントエンドとサーバーサイドの違い。仕事内容・年収・需要を比較
更新日 : 2020年7月28日

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

ここまで目的別に目標の明確化について解説しましたが、なかなか学習プランが決められないという方もいると思います。そんな時は、「プログラミング診断アプリ」を使ってみましょう。

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

学習サイトを活用しよう

目標がたてられたら、今度は学習サイトを使って勉強をすすめていきましょう。

今は、非常にたくさんのプログラミング学習サイトがあります。こういったサイトでは、ステップバイステップでプログラミングの方法を学べるほか、模範解答チェック機能などもあり、自分のコードの間違いを簡単に見つけることができます。

今回は、その中でも特にオススメの3つを紹介します。どれもHTMLの学習コースを揃えていますし、無料で使うことができるものもありますので、ぜひ試してみてください。

ドットインストール

3分程度の短い動画をみながら、プログラミングを学んでいくことができるサイトです。基礎講座は無料でみることができます。

一回の動画が短いので飽きにくく、またコード確認ツールなどもあるので、答え合わせも簡単にできます。

⇒参考:ドットインストール https://dotinstall.com/

Paizaラーニング

こちらも、3分程度の短い動画をみながら学んでいくタイプのサイトです。美少女キャラが音声付きで登場してくれるので、特に男性にオススメです。

またスキルチェックができるゲームなどもあるので、ある程度学習が進んだら、チャレンジしてみましょう。

⇒参考:Paizaラーニング https://paiza.jp/works

Progate

スライドをみながら概要を確認し、実際にコードを書きながら学習していくタイプのサイトです。

コースをクリアするごとにレベルが上がっていくので、モチベーションも保ちやすく、自分のプログラミングスキルをチャート形式で見ることもできます。

⇒参考:Progate https://prog-8.com/

もっと詳しく学習サイトについて知りたいという方は、こちらの記事も参考にしてみてください。

【2020年最新】プログラミングを独学で学習できる無料サービス19選
更新日 : 2020年8月12日

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

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

学習時に手を動かす重要性は、侍エンジニア塾の卒業生で7ヶ月で2つのWebアプリを開発した中村義之さんも言及しています。

中村さんは、株式会社DeNAから分社化した『株式会社みんなのウェディング』取締役に就任後、上場を経て退職され、その後起業を目指す中で侍エンジニア塾でプログラミングを勉強されました。

体験談を載せておきますので、興味のある方は参考にしてみてくださいね。

たった7ヶ月で2つのWebアプリを開発した最速プログラミング学習法
更新日 : 2019年5月15日

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

もし壁にぶつかったら……

HTMLを学び始める人は、ほとんどがプログラミング初心者です。HTMLは確かに学びやすい言語ではありますが、それでもエラーを解決できなかったり、自分の思うようなデザインができないなど、大きな壁を感じてしまうこともあるでしょう。

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

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

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

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

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

プログラミング学習は、エラーの連続です。例えQ&Aサイトを活用したとしても、わからないことはでてきます。

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

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

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

まとめ

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

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

LINEで送る
Pocket

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

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

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

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

cta_under_bnr

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

書いた人

侍ブログ編集部

侍ブログ編集部

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

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー