XHTMLマークアップの考え方

XHTMLマークアップの考え方
XHTMLのコーディングについてのページです。見出しタグの付け方や一般的なコーディングの例を記載しています。

アフィリエイトするなら!

XHTMLマークアップとはの基礎を知る

XHTMLはレイアウト情報を入れない文書構造です。<div>を使いすぎないなど、一般的な書き方を記載しています。

一般的なXHTMLの書き方

  • 正確なタグ付けをして構造を解りやすく
  • レイアウト情報は入れない
  • 論文のように章、節、項といった見出し
  • <div>を使いすぎない

正確なタグ付けをして構造を解りやすく

不適切な例×
<div class="title">株式情報サイト</div>
<div class="description">このサイトは株式市場の総合情報サイトです。</div>
良い例○ テキストの意味付けをする
<h1>株式情報サイト</h1>
<p>このサイトは株式市場の総合情報サイトです。</p>

レイアウト情報は入れない

不適切な例×
<h1 bgcolor="#0000FF">株式情報サイト</h1>
<p width="500px">このサイトは株式市場の総合情報サイトです。</p>
良い例○ レイアウト情報はCSSに記述
<h1 id="title">株式情報サイト</h1>
<p class="description">このサイトは株式市場の総合情報サイトです。</p>
~CSS~
#title{ background:#0000FF; } .description{ width:500px; }

論文のように章、節、項といった見出し

不適切な例×
<h1>株式情報サイト</h1>
<h3>IPOについて</h3>
<h2>株式項目メニュー</h2>
良い例○ 見出しタグは順序良く
<h1>株式情報サイト</h1>
<h2>株式項目メニュー</h2>
<h3>IPOについて</h3>

<div>を使いすぎない

不適切な例×
<div id="container">
<div id="content">
<div class="header">
<div class="title">株式<div class="bold">総合情報</div>サイト</div>
</div>
<div class="description">このサイトは株式市場の総合情報サイトです。</div>
</div>
</div>
良い例○ 意味がある所には的確なタグを付ける
<div id="container">
<div id="content">
<div class="header">
<h1>株式情報サイト</h1>
</div>
<p>このサイトは株式市場の総合情報サイトです。</p>
</div>
</div>

正しいマークアップはコンテンツによる

W3Cに準拠したコーディングはガイドラインがありますが、絶対ということはありません。 サイトのコンテンツによってタグの付け方はそれぞれあります。また、製作者の狙いであえてのコーディングもあります。

現在ほとんど使われなくなったテーブルレイアウトでも検索エンジンで1位表示のサイトもあります。見出しタグがやたらと多く使われているサイトも上位にいたりします。

検索エンジンロボットに読み易いコーディングを心がけながら、内容を的確なタグで囲むことが重要です。

次のページ
» HP売上プラス パーソナルプラン
前のページ
» table 列をまとめて指定 colgroupについて
カテゴリ
» アフィリエイトップWebログ
トップページ
» アフィリエイトップ

▲このページの先頭へ

IIMヒューマン・ソリューション株式会社

アフィリエイトブログ記事一覧
無料ブログ一覧
オススメASP一覧
SEO HTML無料ツール集
アフィリエイト情報サイト:アフィリエイトップ
Copyright(C) 2009 Sitefix All Rights Reserved http://affiliatop.sitefix.jp/