HTMLドキュメント

2章 HTMLドキュメント

HTMLドキュメントの基本的な書き方を学習します。

2.1 HTMLドキュメントの基本構造

下に記述したHTMLコードは、HTMLドキュメントの基本構造にしたがって1章で扱ったコードを編集したものです。

1章で扱ったコードに、複数のタグを追加しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTMLドキュメントのテンプレート</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <h2>Let's start HTML and CSS!</h2>
    <ul>
      <li>bullet point1</li>
      <li>bullet point2</li>
      <li>bullet point3</li>
    </ul>
  </body>
</html>

追加タグとその役割は、表の通りです。

HTMLタグ 役割
<!DOCTYPE html> 使用するHTMLのバージョンの宣言
<html> HTMLドキュメントの始まりと終わりの宣言
<head> HTMLドキュメントに関する情報を要素とする
<meta> HTMLドキュメントに関する情報
<title> HTMLドキュメントのタイトル
<body> ブラウザに表示されるコンテンツ部分を要素とする

1章で扱ったコードは、ブラウザに表示される部分だけを記述したものでした。すなわち、<body>タグで囲まれた部分、body要素だけを抽出したコードだったわけです。

しかし実際には、上表の6種類のHTMLタグを基本として、より詳細な情報まで記述されたHTMLドキュメントという構造で、WebページやWebサイトのHTMLコードを書いていきます。

HTMLドキュメントの最も基本的な構造は、以下の通りです。

<!DOCTYPE html>
<html>
  <head>
    HTMLドキュメントに関する情報を記述する場所
    (meta要素、title要素などを記述する場所)
  </head>
  <body>
    ブラウザに表示されるコンテンツを記述する場所
    (1章のコードを記述する場所)
  </body>
</html>

それでは、表で並べた6種類のHTMLタグについて学習していきましょう。

DOCTYPE宣言

DOCTYPE宣言とは、上のコードの1行目に書かれた下のタグのことです。

<!DOCTYPE html>

このタグの役割は、「本HTMLドキュメントはHTML5の仕様に基づいて作られている」とブラウザに教えるためです。

このタグのおかげで、ブラウザがHTMLドキュメンのコードを異なった仕様やバージョンとしてレンダリングするトラブルを回避できます。

例えば、ドイツ語の文章を日本語訳する時に、英語の文章として日本語訳をしようとしたら、翻訳できませんよね。仕様やバージョンを明記しておくことは、とても重要なんです。

参考として、下表にいくつかのHTMLの仕様やバージョンのDOCTYPE宣言を載せておきます。

規格 DOCTYPE宣言
HTML5 <!DOCTYPE html>
HTML4.01(Strict) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01(Transitional) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
HTML4.01(Frame set) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">
XHTML1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

この表以外の仕様・バージョンも存在しますが、ひとまずは現在(2019年11月15日時点)最新のHTML5について身につければ十分です。この表を暗記する必要など一切ありませんので、ご安心ください。

本教材も、HTML5に準拠して、HTMLの学習とHTMLドキュメントの作成を進めていきます。

html要素

html要素は、<html></html>で囲まれた要素です。上の基本的な構造では、以下がhtml要素になります。

  <head>
    HTMLドキュメントに関する情報を記述する場所
  </head>
  <body>
    ブラウザに表示されるコンテンツを記述する場所
    (1章のコードを記述する場所)
  </body>

このhtml要素こそが、HTMLドキュメントです。

複数の要素が入れ子構造になる中の、大元となる要素なのでルート要素とも呼ばれます。 HTMLドキュメントの要素は、すべてこのhtml要素の中に記述されます。

また一般的に、HTMLドキュメントの要素が、どんな言語(日本語や英語など)で書かれているかという情報を、html要素に記述します。その場合は以下のように記述をします。

<html lang="ja">

先ほどの<html>の中に、lang="ja"が追加されていますね。追加されたlang="ja"の部分を属性といいます。

属性はHTMLタグの役割にオプションを与える働きをします。属性はほとんどのHTMLタグに存在し、1つのHTMLタグに対して、複数の属性が存在し得ます。

属性は、次のような記法で記述します。

<要素名 属性名="属性値">

上のhtml要素の場合、html要素名lang属性名ja属性値です。

属性名langは「html要素で使用する人間の言語(language)」を意味し、属性値jaは「日本語(japanese)」を意味しています。この「属性」によって、このhtml要素は日本語で書かれているとブラウザに教えることができるのです。

head要素

<head></head>で囲まれた部分がhead要素です。HTMLドキュメントのタイトル、文字コードの指定、HTMLドキュメントに関する情報などを記述します。

また、デザイン性の高いWebページを作ろうとした場合、CSSやJavascriptといった他のプログラミング言語を用いてHTMLコードを装飾していくことが必要です。これらのプログラミング言語のファイルやデータの読み込みもhead要素に記述します。

head要素に記述された要素は、title要素を除いて、直接Webページには表示されません。

とてもシンプルなものですが、head要素の具体例を見てみましょう。

  <head>
    <meta charset="UTF-8">
    <title>HTMLドキュメントのテンプレート</title>
  </head>

title要素は、HTMLドキュメントのタイトルを表します。上記のコードのtitle要素の中の「HTMLドキュメントのテンプレート」は、そのままWebブラウザのタブに表示されます。

title要素の上にあるmeta要素には、HTMLドキュメントのメタデータを記述します。「メタデータ」というのは、本体となるデータについて付帯的な情報を持つデータです。

例えば、名前、住所、電話番号といった個人情報の記述されたテキストファイルがあるとします。本体となるデータは、このテキストファイルに書かれている名前、住所、電話番号です。一方、データについての付帯的な情報というのは、そのテキストファイルの作成者、編集者、作成日、変更日、データサイズ、保存場所などの情報です。  

これらの情報がメタデータです。

HTMLドキュメントは、HTMLドキュメント自体が本体のデータで、文字コードの指定などがメタデータです。

    <meta charset="UTF-8">

上のmeta要素は、文字コードをUTF-8に指定するメタデータです。

meta要素は、閉じタグ\を持ちません。そしてメタデータは属性で記述します。 すなわち、文字コードを指定するための属性名がcharset、文字コードをUTF-8に指定するための属性値がUTF-8です。

body要素

body要素には、Webページのコンテンツ部分を記述します。すなわち、body要素内に記述されたHTMLコードの要素は、ブラウザ上に表示されます。

一番上のHTMLコードの例では、下記の部分がWebページとしてブラウザに表示されます。

  <h1>Hello World!</h1>
  <h2>Let's start HTML and CSS!</h2>
  <ul>
    <li>bullet point1</li>
    <li>bullet point2</li>
    <li>bullet point3</li>
  </ul>

2.2 HTMLドキュメントを作ろう

それでは実際にHTMLドキュメントを作っていきましょう!

AWS Cloud9を起動して、まずは下のHTMLドキュメントのひな形を書きましょう。書いたらindex.htmlという名前で、保存しましょう。(1章で作成したindex.htmlというファイルはこれから使わないので、削除するか上書きして構いません)

html制作画像1

ブラウザでWebページとして表示して、下の画像のように表示されていればOKです!

html制作画像2


まとめ

2章ではHTMLドキュメントの基本的な書き方を学習しました。

次章から、HTMLドキュメントを作っていきつつ、さらにHTMLを学習していきます。

もし学習に行き詰まってしまったら...無料体験レッスンに
参加してみませんか?

SAMURAI ENGINEERは、
月額7000円からマンツーマン
レッスンができます。

現役エンジニアがあなたのプログラミング学習を徹底サポート。
未経験でも挫折せず、最短で目標達成するために必要な
手厚いサポート体制が揃っています。
少しでも興味をお持ちでしたら、
無料体験レッスンへお越しください。