HTMLとは？HTMLの意味や絶対に知っておくべき基礎知識を大公開
- コーディング
HTML(エイチティーエムエル)はHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の頭文字をとったもので、簡単に表すと「Webページを作成するときに使われるコンピューター言語」と言えます。
主に、文章の見出しを指定したりリンクをつけたりすることによってページの構造を指定することができるので、Webサイトを作るときに必須の言語です。
Webサイトの他に「アプリ」にも使われる技術なので、プログラミングを勉強しようとしている人もHTMLを使うことがあります。
しかし、初心者にとってはHTMLの意味がそもそも理解できないので、難しく感じてしまうかもしれません。
そこで、今回の記事ではHTMLが一体どういったものなのか、初心者でもわかるように解説していくので参考にしてください。
目次
1.HTMLとは
HTMLはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の頭文字をとったものです。
テキストにハイパー(テキスト以上)の意味を持たせてマークアップ(目印)をする言語なので、HTMLと呼ばれています。
テキストに目印をつけることで、それが見出しだとコンピューターに伝えたり、リンクだと伝えたりすることができます。
ただ、これだけだと「ハイパーテキスト」や「マークアップ」といった専門用語が多く、初心者の方はわかりにくいかもしれません。
そのため、まず初めにHTMLを理解しやすくするために、「ハイパーテキスト」や「マークアップ」がどういったものなんか解説していきます。
1-1.Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)のこと
先ほどもお話した通り、HTMLはHyper Text Markup Languageのことです。
そもそもはスイスで研究や論文を共有するために開発されたもので、その後進化してWebページを作成する言語として広まりました。
今あなたが見ているこのページもHTMLで作成されています。
そして、HTMLは、文章をタグで囲って意味付けをすることから、マークアップ言語と呼ばれています。
コンピューターはただ文章を書いただけではそれが文章と認識することができず、Webページを作ることが出来ません。
HTMLを使うことで「この文章は見出し」「ここにリンクを貼っている」といったことをコンピューターに示すことが出来るのです。
したがって、HTMLは人に何かを伝えるものではなく、コンピューターに情報を伝えるための言語ということがわかります。
1-2.ハイパーテキストとは
ハイパーテキストは、文章に文章以上の意味(リンクなど)を持たせられることからハイパーなテキストだと言われています。
例えば、紙の文書はただ文章が書いているだけですが、ハイパーテキストは指定の場所にリンクを貼って、他の文章に移動することが出来ます。
このように文書同士を関連づけることができるものを「ハイパーリンク」といって、その機能を持っている文書を「ハイパーテキスト」と言います。
1-3.マークアップとは
マークアップとはタグで文章を囲うことで「目印をつけて」その文章に意味を持たせることです。
タグで印づけをすることでその文章にどういう意味があるのか、コンピューターに伝えることが出来ます。
人間なら文字の大きさを見るだけで「ここが見出しだな」「これが本文だな」と理解することが出来ます。
しかし、コンピューターは文章がただ書かかれているだけでは、理解することが出来ないのです。
そのため、タグを使いマークアップをして、コンピューターに意味を伝えることが必要です。
※タグについてはこの後に解説するタグで囲われているをタップしてください。
2.HTMLが使われている主なもの
HTMLが使われているものは大きく分けて3つあります。
その中でも、もっとも身近なのがWebサイトでしょう。
他にもアプリやメールにも使われているので、インターネットを使っているほとんどの人が触れるものに使われていると言えます。
2-1.Webサイト
WebサイトはHTMLを使うことで作られています。
それを確認するために、HTMLが書かれている画面(ソースコード)を見てみましょう。
ソースコードはWebサイトの裏で書かれている文章を見ることができるものです。
今あなたが見ている画面でWindowsのパソコンを使っている人は「CtrlとU」Macの人は「⌘とOptionとU」を同時に押してみましょう。
出てきた画面はソースコードと呼ばれるもので、書かれている(記述)HTMLを見ることが出来ます。
このように、WebサイトはHTMLを記述することで、Web上で表示されるようになっているのです。
2-2.メール
メールでもHTMLが使われています。
その中で、通常のテキストだけのメールではなく、文字に装飾がされていたり画像が貼ってあったりするメールを「HTMLメール」と呼びます。
メルマガや登録したサイトからのお知らせなどで見ることが多いでしょう。
このメールはHTMLを使って作成されていて、通常のメールよりも自由に構成(レイアウト)出来るのでHTMLが使われています。
2-3.アプリ
実はHTMLを活用することでアプリを作ることができます。
基本的にはHTMLと別のプログラミング言語(JavaScriptやPHPなど)が使われていますが、ネット上でもHTMLやCSS、javascriptを使ってモバイルアプリを開発することのできるサービスもあります。
3.HTMLの具体的な例
ここからは、HTMLの具体的な例をご紹介していきます。
ご紹介する例以外にもHTMLで出来ること(意味付けできること)はありますが、まずは代表的な例を見ていきましょう。
3-1.リンクをつけられる
HTMLでは外部のサイトや別のページへ移動するリンクをつけることが出来ます。
その際、リンクを貼りたい部分に<a>というタグが使われます。https://codepen.io/s-Osawa/embed/MMPyEN?height=265&theme-id=0&default-tab=html%2Cresult&user=s-Osawa&slug-hash=MMPyEN&pen-title=ANA&name=cp_embed_1
HTMLはハイパーテキストなので、タグで目印をつけることでリンクを貼っているとコンピューターに伝えることが出来ます。
3-2.見出しを作れる
文章の見出しを作っているのもHTMLです。
見出しを作るときは<h1>～<h6>までの数字のタグが使われます。https://codepen.io/s-Osawa/embed/xoywVX?height=265&theme-id=0&default-tab=html%2Cresult&user=s-Osawa&slug-hash=xoywVX&pen-title=xoywVX&name=cp_embed_2
見出しのタグを使うことでその文章が見出しであるとコンピューターに伝わるのです。
逆を言えば、見出しのタグがなければコンピューターは何もわからず、通常の文章として表示されてしまいます。
3-3.表を作れる
HTMLでは表を作ることも出来ます。
表を作るときは<table>や<tr>といったタグが使われます。https://codepen.io/s-Osawa/embed/rEqedV?height=265&theme-id=0&default-tab=html%2Cresult&user=s-Osawa&slug-hash=rEqedV&pen-title=table&name=cp_embed_3
これらのタグを使うことで列や行ができて、表を作成することが可能なのです。
4.HTMLの記述ルール
HTMLを書くとき(記述)はいくつかルールがあります。
特に意味付けしたい場所を「タグで囲う」ことは、HTMLのもっとも重要なルールの1つです。
細かく見ていくとルールがたくさんありますが、その中でも初心者の方でもわかりやすいルールをご紹介していきます。
4-1.タグで囲われている
HTMLはタグと呼ばれる目印を使って、文章に意味を持たせます。
そのため、HTMLでは必ずタグが使われます。
- <body>
- <section>
- <div>
- <header>
- <footer>
- <h1>～<h6>
タグは開始タグと閉じタグ(または終了タグ)で構成されていて、文章を挟み込むことでその文章に意味を持たせることが出来ます。
タグによっては閉じタグがないもの(省略できる)もありますが、基本的には開始タグと閉じタグで挟み込む必要があるのです。
- <img>
- <br>
- <hr>
4-2.属性を設定できる
属性とは簡単に言うと設定のことで、タグごとに設定を割り振ることが出来ます。
例えば、文章に色をつけたいときはその文章を囲っているタグの中に、色を付ける意味を持つコードを書きます。https://codepen.io/s-Osawa/embed/JgJzJj?height=265&theme-id=0&default-tab=html%2Cresult&user=s-Osawa&slug-hash=JgJzJj&pen-title=zokusei&name=cp_embed_4
同じタグでも属性を持たせることで、違う設定をすることが出来るのです。
5.HTMLには国際基準を決めている団体がある
これまでお話してきたHTMLのルールはWHATWG(ワットワーキンググループ)という団体によって標準仕様(リビングスタンダード)が定められています。
※以前はW3Cという別の団体がHTMLのルールを決めていましたが、2019年5月28日からWHATWGに変わりました。
HTMLは書き方の自由度が高く、正しい書き方をしなくてもある程度反映してくれるようになっています。
つまり、自分のHTMLの書き方と別の人のHTMLの書き方が異なることがあるのです。
しかし、それではGoogle Chrome(ブラウザ)ではこういう表示がされていたのに、別のブラウザでは違う表示がされたりレイアウトが崩れたりすることもあります。
そうするとWebページを見るユーザーが困るだけではなく、HTMLを扱う人(開発者など)もそれぞれのブラウザに対応させるためにHTMLを書く手間が増えてしまいます。
こういったことを防ぎ、どの携帯電話、どのPCブラウザで見ても全ての人に同じ情報を提供できるようにWHATWGがHTMLのルールを決めているのです。
6.HTMLをブラウザで表示して確認する方法
最後に、HTMLがどのようにブラウザ上で表示されるのか確認する方法をご紹介します。
そのためには、まずテキストエディタと呼ばれるソフトをダウンロードしましょう。
6-1.テキストエディタをダウンロードする
テキストエディタは文字を入力してメモ帳として使ったり、簡単な文書を作成したりできるパソコンのソフトです。
テキストエディタの中でも「ATOM」や「DreamWeaver」などのHTMLエディタは、HTMLを記述する際のサポート機能(プラグインも含む)がついているので、タグを打ち込みやすくなっています。
このようにテキストエディタを使えばタグを打ち込む手間が省けるので、テキストエディタをダウンロードして使うと良いでしょう。
テキストエディタは「ATOM」や「DreamWeaver」がおすすめです。
※Windowsの「メモ帳や」Macの「テキストエディット」など標準でインストールされているテキストエディタもあります。
6-3.サンプルコードを打ち込む
次に、テキストエディタにHTMLを記述してみましょう。
下記にサンプルのHTMLを用意したので、そのHTMLをテキストエディタにコピーして貼り付けましょう。
<!doctype html>
<html>
<head></head>
<body>
<section>
<h1>見出しが入ります</h1>
<p>本文が入ります</p>
</section>
</body>
</html>
上記ではタグを見やすくするためにスペース(タブスペース)を空けて整理しています。
そして、ファイル名を「test.html」にして保存してください。
①②ファイル名を変更して保存した画像
6-3.ブラウザ上にHTMLを表示する
サンプルコードを打ち込むで保存したファイルを、Google Chromeなどのブラウザにクリックしたまま動かしましょう。(ドラッグ＆ドロップ)
そうすると、以下の画像のような文字が表示されるはずです。
このようにして、打ち込んだHTMLのタグがどんな表示がされるのか確認していけば、タグを覚えやすいでしょう。
※テキストエディタによっては特定のキー(ショートカットキー)を押すことでブラウザ上に表示できますが、使っているパソコンによってキーが異なるので今回はドラッグ&ドロップでできる方法を紹介しました。
7.まとめ
HTMLはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略称で、主にWebページを作る際に必要な言語のことでした。
コンピューターは文章が書かれているだけでは見出しやリンクを理解できず、ブラウザ上に意図した表示がされません。
そこで、HTMLを使って文章に見出しをつけたり、リンクをつけたりするのです。
ただし、HTMLは扱う人(開発者)によってある程度自由な書き方ができるので、WHATWGで標準化というルールが定められています。
そのルール通りにHTMLを記述することで、どの環境のユーザーもWebページが同じように表示され、開発者もブラウザごとに調整をするような負担が少なくなるのです。
HTMLの標準化ルールはWebの環境が日々変わる中で、常に新しく更新されています。
標準化ルールを理解することで、全ての人とブラウザに優しいコーディング(htmlを書く)が出来るようになるでしょう。
最後にデジタルハリウッドSTUDIO横浜についてご案内!!
STUDIO横浜は駅直結の好立地で学習ができます！
渋谷駅 – 横浜駅 約30分
茅ヶ崎駅 – 横浜駅 約25分
横須賀駅 – 横浜駅 約45分
武蔵小杉駅 – 横浜駅 約10分
川崎駅 – 横浜駅 約10分
乗り継ぎなし！駅直結で雨に濡れる心配なしの好立地はSTUDIO横浜だけ！
神奈川県初のデジタルハリウッド STUDIOへどうぞお越しください♪
