今さら聞けない！HTMLとは【初心者向け】
「HTML」とは何なのかを超初心者向けに解説した記事です。今さら知らないなんて言えない・・という方はお読みください。技術的な表現はなるべく使わないようにしているので、プログラミングやWebデザインの事前知識は不要です。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
この記事は、Webページの仕組みである「HTML」とは何かを説明します。
- 名前は聞いたことがあるけど、HTMLって何なんだろう
- Web制作って、いったい何を作っているんだろう
- Webページは、どういう仕組みで動いているんだろう
こんな疑問を持っている方は、ぜひこの記事を読んでみてください。
どういう仕組みでWebページができているのか理解できますよ。
本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。
目次
- HTMLとは
- Webページの裏側を見る
- Hyper Text Link（ハイパーテキストリンク）
- HTMLの種類
- HTMLファイルの作り方
- リンクを表示する
- 画像を表示する
- 段落分けを行う
- HTMLで覚えておきたいタグ一覧（リスト）
- HTMLを学習中の方へ
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
HTMLとは何かについて詳しく説明していくね！
お願いします！
【動画でも解説しています。クリックで見る！】
HTMLとは
HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略。
簡単にいうと、コンピュータが理解できる、マークアップをするための言葉です。
マークアップとは、もともと雑誌や新聞の編集用語で、文章構成の指示のことを指します。
「この文章はタイトルです」「この3つの文章が1セットで記事です」というような、注釈のようなものですね。
Web制作では、ホームページ上に表示をしたい文章や写真などの情報に対し、HTMLという言葉で、コンピュータに文章構成を指示することから始まります。
例えば、このような情報をホームページにしたいと思います。
ニュース 孫が生まれて、ついにおじいちゃんになりました。
この情報に対して、日本語で文章構成を指示してみます。
<ここから見出し>ニュース<ここまで見出し> <ここから本文>孫が生まれて、ついにおじいちゃんになりました。<ここまで本文>
これを、HTMLを使ってマークアップすると、このようになります。
<h1>ニュース</h1> <p>孫が生まれて、ついにおじいちゃんになりました。</p>
HTMLという言葉を使うと、<h1>～</h1>で囲まれているのが見出し、<p>～</p>で囲まれているのが本文、という文章構成を、コンピュータが理解できるんです。
このHTMLを表示するときは、<h1>や<p>は見えませんが、<h1>に囲まれている見出しは大きい文字に、<p>に囲まれている本文は小さめの文字になります。
ホームページを作る際、まずはHTMLを使って文章構成の指示を出すことで、ホームページに表示したい情報を形作っていくんですね。
Webページの裏側を見る
普段から私たちがブラウザで見ているWebも、裏側はHTMLでできています。
実際に見てみましょう、HTMLがどんな言葉なのか、より分かってくると思います。
たとえば、テックアカデミーのWebページも、裏側はHTMLです。
Webページを表示したら、画面を右クリックをし、「ページのソースを表示」を押してみましょう。
すると、英単語と記号が組み合わさった文章が出てきます。
これが、Webページの裏側にある、HTMLで記述された文章。
ChromeやSafariといったWebブラウザがこのHTML文章を読み、Webページをどのように表示するか判断しているのです。
HTMLのような言葉を使って、英単語や記号を組み合わせて書いた、コンピュータが読める文章を、「コード」や「ソースコード」と言います。
Webページは、どのようなWebページにするか、HTMLなどのコードを書いて指示を出して作っていきます。
どのようなWebページでも、裏側のソースコードを表示することができますので、ぜひ試してみてくださいね。
Hyper Text Link（ハイパーテキストリンク）
HTMLがハイパーテキスト・マークアップ・ランゲージの略、ではハイパーテキストって何でしょう？
ハイパーテキストとは、ハイパーな文章、つまり文章を超えた文章のことです・・・といってもよくわかりませんよね。
インターネットが生まれる前、コンピュータは、学者が論文など、文章を共有するために使われていたのです。
そんな中、この共有された多数の文章が、お互いに関連付けられてリンクすることで、情報が無数に広がる。
「文章がリンクする」ことで、文章を超えるという仕組み、Hyper Text Link（ハイパーテキストリンク）を考えだしました。
ハイパーテキストリンクでできたつながりは、蜘蛛の巣のように複雑に広がっていくので、Web（蜘蛛の巣）と呼びます。
Webを世界中につなげよう、というプロジェクトが、WWWやW3と示されている、ワールドワイドウェブ（World Wide Web）です。
今でもURLの先頭にhtpps://www.xxxxx.com のように、wwwをつけていることもありますよね。
HTMLは、ハイパーテキストリンクを実現するための、文章同士のリンクをマークアップすることができる言葉として生まれ、ワールドワイドウェブとともに育ちました。
いまや世界中がWebでつながり、どこにいても瞬時に様々なWebページを見ることができます。
Webの根源となっている考え方がハイパーテキストリンクで、Webを実現する言葉がHTMLなのです。
ハイパーテキストリンクの例【矢印の部分をクリックすると別のページへ移動する】
HTMLのコード【上記ページの裏側（ユーザーには見えない部分）の構造】
HTMLの種類
HTMLには「HTML4」「XHTML」「HTML5」など、バージョンや亜種があり、それぞれ文法や表現できることが少し違いますので注意しましょう。
現在は、HTMLのバージョン5である、「HTML5」が一番よく使われています。
ソースコード、ハイパーテキストリンク、マークアップ・・・。HTMLってこんなに難しいんですか？
HTML自体は、Web上の文書みたいなもので、書籍や雑誌と同じだよ。
なるほど！じゃあ、書籍で言えばソースコードやリンクやマークアップは何に当たるんですか？
リンクは他のページの場所。マークアップはタイトルや見出し、ページにある画像などを指定してあげる方法のことなんだ。合わせてソースコードと言います。
HTMLファイルの作り方
最後に、HTMLファイルの作り方ですが、「.html」という拡張子をつけることで、HTMLファイルであることをコンピュータが認識してくれます。（例 index.html）
以下では、HTMLのタグの中で、リンク・画像・段落分けなどよく使用するタグについて基本的な書き方を解説します。
ブラウザでの実際の表示も確認できるので、初めてHTMLに触れる方は、ぜひご覧ください。
リンクを表示する
リンクを作成した場所へページが移動しました。
リンクを作成するには<a>タグを使用します。
<a>タグの書き方
<a href="リンク先へのパス">リンクを貼るテキストや画像</a>
hrefの属性値(“”内)にリンク先の絶対パス(https://〜で始まるもの)あるいは相対パス(現在の位置を基準としたもの)を入力します。
最後に必ず終了タグ</a>を入力します。
使用例
実際に<a>タグを使用してテキストにリンクを貼ります。
今回は以下のURLを使って、「Coolors」というサイトへのリンクをつなげてみます。
https://coolors.co/
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<a href="https://techacademy.jp/">リンク</a>
</body>
</html> a href〜の部分の””内にパスを入力します。
ここではテックアカデミーへのリンク(絶対パス)を入力しています。
画面ではこのように表示されます。
「リンク」と表示されているテキストをクリックしましょう。
リンクを作成した場所にページが移動しました。
画像を表示する
画像を表示させるには<img>タグを使用します。
<img>タグの書き方
<img src="画像ファイルへのパス">
srcの属性値(“”内)に画像の絶対パスあるいは相対パスを入力します。
<img>タグには終了タグは存在しません。
使用例
実際に画面に画像を表示させます。
今回は”img_1.png”という名前の画像ファイルをHTMLと同じディレクトリ内にアップロードし、それを表示させます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<img src="img_1.png">
</body>
</html>同じディレクトリ内に画像ファイルがある場合は、ファイル名だけを入力すると相対パスとしてつなげることができます。
画面ではこのようになります。
指定した画像ファイルが表示されました。
段落分けを行う
段落を分けるには<p>タグを使用します。
<p>タグの書き方
<p>段落の内容</p>
ひとつの段落としたい部分を<p></p>で囲みます。
使用例
実際にテキストを2つに段落分けしてみます。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>それぞれの文章を<p></p>内に入れます。
画面の表示は以下のようになります。
前の段落と次の段落との間に、一行分の間が表示されます。
HTMLで覚えておきたいタグ一覧（リスト）
その他サイトの基本的な構成で使用することのあるいくつかのタグを紹介します。
| タグ | 役割 | 説明 |
| <h1>-<h6> | 見出しを作成 | 見出しの部分に使用します。このタグの中の部分は強調され、大きく表示されます。 <h1>が一番大きく表示され、<h2>→<h6>となるほどに小さな見出しになります。 |
| <ul>・<li> | 順番のないリストを作成 | 順序のないリストを作成するタグで、サイトのメニューなどを形成するのに役立ちます。 <ul>がリスト全体を、<li>が各項目を作成します。 |
| <form> | 入力フォームを作成 | サイト内に入力フォームを作成するタグです。 入力された情報の処理はPHPなど他の場所で行います。 |
もっと細かくHTMLファイルをどう作るのかを知りたい、書き方を知りたい方は、HTMLの書き方の記事も合わせてご覧ください。
ひえー！タグがたくさん出てきたんですけど。
マークアップ(目印)として使うものがタグです。
タグを使ってページのタイトルや見出し、表示する画像を指定して作成したものがHTMLファイル何ですか？
その通り！
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
