構造化を進めよう

装飾の前にHTMLで構造化を行う

前回記事body要素内を記述するで、ドキュメントbody全体を3つのパートに分けました。

header
main
footer

今回は更に構造化を進めていきます。

header要素内

div要素id名header にlogo、head_navigationを包括させます。

logo

ロゴ（英語表記ではlogotype）とは、会社や商品を認識しやすいマークとして表したものです。実際には画像ファイルを用意して利用することがおおいでしょう。現段階ではテキストを表示しておきます。今回はh1要素でマークアップし、id名に「logo」を付けます。

HTML

<h1 id="logo">XHTML Sample</h1>

head_navigation

ここでは順序を問わないリスト（ul要素、li要素）を使ってメニューをマークアップします。各リスト項目がクリックされた時にジャンプできるよう、li要素内の文字列をa要素で囲みます。id名はhead_navigationを省略したh_navとします。
※今回の実践講座ではTOPページのみ作成するため、a要素のhref属性におけるリンク先URLは指定しません。

HTML

<ul id="h_nav">
    <li><a href="#">SITEMAP</a></li>
    <li><a href="#">PRIVACY POLICY</a></li>
</ul>

global_navigation

順序を問わないリスト（ul要素、li要素）を使ってメニューをマークアップします。id名はglobal_navigationを省略したg_navとします。

HTML

<ul id="g_nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Access</a></li>
    <li><a href="#">Contact us</a></li>
</ul>

main

div要素id名main にmain_visual、information、side_navigation を包括させます。

メイン画像

今はまだメイン画像がありませんのでimg要素の代わりにテキストを表示しておきます。

HTML

<div id="main_visual">メイン画像をここに表示する</div>

information

お知らせを表示する部分です。h2要素による見出し、順序を問わないリスト（ul要素、li要素）によるお知らせ内容を記述します。

HTML

<div id="information">
    <h2>News &amp;amp; Topics</h2>
    <ul>
        <li>2012/06/15 誠に勝手ながら7月1日～7月3までの間、休業日とさせて頂きます。</li>
        <li>2012/06/14 ドリンクメニューの改定を行いました。ワインの取り扱い銘柄を増やしました。是非ご利用ください。</li>
        <li>2012/06/13 WEBサイトをリニューアルオープンいたしました。Twitter始めました。</li>
    </ul>
</div>

side_navigation

順序を問わないリスト（ul要素、li要素）を使ってメニューをマークアップします。id名はside_navigationを省略したs_navとします。

HTML

<ul id="s_nav">
    <li><a href="#">Food</a></li>
    <li><a href="#">Drink</a></li>
    <li><a href="#">Sweets</a></li>
</ul>

footer

footerにはコピーライト情報を記述します。

HTML

<div id="footer">
    <p id="copyright">Copyright &amp;copy; <a href="http://taghtml.com">taghtml</a> All Rights Reserved.</p>
</div>

ここまでの様子を実際にブラウザで見てみましょう。

構造化を行ったサンプル文書

→次のページ：装飾する（body全体部分）

←前のページ：body要素内を記述する

< body要素内を記述する装飾する（body全体部分） >