セマンティックな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が複雑になり可読性が落ちるというデメリットもある。 したがって、トータルで判断して効率を追求するのが重要。 |
|
