htmlの本場ってどこだろう。
htmlの本場はどこなのだろうか、W3Cを覗いてみよう。
つまり、W3Cの書き方を学べば、きっとそこには本場の味がある。
ブログのから、ちょっと範囲が大きくなりすぎるかもしれないが、覗いてみて損はないだろう。
http://www.w3.org/ を開いてみよう。
2000年頃には、W3Cのウェブページも、テーブルタグで、レイアウトが行われていた。
現在では、ページは、3列構成だ。ブラウザのサイズに対応して、列幅が自動的に追従する。IE’7では、最小幅の為の何らかの手順は撮られていない。3カラムフロートレイアウトと呼ばれるもの。
ソースを見てみよう
<meta name="generator" content="HTML Tidy for Mac OS X (vers 1st March 2004), see www.w3.org" />
tidyというプログラムでドキュメントが作られているようだ。
tidyをインストールしてみる。
tidyは、htmlを検証して、コマンドで、修正したhtmlを、書き出してくれるツールのようだ。
http://idena.jp/2006/09/html_tidy_1.shtml にいくと、ちゃんと用意してくれている人がいる。幸せなこと。
ダウンロードしたファイルを使ってみる。
- c:\tidy というホルダを作成して、その中にダウンロードしたファイルを、置いた。
- test用のhtmlを用意する。
-
- sample.html
このファイルは、http://www.tenman.info/c_std_html/ から、html4.01transitionalをダウンロードした。
この文書は、euc を使っている。ヘルプでは、文字コードは、Shift_Jisと、UTF-8があるだけなので、-raw というオプションを使った。
h3とliタグの終了タグの中から/を削除した。
- スタートメニューから、全てのメニュー アクセサリから、コマンドプロンプトを起動させる。
Microsoft Windows XP [Version 5.1.2600]
(C) Copyright 1985-2001 Microsoft Corp.
C:\Documents and Settings\hoge>cd c:\tidy
C:\tidy>tidy -output result.html -raw sample.html
result.htmlに修正されたhtmlが表示された。
result.htmlはきちんと終了タグが補完されていた。
もう少し、htmlを見ていこう。
ネットで、htmlタグについて調べてみると、htmlに良い書き方と、悪い書き方があるというのはなんとなくわかるけれど、どういう使い方が、良くて、どういう使い方が、悪いのかを知りたいと思うと、突然探しにくくなる。
誰も、ソースを見て重箱の隅をつつくような事をしたくもないが、こういうもので、推学するしかないというのも、htmlの特徴だったりすると思った。
以下のソースが目に留まる。
1. <div id="x20061115b" class="item">
2. <h3 class="headline"><img alt="" width="17" height="11" src="/Icons/right" />XInclude 1.0 Second Edition Is a W3C
3. Recommendation</h3>
4.
5. <p><span class="date">2006-11-15:</span> Today the World Web Consortium
6. released <a href="/TR/2006/REC-xinclude-20061115/" shape="rect">XML Inclusions
7. (XInclude) Version 1.0 Second Edition</a> as a Recommendation. Produced
8. as a convenience to readers, the second edition is intended to correct
9. all known errata in the 2004 <a href="/TR/2004/REC-xinclude-20041220/" shape="rect">XInclude 1.0 Recommendation</a>.
10. XInclude is a generic mechanism for merging XML documents (information
11. sets) using existing XML constructs ? elements, attributes and URI
12. references. Visit the <a href="/XML/" shape="rect">XML home page</a>. <span class="archive">(<a rel="details" title="XInclude 1.0 Second Edition Is a W3C Recommendation" href="/News/2006#item176" shape="rect">News archive</a>)</span></p>
13. </div>
1行目、id とクラスが併記されている。
スタイルを指定するだけなら、別に、クラスを指定するだけでも書ける。
idの値は、一度しか出現できない固有の値でなくちゃいけない決まり。
クラスは何度でも書ける。クラスとid両方にスタイルを書くと、idが優先する。
併記する理由はどこにあるのか、
このブロックは、日付に基づいたエントリーだから、固有のidが表記され、共通の、多分エントリ共通の、見栄えが指定されているから、クラスも指定されているのだろうと気づく。
8行目のspanの使い方。日付をクラスで、明示している。
私には、じゃ俺もやってみようと思うパターンですが、
ほかの人から見れば、「なんか、病気なんじゃないの?。」といいたくなったり、
「所詮htmlなんて、枯れてしまってんでないの。工夫は、所詮工夫じゃないの」などという人もいるかもしれない。
htmlは、クラス属性だけで書いても、バリデーションで100点取ることはそんなに難しくなく、上述のような書き方をしても、それ以上の評価にはならない。
htmlドキュメントから、日付を取り出したいとか、rdfを書き出したいと、思い描きながら、ドキュメントを書き進める人もいれば、単に一枚のドキュメントを仕上げればいい人もいる。
ひとりで作るブログなら、何の問題にもならないだろう。担当が替わったり、引継ぎが可能な形で運営しなければ、ならない時もあるだろう。
60個も覚えれば、専門家?と思えるhtmlタグ、結構手ごわい。