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