更新日: 2017年03月23日
公開日: 2015年12月03日

HTMLとは？基礎から解説！ゼロから始めるHTML/CSS講座Vol01

HTMLの基礎
ハイパーテキスト
要素とタグ
属性

HTMLの基礎

HTMLとはHyperText Markup Languageの略で、Webページを作成するためのマークアップ言語の1つです。

マークアップ(Markup)とは、「文書の各部分がどのような役割を持っているのかを示す」ことを指します。

例えば上記の文章を人が読んだ場合、「桃太郎」が見出しで「むかしむかし～」と「おばあさんが～」の文章が段落と分かると思いますが、コンピュータはこのままでは判別できません。見出し・段落・箇条書き・強調など、文書の中で各部分が果たしている役割をコンピュータに分かるよう目印をつけるのがマークアップの役割です。

ハイパーテキスト

ハイパーテキスト(HyperText)は、ハイパーリンクを埋め込むことができる高機能なテキストを指します。Webページでよくみかけるクリックすると別ページへ移動するリンクがハイパーリンクの一種です。

ハイパーリンク例) http://codecamp.jp/

ハイパーリンクは他の文章などの位置情報(場所)を示しており、複数の文書を結びつける役割を持ちます。Webページに限らず、WordやExcel、PDFなど、様々なものでハイパーリンクは利用されています。

HTMLではハイパーリンクに位置情報としてURLを指定しており、Webページ上でユーザがハイパーリンクをクリックすることで、指定されているURLへ移動します。

Languageは、マークアップをどのようなルールで行うのかを定義したもの、つまり文法というような意味になります。

HTML(HyperText Markup Language)についてまとめると、

HyperText
ハイパーリンクを埋め込むことができる高機能なテキスト

Markup
文書の各部分がどのような役割を持っているのかを示す

Language
マークアップのルールを定義(文法)

であり、HTMLは「文章の構造を定義」する高機能なテキストファイルです。

注意事項として、あくまでHTMLは見出し、段落など文章の構造を定義するものであり、文字の色や大きさ、レイアウトなど、Webページの見た目を整える役割はありません。文章の見た目は後ほど説明するCSSを利用し指定します。

要素とタグ

HTMLでは見出し・段落など文書の構造を要素(element)と呼び、文章の構造を定義するための記号としてHTMLタグが使用されます。

要素とHTMLタグの基本構成は以下となります。

タグは「<」記号と「>」記号を用いて構成されるもので、開始タグと終了タグの2種類があり、文書内の各部分がどのような意味なのか表現するのに使います。

上記の例で言うと、

要素とは、開始タグと終了タグを用いて構成される全体を指します。

上記の例で言うと、開始タグから終了タグまでの間にある桃太郎という内容も含めて全部が「要素」です。要素が見出しや段落などページの中での役割を決めます。
※終了タグが存在しない要素もあります。
例) <img alt="" />

HTMLは、要素の組み合わせで構成されており、要素は全部で108種類あります。
※2013年8月時点

桃太郎のあらすじ冒頭をHTMLで表すと次のようになります。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>昔話</title>
</head>
<body>
<h1>桃太郎</h1>
<p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。</p>
</body>
</html>

ファイルが作成できたらオンラインエディタ右側に表示される結果を閲覧してみましょう。

見出しと段落がブラウザで表示されました。
※文章の改行位置はブラウザの横幅によって異なります。

実際にブラウザで閲覧した際に表示されるのは桃太郎の文章だけとなります。しかし裏側ではHTMLタグをコンピュータが解釈し、文書の構造を把握しています。

これにより、多種多様な機器で環境に左右されることなく、文章の内容をユーザーに正しく伝えることができます。例えば音声でWebページを読み上げる機能があった際に見出し(h1要素)だけ特定の音を鳴らして伝えるなど、区別することが可能です。

どんな環境でも正確な情報を提供できるよう、適切なマークアップを心掛けましょう。

属性

属性とは、要素の中に付加的な情報を埋め込む役割を持ちます。

例えばハイパーリンクを表すa要素の場合、href属性でリンク先のアドレス情報を付与することができます。属性の値は「”」(ダブルクォート)で囲った中に記載します。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>昔話</title>
</head>
<body>
<h1>桃太郎</h1>
<p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。</p>
<a href="http://codecamp.jp/">CodeCamp</a>
</body>
</html>

別なWebページへのリンクが表示され、クリックするとhref属性の属性値に指定したURLへ移動します。

属性の利用には次のようなルールがあります。