セマンティックなHTMLとプログラム処理

セマンティックではないHTML

以下はウェブアプリでよくあるHTMLをモデル化したものである。左から種別、品名、値段という3つのカラムのリストになっている。 2,3,5行目のTDタグが空になっているのに注目すると、このHTMLはセマンティックとは言い難い。

<html>
<head>
<style type="text/css">
table, td {
border: 1px solid #555;
}
</style>
</head>
<body> 
<table>
<tr>
<td>果物</td>
<td>りんご</td>
<td>100円</td>
</tr>
<tr>
<td></td>
<td>みかん</td>
<td>150円</td>
</tr>
<tr>
<td></td>
<td>バナナ</td>
<td>80円</td>
</tr>
<tr>
<td>野菜</td>
<td>大根</td>
<td>150円</td>
</tr>
<tr>
<td></td>
<td>たまねぎ</td>
<td>120円</td>
</tr>
</table> 
</body>
</html>

セマンティックなHTML

これをセマンティックに書き換えたものが以下である。

<html>                  
<head>
<style type="text/css">
table, td {
border: 1px solid #555;
}
h2 {
margin: 0;
width: 3em;
font-weight: normal;
float: left;
}
</style>
</head>
<body>
<h2>果物</h2> 
<table>
<tr>
<td>りんご</td>
<td>100円</td>
</tr>
<tr>
<td>みかん</td>
<td>150円</td>
</tr>
<tr>
<td>バナナ</td>
<td>80円</td>
</tr>
</table>

<h2>野菜</h2> 
<table>
<tr>
<td>大根</td>
<td>150円</td>
</tr>
<tr>
<td>たまねぎ</td>
<td>120円</td>
</tr>
</table>
</body>
</html>

種別をTABLEから外し、見出しタグに入れた。これは最初のHTMLよりセマンティックであり、SEO的に有効だが、それだけでなくプログラム処理的にも有効と言える。

プログラム処理

以下が上の2つのHTMLをPHPで出力するためのコード。最初のHTMLよりも後のHTMLの方が処理が少ないのがわかる。

<?php
$arr = array(
  "果物" =>
    array(
      array("りんご",100),
      array("みかん",100),
      array("バナナ",100),
    ),
  "野菜" =>
    array(
      array("大根",150),
      array("たまねぎ",120),
    ),
);

print "<table>\n";
foreach ($arr as $k => $v) {
  $first = true;
  foreach ($v as $v2) {
    if ($first) {
      printf("<tr><td>%s</td><td>%s</td><td>%s</td></tr>\n",$k,$v2[0],$v2[1]);
      $first = false;
    } else {
      printf("<tr><td></td><td>%s</td><td>%s</td></tr>\n",$v2[0],$v2[1]);
    }
  }
}
print "</table>\n";

foreach ($arr as $k => $v) {
  printf("<h2>%s</h2>\n",$k);
  print "<table>\n";
  foreach ($v as $v2) {
    printf("<tr><td>%s</td><td>%s</td></tr>\n", $v2[0],$v2[1]);
  }
  print "</table>\n";
}

?>

まとめ

セマンティックなHTMLとは、無駄や例外が少ないHTMLと言える。そして、よりセマンティックなHTMLであれば、より無駄や例外が少ないプログラム処理になると言える。

付記

なお、今回のHTMLを実現するためにCSSのfloatを使ってあるが、floatやCSSポジショニングは、ブラウザ間での調整が難しくなる、HTMLが複雑になり可読性が落ちるというデメリットもある。 したがって、トータルで判断して効率を追求するのが重要。


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2007-03-20 (火) 20:27:47 (4284d)