マークアップ基準について
2016/04/12
今回のテンプレートは以下を基準にマークアップしていきます。
▽<header>、<nav>、<footer>について
既存の区分けに従ってマークアップします。
▽<article>について
記事内容部分には<article>を適用します。
<article>は<section>よりも記事性の強い要素に当てはめられます。
単体で存在しても意味のあるセクションをマークアップするのに使います。
▽<aside>について
<aside>はページ内の補足情報として使用されます。
サイドバーに当たる部分に適用します。
広告などを貼り付ける際、<aside>内に入れるのは好ましくありません。
sub_module5にはasideを付け、sub_module7には付けていません。
ページに関連性のあるモジュールはsub_module5に、関連性の薄いモジュールはsub_module7に設定すると良いでしょう。
▽<section>について
<section>は汎用セクションです。
記事性は薄いが、見出しを付けられる要素に使用します。
▽<dl>と<table>について
<dl>は定義リスト、<table>は表組みです。
その要素に並び順が重要な場合は<dl>を、並びの昇降を変えても意味が変わらない物には<table>を適用します。
例)新着情報は日付順でないと意味を為さない→<dl>
例)採用情報一覧は並び順が変わっても意味が伝わる→<table>
▽<header>、<nav>、<footer>について
既存の区分けに従ってマークアップします。
▽<article>について
記事内容部分には<article>を適用します。
<article>は<section>よりも記事性の強い要素に当てはめられます。
単体で存在しても意味のあるセクションをマークアップするのに使います。
▽<aside>について
<aside>はページ内の補足情報として使用されます。
サイドバーに当たる部分に適用します。
広告などを貼り付ける際、<aside>内に入れるのは好ましくありません。
sub_module5にはasideを付け、sub_module7には付けていません。
ページに関連性のあるモジュールはsub_module5に、関連性の薄いモジュールはsub_module7に設定すると良いでしょう。
▽<section>について
<section>は汎用セクションです。
記事性は薄いが、見出しを付けられる要素に使用します。
▽<dl>と<table>について
<dl>は定義リスト、<table>は表組みです。
その要素に並び順が重要な場合は<dl>を、並びの昇降を変えても意味が変わらない物には<table>を適用します。
例)新着情報は日付順でないと意味を為さない→<dl>
例)採用情報一覧は並び順が変わっても意味が伝わる→<table>
- PDF添付サンプル(3.56 KB)
※PDFファイルをご覧いただくには、Adobe Acrobat Reader が必要です。Adobe Acrobat Reader のダウンロード(無償)はこちらから
※PDFファイルのサイズが大きい場合、表示するまで時間がかかることがございます。