2013年4月21日日曜日

セマンティックWebを実現するためのセクショニング(HTML5)

セマンティックWebとは、「Webページおよびその中に記述された内容について、それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想。」だそうです。(IT用語辞典より

個人的な見解としては、以下のとおりです。(間違ってるかもしれないですが…。)
(1)スマートフォン・タブレットの普及により、ホームページを閲覧できる情報端末の多様化が起きた。

(2)困ったことに、画面のサイズも違えば、使っているブラウザもまちまちときた。

(3)各端末・ブラウザ間で、見栄えよく同じ文章構造を保った形でホームページを閲覧できるようにするために、ホームページの文章構造を階層化・グループ化(セクショニング)する必要があった。

それでは、具体的なセクショニングの方法についてのメモを書いて行きたいと思います。

セクショニングを行うのは、おもに<body>…</body>タグ内での作業になります。

(1)ナビゲーション
ホームページを見ているとよく上部もしくは左側に「メニューボタン」がくっついていますよね(例えば、HOME、ABOUT、LINKSなど)。それがナビゲーションです。
<nav>
</nav>
(2)メインコンテンツ
ホームページの本文に当たる部分のマークアップします。
<article>
</article>
(3)メインコンテンツのグループ化
ホームページの本文に当たる部分をグループ化することで細分化します。
<section>
</section>
(4)補足情報
ホームページの下部などにある補足情報に当たる部分をマークアップします。
<aside>
</aside>

上記の内容をまとめると、
<body>
 <nav>
 …
 </nav>
 <article>
 …
 </article>
 <aside>
 …
 </aside>
</body>
こんな感じです。

2013年4月19日金曜日

Webページの基本形(HTML5)

HTML5で記述されたWebページの基本的な構造についてのメモです。以下がHTMLの基本的なカタチになります。

(1)DOCTYPE宣言を行う
このファイルはHTML5で記述されてますよと明記します。
<!DOCTYPE html>
(2)Webページで使用されている言語を指定する
日本語であれば「ja」、英語であれば「en」と指定します。
<html lang="ja">
</html>
(3)ページの付加情報を記載する領域の設定
ここでは、Webページのタイトルやスタイルシート、スクリプトの内容を記載します。
<head>
</head>
(4)Webページの内容を記載する領域の設定
ここでは、Webページを閲覧した時に表示される内容を記載します。
<body>
</body>

上記の内容をまとめると、
<!DOCTYPE html>
<html lang="ja">
<head>
…
</head>
<body>
…
</body>
</html>
こんな感じです。