[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

Word などで作成する文書は、GUIを用いて視覚的に文書内の情報を表現する。

インターネットは、様々なOS環境が混在し、プレーンテキストである方が都合がよい。

このプレーンテキストをHTMLで意味づけし、ホームページの情報を人間やコンピュータに解り易くさせる。

マークアップとは?

ただのテキスト文書では、ブラウザは、そのテキストのそれぞれが、どういう意味なのか、どうやって表示すべきなのか、判断できない。

そこで、Webページとして意味を持った表示をさせるために、どこが見出しで、どこが段落なのかといった文書の構造を、HTMLでマークアップし、意味づけすることで、ブラウザにも理解できる形にさせる。

HTML文書の構造

HTML文書の基本構造

HTML文書は、文書型宣言(DOCTYPE宣言)とhtmlの2つのブロックで成り立っている。

HTML文書全体は、ツリー状の構造になっている。




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 要素を最上位ルートとする入れ子の関係で成り立っている。

要素の入れ子関係

 

(Visited 258 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください