ドットインストール HTML入門14～15

スタイリング

文書をそれぞれの意味や持っている機能などでひとまとめにして整理する。

これらは区画整理が目的であって～でなければならない、ということはないようである。

<header>
    <h1>起業日記</h1>
        <nav>
            home
            profile
        </nav>
</header>
<article>
    <h2>リリース完了！</h2>
    <p>うれしい！</p>
</article>
<aside>
    <h3>このサイトについて</h3>
    <p>@taguchiの起業日記です。</p>

</aside>
<footer>
    copyright 2013 @taguchi
</fotter>

<header><footer>

そのままヘッダーやフッターとしてまとめるのに用いる。

整理する上でヘッダーやフッターが複数存在していても構わない。

<nav>

ナビゲーションリンク等をまとめるのに用いる。

主にヘッダーやフッター内部に存在していることが多くなりそうである。

<article>

記事の内容などに使用することが推奨されるセクション。

入れ子状にした時下位のものは上位のものに関連しているものとするのが原則。

<aside>

文書内において補足的な事柄についてまとめるのに用いる。

<section>

その他の区分を設けるのに用いる。

ただし上記の他のタグを優先しなるべく意味のある分け方をするように。

意味や機能ではなくレイアウトなどを目的とした整理・区分などは以下のようなタグを用いる。

<div id="main">
<p>こんにちは！こんにちは！</p>
<p>こんにちは！こんにちは！</p>
</div>
<p>こんにちは！<span class="notice">こんにちは！</span></p>
<p>こんにちは！こんにちは！</p>

<div><span>

囲った範囲をひとかたまりとしてグループ化する。

<div>タグは識別子にid属性をとり、<span>タグは識別子にclass属性をとる。

<div>タグはその前後で改行が入り、また識別子のid属性は同じ文字列を文書に１つしか設定することはできない。

そのため大きなまとまりでスタイリングする時に用いる。

<span>タグは前後に改行が入らず、また識別子のclass属性は同じ文字列を複数文書内に持つことができる。

そのため離れて何度も出る特定の文字を何個もまとめてスタイリングするなどの用途に向いている。

また<div>タグはid属性を持つためリンク時の移動先として設定することもできる。