【HTML5・CSS3】HTMLを徹底解説!

HTML5・CSS3

HTMLとは

HTMLとは、Webページを作成する為に開発されたマークアップ言語です。現在あなたが閲覧している「ピカわか!」のサイトを含め、インターネット上で公開される多くのサイトがHTMLによって作成されています。Webサイトの基礎となる言語なので、HTMLの本質をしっかりと理解していきましょう。

HTML(エイチティーエムエル)

HTMLは、「エイチティーエムエル」と読み、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。HyperText Markup Languageは、次の見出しで詳細に解説します。

ほとんどのWebプログラミング初心者がまず最初に学ぶのがHTMLになります。では、HTMLは具体的にどこで使用されているのでしょうか?

HTMLが使用されている具体例

HTMLが使用されている具体例として、amazon、googleや現在あなたが閲覧している「ピカわか!」を含めインターネット上で公開されているほとんどのWebサイトにHTMLは使用されてます。

下記は「ピカわか!」のTOPページですが、[右クリック→ソースコードを表示]を選択すると、閲覧しているサイトのコードを見ることが出来ます。これをソースコードと言います。

ピカわか!のサイトとソースコード

左側の「ピカわか!」サイトの様に表示したい文字などをコンピュータへ理解してもらうために、右側のソースコードが必要となります。

HTMLは、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)の1番の役割は、コンピュータが理解出来る文書を定義する事です。

Webページは、コンピュータがまずHTMLを読み込んで処理して、その後人間が読むことが出来るWebページを表示する流れだからです。

そして、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)は、「画像のデータや別ページへのリンク(ハイパーリンク)を埋め込む事が出来るHyperTextをコンピュータが認識出来る様に目印をつける」という意味です。

文書に目印をつけるのがHTMLタグと呼ばれるものです。

HTMLタグ

Markup(マークアップ) = HTMLタグなので、1つ1つのHTMLタグは、もちろん文書構造に意味をつけてくれる役割があります。

具体的なマークアップ方法は、下記の様に<>の記号の中にタグ名を入れてマークアップを開始し、</>の/(スラッシュ)の後にタグ名を入れてマークアップを終了します。
HTMLタグと要素の説明

また、タグ開始〜終了までを要素と呼びます。

代表的なHMTLタグ

HTMLタグは種類が沢山ありますが、ここでは代表的なHTMLタグを紹介していきます。

代表的なHTMLタグ 役割
<html><html/> その文書がHTML文書であることを示してくれるタグです。
<head><head/> HTML文書の情報を記述する場所です。
具体的には、linkタグを使用して外部化したファイルのCSSや
JavaScriptを読み込んだり、metaタグを使用して検索エンジンに
サイト情報を伝えることが出来ます。
titleタグ以外はブラウザに表示されません。
<html><html/> その文書がHTML文書であることを示してくれるタグです。

ブラウザの表示

基本的なマークアップは、下記の様な形になります。
マークアップの説明

HTMLの注意点

HTMLは、下記の様にタグの中にstyle属性で色をつけたり、文字を大きくすることが可能です。

html
1
<p style="color:red;">このテキストの文字が赤くなります。</p>

しかし、HTMLの役割はあくまでもコンピュータが理解出来る文書を定義する事です。

HTMLに役割がある様にCSS,JavaScriptにも役割があります。先ほどの文書などにスタイルをつけるならCSSがその役割を果たし、サイトに何か動きをつけるならJavaScriptがその役割を果たします。ここでは、HTMLには、スタイルを直接つけないでCSSで書くことを覚えておきましょう。

まとめ

HTMLとは、Webページを作成する時、コンピューターが文書構造を認識出来る様にHTMLタグを使って文書に意味をつけてくれるマークアップ言語のことです。