適切なマークアップへの心構え。

コーディングする上で、重要な要素は多くありますよね。

結果という点で見れば例えば下記の点が挙げられるでしょう。

  • ファイル容量の軽さ
  • アクセシビリティ向上
  • SEO効果

技術的に必要なものとしては下記とか。

  • (X)HTML
  • CSS
  • JavaScript
  • PHP
  • サーバ

ただ、ここでまず大事なのは、「適切なマークアップ」をできるかどうかです。

それ以外は、あくまでも"知識"に依存するのですが、マークアップ自体は、構造を正しく理解するなど別の要素が求められるからです。

不適切なマークアップ事例

たまたまダメな例が見つかったので、ご紹介。

「仮想化などビジネスクラウドベンダーの会社」のサイト。

li要素内に記号を書いているケース

<ul>
 <li>・システムが複雑化・硬直化して、マーケットの変化に対応しきれていない</li>
 <li>・システムの運用管理コストが以前より増えている</li>
 <li>・人的エラーによるセキュリティリスクが増大している</li>
 <li>・リソースが有効に使われておらず投資対効果があがっていない</li>
 <li>・業務アプリケーションのピーク負荷の予測が困難だ</li>
 <li>・障害に対する事前予防がなされていない</li>
 <li>・各種規制対応、コンプライアンス強化に追われている</li>
</ul>

li要素の中に「・」を書くという、まったく意味不明のマークアップです(笑)。

これをコーディングした人は、おそらく、li要素がどういう意味付けなのかを理解していないのでしょうね(笑)。

li要素は、順不同のリストを表します。

したがって、「・」はリストの内容自体を表現していないので不要です。

これらの部分は、CSSで定義すべきです。

dl要素(定義リスト)を効果的に使ってあげたいケース

お次は「dl要素」を使える場面について。

「新日鉄ソリューションズの特徴」というページ。

<p class="red_b">・NSGUD</p>
<p class="m_right_20">グリッドユーティリティ技術を生かした、より良いITインフラ構築のためにNSGUD(NS Solutions Grid Utility Designer's Club)を発足し、実際のユーザーニーズを反映しながら検証を実施していくスキームづくりを推進しています。有力なユーザー企業の事例紹介、お客様のIT資産の共同検証をはじめ、関連セミナーなどの情報発信活動、海外の最新動向の共同視察、各種交流会の開催などの活動を行っています。</p>

これは、見出しとデータをセットとして箇条書きにしているコンテンツです。

したがって、dl要素でマークアップすべきですね。

このサイトをコーディングした人は、ちょっとやばいですねw

結局一番大事なのは、Webサイトの内容をしっかりと理解することです。

コンテンツの内容を理解し、その文章が何を表しているのかを考えて初めて、「適切な」マークアップをすることができるようになります。

そして、それがアクセシビリティ、SEOにもつながります。

関連するWeb制作・開発Tips

関連リンク