セマンティックな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