スポンサーリンク

[`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>

HTML5およびHTML5.1で記述していることを宣言。

1行目に記述すること。

<html lang=”ja”>

ルート要素と呼ばれ、lang 属性で、コンテンツの内容が日本語であることを明示。

lang 属性は、音声読み上げブラウザや翻訳ツールなどのプログラムが、どの言語かを判別するのに、役立つ。

<head>

各種設定を記述。

ブラウザに表示されない。

<meta charset=”UTF-8″>

文字コードの種類が、UTF-8であることを明示。

title 要素の日本語より前に、記述するようにする。

<title>

ページのタイトルを指定。

<title> 要素に記述された内容が表示される箇所

  • ブラウザのタブ、タイトルバー
  • ブックマークした時のタイトル
  • 検索エンジンでの検索結果

<link rel=”stylesheet”>

CSS を読み込む設定。

<body>

ブラウザに表示するコンテンツを記述。

 
 基本テンプレート
</pre>
<h1>HTML文書の基本構造</h1>
<h2>マークアップとは?</h2>


		


<h2>HTML文書の基本構造</h2>


		


<h3>文書型宣言(DOCTYPE宣言)</h3>
<h3>html要素</h3>
<h4>head要素</h4>
<h4>body要素</h4>
<h2>HTML5の基本ソースコード</h2>
<pre>

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

スポンサーリンク

コメントを残す