Word などで作成する文書は、GUIを用いて視覚的に文書内の情報を表現する。
インターネットは、様々なOS環境が混在し、プレーンテキストである方が都合がよい。
このプレーンテキストをHTMLで意味づけし、ホームページの情報を人間やコンピュータに解り易くさせる。
マークアップとは?
ただのテキスト文書では、ブラウザは、そのテキストのそれぞれが、どういう意味なのか、どうやって表示すべきなのか、判断できない。
そこで、Webページとして意味を持った表示をさせるために、どこが見出しで、どこが段落なのかといった文書の構造を、HTMLでマークアップし、意味づけすることで、ブラウザにも理解できる形にさせる。
HTML文書の構造
HTML文書は、文書型宣言(DOCTYPE宣言)とhtmlの2つのブロックで成り立っている。
HTML文書全体は、ツリー状の構造になっている。
文書型宣言(DOCTYPE宣言)
HTML文書のバージョンと文書型を示すブロック。
どのバージョンのHTML言語(ドキュメントタイプ)で作成されているのかを明示する。
html要素
HTML文書の最上位ルート要素。
head要素とbody要素がある。
head要素
文書タイトル、文字コード、キーワード、説明文、関連ファイルなどのHTML文書のメタ情報を記述する部分。
ヘッダ情報のほとんどは、ブラウザ上に表示されないが、検索エンジンやブラウザに、どのような情報が書かれているかを知らせるために必要である。
head 内に記述するキーワードは、スパムと判定されないために、2~6個が適切とされている。
body要素
コンテンツを記述する部分。
この部分に書かれた内容が、ブラウザ上に表示される。
HTML5の基本ソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="description" content=""> <title>基本テンプレート</title> <link rel="stylesheet" href="style/style.css" data-mce-href="style/style.css"> </head> <body> </body> </html>
<!DOCTYPE html>
HTML5およびHTML5.1で記述していることを宣言。
1行目に記述すること。
<html lang=”ja”>
ルート要素と呼ばれ、lang 属性で、コンテンツの内容が日本語であることを明示。
lang 属性は、音声読み上げブラウザや翻訳ツールなどのプログラムが、どの言語かを判別するのに、役立つ。
<head>
各種設定を記述。
ブラウザに表示されない。
<meta charset=”UTF-8″>
文字コードの種類が、UTF-8であることを明示。
title 要素の日本語より前に、記述するようにする。
<title>
ページのタイトルを指定。
<title> 要素に記述された内容が表示される箇所
- ブラウザのタブ、タイトルバー
- ブックマークした時のタイトル
- 検索エンジンでの検索結果
<link rel=”stylesheet”>
CSS を読み込む設定。
<body>
ブラウザに表示するコンテンツを記述。
要素の入れ子
HTML文書は、html 要素を最上位ルートとする入れ子の関係で成り立っている。