« htmlによるマークアップについて | メイン | 更新のとき注意したいこと »

マークアップの骨格を知る

それでは実際にhtmlタグを使ったマークアップをみてみましょう。

<html>
<head>ヘッド要素の内容 (例えばtitleなどはここに入れます。)</head>

<body>ボディ要素の内容</body>
</html>

ページの先頭<html>と、最後に</html>を使います。これはここからここまでがhtmlの文書ですということを意味しています。
つまりページ全体がhtml文書(html要素)ですよといっています。

そしてhtml要素にはさまれて、head(ヘッド)、body(ボディ)があり、これらの要素の登場順番は決められています。
またひとつの文書内に、1回きりの登場しか許されていませんのでご注意ください。

このようにhtml文書の骨格は、head要素body要素からできています。
あとはこれに肉付けをしていきます。

骨格にタイトル、見出し、文章(段落)を肉付け

<html>
<head>
<title>htmlタグでWeb標準なマークアップをしよう</title>
</head>
<body>
<h1>Web標準にもとづいてのマークアップをすすめる訳</h1>
<p>最近とくにデザインに多くの重点をおき、
もっとも大切にしなくてはならない「ウェブで誰しもが享受できる
情報(情報の共有)」などを置き去りに...</p>
<h2>ブラウザ戦争の背景</h2>
<p>ブラウザの開発会社が競い、独自のルールを設け...</p>
<h2>規格の統一に向けて</h2>
<p>このままでは情報の共有ができなくなることを危ぶんだ
IETF(インターネット技術特別調査委員会)が...</p>
</body>
</html>

では上記文書の構成とタグをそれぞれ説明します。

タイトル
まず文書にはタイトルがつけられると思いますが、なるべくなら、このタイトルをみただけでページ内に何が書かれているのか?が伝わるようなタイトルをつけることが好ましいです。

タイトルは、<title>タグでマークアップします。そして、
必ずhead要素内に1度だけ記述します。

見出しと段落
次に、見出しですが、見出しは1〜6まで6つの見出しにわけて指定することが出来ます。 1が一番大きい見出しとなり、数字が上がる順にひとつづつ小さな見出しとなり、最小は見出し6 <h6>です。

文書の一番初めの大見出しとして見出し1を<h1>タグで表示しています。
その下に見出し1を説明する文章を、<p>タグ(ひとつの段落としての表現)でマークアップしています。

次に、見出し1に属するものをテーマごとにわけ、そのテーマごとの見出しとして、見出し2を用いています。
見出し2を<h2>タグで表現し、説明する文章を<p>タグでマークアップしています。

見出しや段落については、必ずbody要素内に記述します。

大切なことはユーザに伝わり易い文書かどうか このような形で肉付けをしていきますが、大切なことは、読み手(ホームページに訪れてくれる人、用語ではユーザ、以下ユーザと呼ぶ)にとって読みやすいか?伝わりやすい構成か?文書か?ということです。

ユーザにとって読み伝わり易く、またユーザが欲しい情報を探しやすいように、見出しの活用を多いにします。
また文章の精査は、当然のことですが、正しいタグを使うということもとても大切です。

文書の構成、マークアップの感じをなんとなくでもつかめていただけましたか?

実際に演習してみるためには?

上記を実際にテキストエディタで作成または、 <html>から</html>をコピーして、テキストエディタへ貼り付けます。

保存する名前は任意ですが、拡張子を「.html」に指定して保存してください。

ブラウザで確認するには、保存したファイルアイコンをダブルクリックするか、右クリック→プログラムから開く→Internet explorer(IEの場合)とブラウザに指定して開いてみます。
但し、ブラウザでの見栄えはシンプルなものです。気にしないこと。



« htmlによるマークアップについて | メイン | 更新のとき注意したいこと »

トラックバック

このエントリーのトラックバックURL:
http://www.ajcorp.jp/mt/mt-tb.cgi/259

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)