【HTML５・CSS３】 HTMLを初心者に向けて図解形式で解説！
HTMLとは、Webページを作成する為に開発されたマークアップ言語です。
現在あなたが閲覧している「ピカわか！」のサイトを含め、インターネット上で公開される多くのサイトがHTMLによって作成されています。
Webサイトの基礎となる言語なので、HTMLの本質をしっかりと理解していきましょう。
HTMLの基礎情報
この章では、HTMLの基礎情報について解説します。
HTML（エイチティーエムエル）
HTMLは、「エイチティーエムエル」と読み、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。HyperText Markup Languageは、次の見出しで詳細に解説します。
ほとんどのWebプログラミング初心者がまず最初に学ぶのがHTMLになります。では、HTMLは具体的にどこで使用されているのでしょうか？
HTMLが使用されている具体例
HTMLが使用されている具体例として、amazon、googleや現在あなたが閲覧している「ピカわか！」を含めインターネット上で公開されているほとんどのWebサイトにHTMLは使用されてます。
下記は「ピカわか！」のTOPページですが、[右クリック→ソースコードを表示]を選択すると、閲覧しているサイトのコードを見ることが出来ます。これをソースコードと言います。
左側の「ピカわか！」サイトの様に表示したい文字などをコンピュータへ理解してもらうために、右側のソースコードが必要となります。
HTMLは、Webサイト以外でメールやアプリなどにも使用されています。
Webページとは、現在あなたが閲覧している「【HTML・CSS】HTMLを徹底解説！」のページの様に、1ページに必要な情報がまとめてインターネット上に公開されている文書のことです。そして、「ピカわか！」のサイトの様に複数のWebページがまとめられたものをWebサイトと言います。
HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）
HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)とは一体どういう意味なのでしょうか。MarkupとHyperTextに分けると下記の様な意味になります。
- HyperText(ハイパーテキスト)･･･テキストを超えた文書
- Markup(マークアップ)･･･目印をつける
MarkupとHyperTextを学ぶことによって、HTMLを深く理解することが出来るので詳しく解説していきます。
HyperText（ハイパーテキスト）
Hypertextとは、「テキストを超えた文書」という意味でしたが、実際は「ハイパーリンク」を挿入する事が出来るテキストのことを指します。
ハイパーリンクは、クリックすると別のページに移動するリンクのことです。他にも音声、画像、動画などのデータをリンクとしてテキスト内に埋め込む事が出来ます
つまり、ハイパーリンク機能を持つHypertextは、関連するWebページ同士を閲覧出来る様に結びつけ、情報を整理してくれる役割があります。
Markup（マークアップ）
Markupとは、「目印をつける」という意味でした。この目印をつけるとは、文書中の構造をコンピュータが認識出来る様に、タイトルや段落などの各要素に目印をつけることです。
人は文書を読めば「ここがタイトルだな」とか「ここから段落だな」とタイトルや段落を認識して判断する事が出来ますが、コンピュータは判断することが出来ません。
タイトル、画像、段落の目印をそれぞれにつける事で、やっと文書の構造を理解することが出来るのです。この様に、文書構造を認識出来る様に各要素に目印をつけることをマークアップと言い、HTMLはマークアップ言語になります。
HyperText Markup Languageまとめ
HTML(HyperText Markup Language)の１番の役割は、コンピュータが理解出来る文書を定義する事です。
Webページは、コンピュータがまずHTMLを読み込んで処理して、その後人間が読むことが出来るWebページを表示する流れだからです。
そして、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）は、「画像のデータや別ページへのリンク(ハイパーリンク)を埋め込む事が出来るHyperTextをコンピュータが認識出来る様に目印をつける」という意味です。
文書に目印をつけるのがHTMLタグと呼ばれるものです。
HTMLタグ
Markup(マークアップ) = HTMLタグなので、１つ１つのHTMLタグは、もちろん文書構造に意味をつけてくれる役割があります。
具体的なマークアップ方法は、下記の様に<>の記号の中にタグ名を入れてマークアップを開始し、</>の/(スラッシュ)の後にタグ名を入れてマークアップを終了します。
また、タグ開始〜終了までを要素と呼びます。
代表的なHTMLタグ
HTMLタグは種類が沢山ありますが、ここでは代表的なHTMLタグを紹介していきます。
| 代表的なHTMLタグ | 役割 |
|---|---|
| <html><html/> | その文書がHTML文書であることを示してくれるタグです。 |
| <head><head/> | HTML文書の情報を記述する場所です。具体的には、linkタグを使用して外部化したファイルのCSSやJavaScriptを読み込んだり、metaタグを使用して検索エンジンにサイト情報を伝えることが出来ます。titleタグ以外はブラウザに表示されません。 |
| <html><html/> | その文書がHTML文書であることを示してくれるタグです。 |
ブラウザの表示
基本的なマークアップは、下記の様な形になります。
!DOCTYPE htmlは、その文書がHTML5であることを示します。
また、上記のタグ以外にもHTML5からmainタグやsectionタグなど文書構造をより細かく定義することが出来るタグも増えました。それらのタグの解説等は別記事でさせて頂きます。
HTMLの注意点
HTMLは、下記の様にタグの中にstyle属性で色をつけたり、文字を大きくすることが可能です。
1
<p style="color:red;">このテキストの文字が赤くなります。</p>
しかし、HTMLの役割はあくまでもコンピュータが理解出来る文書を定義する事です。
HTMLに役割がある様にCSS,JavaScriptにも役割があります。先ほどの文書などにスタイルをつけるならCSSがその役割を果たし、サイトに何か動きをつけるならJavaScriptがその役割を果たします。
ここではHTMLには、スタイルを直接つけないでCSSで書くことを覚えておきましょう。
▼ 初心者の方におすすめの１冊！HTMLやCSSを全く触れたことがない方でも手を動かしながらWebサイト制作が学べます。
実際に手を動かして作りながらサイト制作のきほんが学べる!
この記事のまとめ
- HTMLとは、Webページを作成する時、コンピューターが文書構造を認識出来る様にHTMLタグを使って文書に意味をつけてくれるマークアップ言語のこと
- インターネット上で公開される多くのサイトがHTMLによって作成されている
- １番の役割は、コンピュータが理解出来る文書を定義すること
