【完全初心者】HTMLとは何か?をイラストを使って解説

webサイト制作を勉強する方やweb担当なった社会人の方がまず勉強するコンピューター言語であるhtmlの基本概念と使い方をイラストや写真を用いてわかりやすく解説していきます。htmlは何をするためのもので何ができるのか?やどのようにファイルを作って書いていくのか?という初心者が気になる疑問を一挙解消していきます。

本記事ではhtmlの概要・何ができるのか?・勉強するにあたっての疑問点を解消することを目的にしているので超初心者向けの内容になっています。そのためなるべく技術的な内容には触れません。

そのためファイル作成の仕方やコードの書き方を紹介していますが本記事では流れを見るだけでもOK!とりあえずhtmlをなんとなくでいいので理解しましょう!

「htmlとは?」を理解できたらこちらの記事でhtml入門をしてみてください。実際に手を動かしながらhtmlのタグの使い方を覚えることができます。

関連記事

【HTML入門】イラスト付き解説とサンプルの練習で基本を身につける

htmlとは?

htmlとはwebサイトをつくるために世界中で使用されているコンピューター言語です。またhtmlは略称で正式には「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」

 amazonのwebサイト
Amazonのwebサイトだったり…
 appleのwebサイト
Appleのwebサイトだったり…

みなさんがよく利用するこれらの有名なwebサイトにもhtmlが使われています。

実は、これらのwebサイトがどんなhtmlで書かれているのかを確認することができます。それでは実際にどんなものがhtmlなのかを見てみましょう。

1
ページのソースを表示

例として「apple watch」のページを開いてみます。

開いたwebページ上で

  1. 右クリックでメニューを開く
  2. ページのソースを表示をクリック
2
 appleのソースコード

すると新しいタブで左のようなコードがずらっと書かれている画面が開きましたね。ここに書かれているものがhtmlという言語です。

このhtmlをwebブラウザ(Google ChromeやInternet Explorerなど)が人間にわかる形に変換してくれることで私たちはwebページを見ることができます。

つまりhtmlとはwebブラウザに対して「どのようにwebページを表示するか」を指示するための言語といえます。

htmlとはwebブラウザにどのように表示するかを指示するための言語
詳しくは後述しますが画像のように各文章をタグと呼ばれるもので囲むことで、ブラウザにここは「〇〇で表示してね」という指示をしていきます。

htmlのざっくりとした概念がわかったところで、名前の由来である「ハイパーテキスト」の意味について解説していきます。

ハイパーテキスト

ハイパーテキストとは世界中のwebサイトを繋げるための仕組みです。

ハイパーテキストとは世界中のwebサイトを繋げる仕組み
みなさんが普段使うwebサイトにも色々なところにリンクが設置してありますよね。そしてそのリンクから別のwebページやwebサイトへ移動することができます。

このリンクによって世界中のwebサイトは繋がっておりその仕組みを利用しているのがhtmlという言語なのです。

少し難しい話になってしまったので「htmlはリンクで別のページと繋がっている」とだけわかっていればOKです!

xhtmlやhtml4・html5の違い

htmlを調べているとxhtmlやhtml4.01、html5と似たような言葉がでてくるので混乱してしまいますよね。

これらはhtmlのバージョンであり、それぞれ以下のような違いがあります。

  • HTML4.01:少し前のwebサイトで使われているバージョン
  • XHTML1.0:記述ルールが厳密でHTML4.01/HTML5と書き方の異なる部分が多い
  • HTML5:HTMLの中で最新のバージョン。モダンなサイトはこれ

バージョンが異なると記述のルールが異なるため「どれを勉強したらいいの?」という疑問がでてきますが、現代のwebサイトはhtml5が主流なので「HTML5」を勉強すればOKです。

htmlはプログラミング言語?

htmlはプログラミング言語ではありません。

htmlとあとで少しだけ紹介するcssという言語は「マークアップ言語」という種類の言語に位置付けられています。

テキストに意味をつけるのがマークアップ言語、計算処理を指示するのがプログラミング言語

ちなみにマークアップ言語とプログラミング言語の違いは「コンピューターに対して計算処理をさせるかどうか」です。

htmlでは文章に対してブラウザでどう表示するかを指示するだけなので計算処理ができないため「マークアップ言語」というわけです。

htmlの勉強だけでwebサイトは作れる?

理論上は可能ですが、きちんとしたwebサイトを作りたいならhtmlを勉強しただけではwebサイトをつくることができません。

実はhtmlは文章に意味付けをしていくだけの言語なので見た目を調整することができません。

  • 文字の大きさ・色
  • 背景の色
  • 画像やボックスの横幅や高さ

など見た目全般の指示はcssという言語を使用して行います。実際にcssを使えず見た目が調整できない場合とcssで見た目を整えた場合を比較してみましょう。

htmlだけの場合は見た目の調整ができない

htmlとcssを使った場合は見た目を綺麗にできる

比べるとよくわかるようにhtmlだけでは配色が白黒で文字の大きさや位置も単調なものになっていますよね。

右の画像のように綺麗に見た目を整えるためにはcssが必要ということがわかります。

これからwebサイト制作を勉強する人にとっては覚えることが2倍になったように感じるかもしれませんが心配はいりません。

htmlもcssもコンピューター言語の中では難易度が低いほうですので慣れれば簡単に扱うことができます。まずは焦らずにhtmlから学んでいきましょう。

htmlファイルの作り方

まずhtmlファイルの作り方を覚えましょう。htmlを書いていくにはテキストエディタというコードを書く専門のツールを用意する必要があります。

テキストエディタのインストールについてはこちらの記事で紹介しています。

関連記事

【完全ガイド版】Sublime Textの使い方と設定方法 – MacとWindow...

1
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>サイトのタイトル</title>
  <meta name="description" content="サイトの説明文">
</head>
<body>

</body>
</html>

左のコードを全てコピーします。これはhtml5を書いていく時に必ず書かなければいけないコードです。

コードの意味は今回割愛し「入門編の記事」で詳しく解説します。

2

sublime textへ貼り付け

Sublime Textを開いて先ほどコピーしたコードを貼り付けます。

3

h1ではじめてのhtmlと書く

貼り付けたコードの<body>〜</body>の間に<h1>はじめてのhtml</h1>と書きます。

後ろのコードが「</h1>」とスラッシュを含んでいることに注意してください。

4

拡張子をhtmlにして保存

名前をつけてファイルを保存します。

Windows:Ctrl + S

Mac:Command + S

保存名を「sample.html」とします。このように拡張子をhtmlにすることでhtmlファイルは作成できます。

保存先はわかりやすい場所ならどこでもOKです。

5

保存したファイルを開く

表示された

保存したファイルをダブルクリックもしくは右クリックのメニューから開きます。今回はGoogle Chromeで開いてみました。

すると開いたブラウザに

「はじめてのhtml」

と表示されましたね。

htmlの基本的な書き方

続いてhtmlの基本的な書き方について学んでいきましょう。

開始タグと閉じタグで囲む

htmlは前述した通り、コンピューターにわかるように文章に意味付け(指示)をしていく言語です。

ではどのように意味付けするかというと

文章を<開始タグ>〜</終了タグ>で囲むことで

「これは◯◯である」と意味付けします。

終了タグ(閉じタグとも呼ぶ)にスラッシュが入っていることに注意しましょう。

htmlの出力結果

たとえば、大見出しで表示したければ<h1></h1>で囲み、段落(≒通常の文章)を入れたい場合は<p></p>で囲みます。

するとそれぞれブラウザに大見出しと段落として認識されます。

このように「〇〇の要素で表示したいなら〇〇のタグで囲う」とあらかじめ色々なタグが用意されています。

htmlでよく使うタグを覚えよう

先ほどの説明であらかじめタグが用意されていると説明しましたね。

つまり「見出しを表示するタグ」「リンクを表示するタグ」「画像を表示するタグ」など、表示したい要素はどんなタグで書くのかを覚える必要があります。

実は、html5のタグは100種類以上ありますがメインで使うタグはその10分の1程度です。

また、繰り返し使ううちに勝手に覚えていくので英単語のように暗記するよりもとりあえず調べながら使っていくというのが効率の良い学習方法でしょう。

今回はその中でも特によく使われるタグを6つ紹介します。

実際に書く必要はないので「こんなものがあるんだ」とhtmlのタグを見慣れるところからはじめましょう。

見出しを表示するhタグ

h2、h3の使用例

webページには必ず見出しがあります。見出しとはwebページの各セクションのタイトルのようなものです。

ブログサイトのページにもこのようにそれぞれのセクションによって適切な見出しがつけられています。

hタグの書き方

hタグ(見出しタグ)は<h数字>〇〇</h数字>というように書きます。
数字が1に近いほど見出しの重要性が高まり、大きなテキストで表示されます。

※見出しの使い分けは入門編で解説

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

 

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

段落を挿入するpタグ

段落を挿入するにはpタグを使用します。pタグは文章を書いていく場面でよく使用され、文章の内容が変わり改行したい場合などに使用します。

pタグの書き方

<p>これは段落です</p>
<p>春はあけぼの。やうやう白くなりゆく山際、少し明
かりて、紫だちたる雲の細くたなびきたる。</p>

<p>夏は夜。月のころはさらなり、闇もなほ、蛍の多く
飛びちがひたる。また、ただ一つ二つなど、ほのかにう
ち光て行くもをかし。雨など降るもをかし。</p>

 春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

夏は夜の部分で改行されていますね。

リンクを設定するaタグ

リンクテキストを作成するにはaタグを使用します。テキストや画像をaタグで囲むことでクリックした時に、別ページへ移動させることができます。

pタグの書き方

<a href="リンク先URL">リンクテキスト</a>と書きhref=""の部分にリンク先のURLを記述します。
<a href="https://www.yahoo.co.jp/">yahooのトップページ</a>

画像を表示するimgタグ

画像を表示するにはimgタグを使用します。htmlで画像を表示するにはimgタグを使い画像ファイルを読み込む必要があります。

imgタグの書き方

<img src="ファイルの保管場所パス/ファイル名" alt="画像の説明">と書きます。imgタグは閉じタグがない特殊なタグなので注意してください。
src=""の部分に画像の保管場所のパス(URL)とファイル名を記述
alt=""には画像がうまく読み込めない時に代わりに表示されるテキストを記述
関連記事

【初心者向け】絶対パスと相対パスの違いをイラストを使って解説!

<img src="images/dog.png" alt="犬">
 dog

箇条書き(リスト)を表示するul / ol / liタグ

箇条書きを表示したい場合はulタグ、olタグ、liタグを使用します。先ほどまでのタグと違い複数のタグがでてきましたね。その分書き方も少し特殊です。

ul / ol / liタグの書き方

  1. リストの各項目を<li>項目</li>で囲む
  2. そのリストの順番に意味があれば<ol></ol>、順番に意味がなければで<ul></ul>でリスト全体を囲む
<ul>
  <li>山で散歩</li>
  <li>川で釣り</li>
  <li>海でBBQ</li>
</ul>

<ol>
  <li>これは1番目</li>
  <li>これは2番目</li>
  <li>これは3番目</li>
</ol>

 

  • 山で散歩
  • 川で釣り
  • 海でBBQ
  1. これは1番目
  2. これは2番目
  3. これは3番目

例のようにリストの項目の順番が意味を持っている場合はolタグでli要素を囲みます。順番が関係なければulタグで囲めばOKです。

表を作成するtable / tr / th / tdタグ

表を作成するためのタグもhtmlには用意されています。先ほどのリスト用のタグと同様で複数のタグを使用して作成します。

table / tr / th / tdタグの書き方

  1. 表の中の見出しとなる部分を<th>見出しセル</th>とし、その項目を<td>データセル</td>
  2. 一行を<tr></tr>で囲む
  3. 全体を<table></table>で囲む
<table>
  <tr>
    <th>血液型</th><td>A型</td><td>O型</td>
  </tr>
  <tr>
    <th>性格</th><td>几帳面</td><td>おおらか</td>
  </tr>
</table>

 

血液型 A型 O型
性格 几帳面 おおらか

htmlを勉強する流れ

ここまでで「htmlとは一体なんなのか?」というものがざっくりとでもわかってもらえたらOKです。本記事の内容を理解した時点では習得度はだいたい5%〜10%といったところですのでまだまだ先はあるといえます。ということでこれからどのように学んでいくのかを解説していきます。

webサイトを一人で作れるようになるための3ステップ

1

htmlの基礎と各タグの使い方を覚える

まずは焦らずhtmlに慣れるところからはじめましょう。ネットのサービスや記事でhtmlの記述のルールとwebサイトの表示される仕組みを理解し、色々なタグに触れてみます。

2

デザインするためのcssを覚える

見た目を調整するために必要なcssを覚えましょう。最新版のcss3の記述ルールと基本的なプロパティ(htmlでいうタグ)に慣れましょう。

3

webページをつくってみる

htmlとcssに慣れてきたら参考書を書いましょう。なぜ最初から参考書を買わないかというと参考書は内容が細かすぎて挫折する可能性が高いからです。

ある程度htmlとcssに慣れた段階の方が知識の吸収がグッと楽になります。

webサイトの作り方が1から乗っている本のwebサイトを参考書をみずにつくれるようにしましょう。

htmlとcssの入門をするなら

htmlとcssを初めて勉強する方はぜひ以下のページを活用してね。weblikerでは現役webデザイナーが初心者の目線に立ってわかりやす〜くhtmlとcssの基本〜応用までを解説しているんだ。今後質問ボックスなども用意する予定だからチェックしてみてね!

記事のポイントまとめ

本記事で学んだhtmlを学ぶ上でのポイントをまとめましょう。

  • htmlはwebページをつくるためのマークアップ言語(≠プログラミング言語)
  • ブラウザがコードを変換することでヒトがwebページを閲覧できる
  • xhtmlやhtml4.01はバージョンが違う。html5を勉強すればOK
  • htmlは文章に意味付けをする言語なので、cssを使わないと見た目を調整できない
  • htmlファイルを作るにはファイルの拡張子を「.html」にする
  • 書き方の基本は「<開始タグ>〇〇</終了タグ>
  • 学習のポイントはまずhtmlに抵抗をなくすこと!

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • 【初心者向け】HTMLでリスト作成|ul・ol ・liタグの使い方

  • 【初心者向け】絶対パスと相対パスの違いをイラストを使って解説!

  • 【初心者向け】0からformがわかる|HTMLでのフォーム作成

  • 【なんとなくで書いてない?】Copyright(コピーライト)の正しい書き方

  • webサイトのフォルダ構造(ディレクトリ)やファイルはどうなっている?

  • <input>の使い方とtype属性の一覧をサンプル付きで紹介

  • 【完全入門ガイド】cssの書き方をイラストを使って解説

  • iframeタグを使ってwebページにコンテンツを埋め込もう

記事をもっと見る +

目次を開く