TriAx Labs

トライアックスの技術関連ブログです。
Search

‘section’ タグのついている投稿

2011 Feb 14 22:42
retweet

TriAx的 HTML5 article、section、aside、div、ルール

スマフォ勉強会ではユーザーインターフェース(UI)、CSS3(装飾)、そしてHTML5(構造)についての熱い議論が交わされています。

本日の主な議題はタイトルにある「article、section、aside、div」についてのルール。
思い切り開発的な内容となってしまいますが、社内の出来事、として軽~くお読みください。

ボク的には『どうでも良い』と思っていたのですが、グループメンバーからの激しいブーイングに、「じゃぁ、決めようよ」と言うことになりました。

あくまでも「TriAx的ローカルルール」です。2~3プロジェクトで変更される可能性が高い、と言うことをお断りしておきます。


順番・強さ的には「article > section > aside > div」となりました。

例を挙げると…。
article :
ブログ記事、ニュース記事、(ツィート?)
<!--
■ニュース…詳細ページ
-->
<article>
<h1>スマフォ 始めました</h1>
<p>TriAx ではスマフォのインターフェース開発やシステム開発に対応しました。</p>
</article>
section :
コーポレートサイトやポータルサイトなどに見られる見出し付きのコンテンツブロック・グループ。article記事内に(複数)含まれることもある。
<!--
■コーポレートサイト…ゲートウェイ or インデックス
-->
<article>
<!--
section では見出しタグ(h1~h6) はリセットされますので
ページ内に h1 を複数記述することができます
-->
<section>
<h1>スマフォ 始めました</h1>
<p>TriAx ではスマフォのインターフェース開発やシステム開発に対応しました。</p>
</section>
<section>
<h1>LaCoon CMS 開発順調です</h1>
<p>TriAx ではセミオーダーフレームワーク LaCoon を採用することにより開発効率と堅実性の両立を図っています。</p>
</section>
</article>
aside :
(section の内容に関連する)引用、抜粋、記事。
<!--
■ブログ記事…タグ・キーワード
-->
<article>
<section>
<h1>スマフォ 始めました</h1>
<p>TriAx ではスマフォのインターフェース開発やシステム開発に対応しました。</p>
<aside>
<dl>タグ</dl>
<dd>
<ul>
<li><a href="http://labs.triax.jp/tag/html5">HTML5</a></li>
<li><a href="http://labs.triax.jp/tag/python">python</a></li>
<li><a href="http://labs.triax.jp/tag/pyxis">pyxis</a></li>
</ul>
</dd>
</dl>
</aside>
</section>
</article>
div :
特に意味はなく、どこに含まれても良い。

…という感じでコーディングルールとしてしばらくの間は統一していく事になりました。

カテゴリー:
  • デザイン
Author:Shigeru MATSUDA

    タグ:
  • article , 
  • aside , 
  • HTML5 , 
  • section
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをGoogle bookmarkに追加
<< 前の月のアーカイブを見る
これより後の月にはエントリーがありません。
Category
Archive
Tags
すくすくスクラム アクセスログ アジャイル アラン・クーパー クラウド コメントの書き方 コンパイル コーディング規約 スクラム スマートフォン ソーシャルメディア タブレット タブレット端末 テキストマイニング テーマ デザイン デバッグ ドン・ノーマン ネットワーク プログラマ ペルソナ マーケティング メソッド ユーザ行動モデリング 便利ツール 勉強会 壁紙 実行時間 教育 暑中見舞い 行動パターン分析 開発 Android article aside buildbot CSS3 daemon mode facebook facebook page GAE Getting Things Done gnuplot Google Analytics Google App Engine GTD Hadoop Hardy HTML5 iframe iOS iOS4.2 iPad iPhone Jinja Jinja2 Mahout Mako MapReduce NFS PEP pybundle Pylons PyPl Python Pyxis Review Board RHEL4 section Smartphone Sphinx Tablet Toscawidgets Trac TrStyle UX Validator virtualenv web-kit Widget WSGI
    • トライアックス株式会社
    • LaCoon
Copyright(C) TriAx Corp. All rights reserved.