WebBox norijin note
WebBox norijin
Category: スポンサー広告  

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

TOP > スポンサー広告 > HTML5入門:セクション要素タグの意味と使い方!!セクション編 vol.1

Category: HTML5   Tags: HTML5  section  nav  article  aside  

HTML5入門:セクション要素タグの意味と使い方!!セクション編 vol.1

HTML5入門:セクション要素タグの意味と使い方!!セクション編 vol.1

前回、前々回と、HTML5の「HTML5入門:タグの意味と使い方!!文書の基本いついて」勉強しました。今回はHTML5の「HTML5入門:セクション要素タグの意味と使い方!!セクション編 vol.1」について勉強したいと思います。興味ある方は一緒に勉強していきましょう...

HTML5:セクションを表したい(section)


<section>~</section>

要素解説 section
カテゴリー フロー・コンテンツ/セクショニング・コンテンツ
利用できる場所 フロー・コンテンツが期待される場所
コンテンツモデル フロー・コンテンツ


 section要素は、一般的なセクションを表します。文書中の章や節といったまとまりを示すもので、通常は見出しを入れて使います。
 HTML5では、セクションを表す要素として、section要素、nav要素、article要素、aside要素が定義されています。この中で、一般的なセクションを表す要素が、section要素です。ナビゲーションであればnav要素、RSSフィードで扱いうる内容であれば、article要素のように、section要素以外に適した要素がある場合はそちらを使用してください。
 また、複数の要素をグループ化して、スタイルを適用したり、スクリプトで操作したりするためにsection要素を使うのは正しい用法ではありません。このような場合はdiv要素を使います。

<body>
<header>
       <h1>美容室サンプル</h1>
       <p>美容室を始めて10年経ちました。簡単に歴史を振り返ります。</p>
</header>
<section>
       <h2>美容室サンプル1号店</h2>
       <p>2001年4月 東京都中心部に「美容室サンプル」をオープンしました。</p>
</section>
<section>
       <h2>美容室サンプル2号店</h2>
       <p>2003年4月 大阪府中心部に「美容室サンプル2号店」をオープンしました。</p>
</section>
<section>
       <h2>美容室サンプル3号店</h2>
       <p>2004年4月 兵庫県中心部に「美容室サンプル3号店」をオープンしました</p>
</section>
</body>


HTML5:ナビゲーションを表したい(nav)


<nav>~<nav/>

要素解説 nav
カテゴリー フロー・コンテンツ/セクショニング・コンテンツ
利用できる場所 フロー・コンテンツが期待される場所
コンテンツモデル フロー・コンテンツ


 WEBサイトのナビゲーションとなる部分は、nav要素で表します。ただし、リンクの集りである部分すべてにnav要素が使えるわけではありません。サイト内を移動する手段として主要なナビゲーションにのみ、使用するようにしてください。
 例えば、一般的にWEBページやブログ上部、左右に表示されるナビゲーションは、nav要素で表す内容に適しています。
しかし、フッターにある簡単なナビゲーションは、通常はnav要素を使わず、footer要素の中に入れるだけで良いでしょう。


<body>
<h1>大阪散歩ガイド<h1>
<nav>
    <ut>
          <li><a href="index.html">ホーム</a></li>
          <li><a href="umeda.html">梅田周辺</a></li>
          <li><a href="shinsaibashi.html">心斎橋周辺</a></li>
          <li><a href="nanba.html">難波周辺</a><li>
    </ut>
</nav>
</body>

HTML5:内容が独立したコンテンツを表したい(article)



<article>~</article>


要素解説 article
カテゴリー フロー・コンテンツ/セクショニング・コンテンツ
利用できる場所 フロー・コンテンツが期待される場所
コンテンツモデル フロー・コンテンツ


 article要素は、ニュースサイトの記事やブログの記事(エントリー)のように、独立し、それだけで完結しているコンテンツを表す要素です。ブログ記事へのコメント、掲示板の投稿、ウィジェットやガジェットの領域などにも利用できます。
 コンテンツがarticle要素の内容として適しているかどうかは、RSSフィードで利用される場合を考えてみればいいでしょう。そのコンテンツがRSSフィードの内容になりうるとすれば、article要素が適しているといえます。



<body>
<article>
    <header>
         <h1>本物のお好み焼き</h1>
         <p><time pubdate datetime="2011-04-01T20:30:00+01:00"></time></p>
    </header>
    <p>ご存知の通り、日本には代表的なお好み焼きとして、大阪焼きと広島焼きがあります。</p>
    <p>今日は現地に行って、実際に大阪と広島のお好み焼きを食べてきましたので紹介します</p>
    <footer>
         <p><a href="http://exampleblog.jp/abcd/entry-20110401001.html#comment">1件のコメント</a>
    </footer>
</article>
</body>


HTML5:メイン・コンテンツとは関係の薄いコンテンツを表したい(aside)


<aside>~</aside>

要素解説 aside
カテゴリー フロー・コンテンツ/セクショニング・コンテンツ
利用できる場所 フロー・コンテンツが期待される場所
コンテンツモデル フロー・コンテンツ


 aside要素は、ページのメインコンテンツとは関係性が薄いコンテンツを表す要素です。メインコンテンツと無関係ではないけれども、仮にそのコンテンツをページから切り離しても、メインのコンテンツには影響がないものに対して使います。
 例えば、新聞や雑誌によくみられるような本文を抜粋したリード文、メインコンテンツを補足する記事・情報、ブログのサイドバー、広告などのコンテンツに利用できます。

<body>
<article>
<h1>Bluetooth</h1>
     <p><dfn style="font-weight:bold;">Bluetooth</dfn>は、近距離無線通信の規格です。</p>
</article>
<aside>
     <h1>名前の由来</h1>
     <p>規格の名前は...</p>
</aside>
</body>


今回の「HTML5入門:セクション要素タグの意味と使い方!!セクション編 vol.1」はここまでです。お付き合いありがとうございます。次は「HTML5入門:セクション要素タグの意味と使い方!!セクション編 vol.2」を勉強していきます。
 まだまだ勉強し始めて間がないですが、早くHTML5を使って、WEBページを作りたくなってくるのは僕だけでしょうか?っとその前に、CSS3も勉強しないとーw先は長いです...

関連記事

テーマ : インターネットサービス    ジャンル : コンピュータ

TOP > HTML5 > HTML5入門:セクション要素タグの意味と使い方!!セクション編 vol.1

LEAVE
'A'
COMMENT






07-2018
SUN MON TUE WED THU FRI SAT
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

06   08

月別アーカイブ
タグクラウド
全記事表示リンク

 About
WebBox norijin note

はじめまして!!
1983年4月生まれのAB型。広島出身の元美容師で、その後、大阪にてIT企業に勤め、現在三人で会社を立ち上げる為、日々精進しています。
 ブログでは、WEBについて勉強した内容や、自分が使ってて便利な情報を気ままに発信しています。

 Contact
メールフォーム

名前:
メール:
件名:
本文:

 link
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。