1. TOP
  2. HTML / CSS Web
  3. html5コーディングで気を付けているポイント

html5コーディングで気を付けているポイント

カテゴリ:
HTML / CSS
Web
| トラックバック(0)
投稿者:yo yo

110728html5-how-to-writing.jpg
Screen shot : World Wide Web Consortium (W3C)

html5コーディングで気を付けているポイント

思い浮かんだまま、気ままに書きます。

HTML5構文準拠したテンプレートを記述する

ただし、XHTMLとの互換性を持たせるため、閉じタグ等は記述していった方が望ましいのではないかと感じます。


<html>
  <head>
    <meta charset="UTF-8">
    <title>ドキュメントの例</title>
  </head>
  <body>
    <p>段落の例</p>
  </body>
</html>

sectionタグで囲われる部分には、見出し(hタグ)+コンテンツ(pやulやtable 他)となる部分を入れる

sectionタグは、文章の論理構造を明確にする為のタグです。タグ内部には出来る限り見出しと見出しに対する内容をセットで記述する様にしています。

見出し

内容

articleタグで囲われる部分は、単独で再配布、再利用、引用可能な様に記述する

articleタグはsectionタグと非常に似ていますが、articleタグはsectionとは異なり、タグ内部だけでコンテンツが完結し、引用されたとしても内容が解る様にします。

どういう判断でsectionとarticleを使い分けるのか、どこまでセクショニングタグで囲うのか、ある程度、論理構造が見やすく記述されるように心掛けています。 ただ、どの様な記述が正しいのか未だに理解していないので何か、webkitなどの記述方法に沿った形を身につけて行きたいところです。

例01

ブログ記事タイトル

見出し01

内容01

見出し02

内容02

例02

サイトタイトル

メイン商材01

内容01

メイン商材02

内容02

フッター

Apple

例03

見出し01

内容01

見出し02

内容02

mozilla JAPAN

section、article、aside、header、footerタグなど、文章の論理構造を表すセクショニング・コンテンツタグにスタイルを適用しない

これらのタグは文章の論理構造を表すタグになるので、なるべくCSSのスタイルを適用しない様にしています。CSSでデザインを入れる場合は、divタグなどへ記述しています。

html5に対応していないブラウザでも、意識せずにデザインを崩さずに表示させる事が出来ています。

明確にサイトナビゲーションと解るセクションに関してのみnavタグで囲う

サイト内にリンクするからといって、安易にnavタグを使いすぎるのは良くないと思います。明確なサイト内ナビゲーションと解るアンカー群に限りnavタグで囲う様にしましょう。

具体的には、メインナビゲーション、トピックパス(パンくずリンク)、サブナビゲーション(サイドバーなど)に利用しています。

タグの量を成るべく省く、サイトを軽く

html5だけでなくコーディング全般に言える事ですが、なるべくdivの入れ子にならない様に、論理構造が一目で解り、シンプルかつ矛盾なく記述出来るように心掛けています。

論理構造を重視するあまり、articleやsectionと絡めてheaderタグやfooterタグを複数入れ子にしたり、hgroupタグを頻繁に記述する様にしたり、divを入れ子にしてidプロパティに"alpha"・"alpha-inner"などの様にコーディングは避けるようにします。

まとめ?

現状で私はhtml5について、どの様に記述していけばよいのか把握しきれていないので、今後、様々なサイトソースを参考にし、吸収していきます。

なんだそりゃ

« Apple 新型 MacBook Air | ホーム | webサーバへサブドメインを追加する »

トラックバック

http://pulltab.info/mt/mt-tb.cgi/73
ページの先頭に戻る