* セマンティックなHTMLとプログラム処理 [#yaa69db4]
** セマンティックではないHTML [#leb8b5c0]
以下はウェブアプリでよくある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 [#w310f497]
これをセマンティックに書き換えたものが以下である。
<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的に有効だが、それだけでなくプログラム処理的にも有効と言える。
** プログラム処理 [#q7fc1b06]
以下が上の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";
}
?>
** まとめ [#d13b74dd]
セマンティックなHTMLとは、無駄や例外が少ないHTMLと言える。そして、よりセマンティックなHTMLであれば、より無駄や例外が少ないプログラム処理になると言える。
** 付記 [#u72132f6]
なお、今回のHTMLを実現するためにCSSのfloatを使ってあるが、floatやCSSポジショニングは、ブラウザ間での調整が難しくなる、HTMLが複雑になり可読性が落ちるというデメリットもある。
したがって、トータルで判断して効率を追求するのが重要。