title要素の記述は、決して省略しないで下さい。
<title>HTML 3分クッキング</title>多くのブラウザ/User Agentが、title要素の中身を、文書を代表する重要な記述と看做します。この事を考慮に入れて、制作者は、適切なtitle要素を記述しておかなければなりません。
The Web KANZAKIの神崎氏は、文書の顔となる大切なタイトル
、と表現しました。title要素は重要です。
多くの文章には、見出しがあるものです。見出しはh1/h2/h3/h4/h5/h6要素としてマーク附けします。
<h1>HTML早分り</h1>HTMLの仕様によれば、6段階までの階層が表現できます。
「hxは文字のサイズを指示するタグ」なる説明をする解説書やサイトがあります。これは間違つた説明です。テキストベースのブラウザであるLynxでは、見出しも本文も同じ大きさで表現されます。
本文は、常に、いくつかの段落から構成されます。基本的に、一つの段落を一つのp要素としてマーク附けします。
<p>「形容動詞」と云ふ品詞を認めない考へ方があります。そんな馬鹿な、と思ふ方もいらつしやるでせうが、例へば日本を代表する有名な辭書である『広辞苑』も、この考へ方に基いてゐます。</p>
<p>「形容動詞」を認めない國語學者の代表は時枝誠記博士です。時枝博士に學んだ大野晋博士も、その考へを受繼いでゐます。</p>pの終了タグは、多くの場合、省略可能です。しかし、終了タグの省略には厳密な規則があるので、初心者は取敢ず、終了タグを省略しない様にして下さい。
HTMLのHTMLたる所以です。
単純なリンクを明示するには、アンカーである文章の部分を、a要素としてマーク附けします。
<p>詰らないので<a href="index.html">トップページ</a>に戻る。</p><p>詳しい事を知りたいので<a href="http://www.w3.org/">W3Cのサイト</a>を参照する。</p><ul>
<li><a href="http://validator.w3.org/check/referer"><img src="http://members.jcom.home.ne.jp/pctips/valid-xhtml10.png" alt="Valid XHTML 1.0!"></li>
</ul>引用した文章は、blockquote要素としてマーク附けします。
出典は、文献にURIがある時は、blockquote要素のcite属性で明示します。URIとして表現できない文献、それと関連情報は、title属性で示しておくしかありません。
<p>齋藤緑雨曰く、</p>
<blockquote cite="urn:isbn:4-572-00141-3" title="「半文錢」(『緑雨警語』所收)">
<p>源氏物語は惡文の標本成。一囘の誦することなくして、誦するに足らざるを言得べきは、唯この大部の一書あるのみ。</p>
</blockquote>文中の、引用である文や語句は、q要素で明示します。
<p>『詩学』『政治学』の著者を今我々はアリストテレスと呼ぶが、明治の人々は<q>アリシトートル</q>等と呼んだものだ。</p>文中の語句を画像で表現したい場合、img要素としてマーク附けします。
<ul>
<li><img src="nagisa.jpg" alt="Nagisa Shiratori(Lovely, Cute and Strongest Idol)"></li>
</ul>img要素は、視覚メディアのUser Agent――ウェブブラウザで閲覧される事を前提に、グラフィックを文中に埋め込む目的で使用される要素です。
src="nagisa.jpg"と記述しました。この記述を見て、画像を表示可能なブラウザは、画像ファイル「nagisa.jpg」をサーヴァに要求し、ブラウザの画面に表示します。img要素は、2003年現在、ウェブで一般的な存在です。
しかし、オブジェクト一般をHTML文書に埋め込むための要素として、HTML 4.01以降、object要素が規定され、より広い目的で使用できます。
サイト制作者は、テキストの一部を画像や動画などのオブジェクトとして表現したい場合、object要素によつてマーク附けできます。
img要素よりもobject要素の方が、SGML的には全うな仕様である気がします。
ただ、めじゃーなブラウザであるInternet Explorerが、object要素の記述をうまく処理できないみたいです。
何かを列挙する場合の表現の仕方です。
「箇條書き」「項目の羅列」。
各項目は、li要素としてマーク附けします。最後に一聯のli要素をul要素の中身として括ります。
<ul>
<li>最初のリスト項目</li>
<li>2番目のリスト項目</li>
<li>3番目のリスト項目</li>
</ul>項目の列挙以外に、文章の列挙にも使用できます。メニューの表示に使用する事もできます。また、複数の項目を挙げるのみならず、単独の項目を挙げるのにも使用できます。
「リスト」の概念は、制作者の主観により、拡張可能です。拘り過ぎて、あまり変に制約を設けたりしない方が良いです。
1、2、3……とかの「順序のある項目」をいくつか並べる時。
各項目は、li要素としてマーク附けします。最後に一聯のli要素をol要素の中身として括ります。
<ol>
<li>最初のリスト項目</li>
<li>2番目のリスト項目</li>
<li>3番目のリスト項目</li>
</ol>「１、２、３」でなく、「a、b、c」とか「い、ろ、は」とかいつた風にカウントアップさせる事も、仕様上は可能です。が、その表現の仕方は、スタイルシートに依存します。
インライン要素とブロックレヴェル要素とを列挙する時。
「定義リスト」と呼ぶ通り、辞典などで、用語とその説明を並べて記述する時、便利に使用できます。
<dl>
<dt>最初の用語</dt>
<dd>その定義。うんぬんかんぬん。</dd>
<dt>2番目の用語</dt>
<dd>その定義。かくかくしかじか。</dd>
</dl>用語はdt要素、その語の定義・説明はdd要素――ただし、これはサンプルに過ぎません。現在のHTMLの仕様では、その種の用途に限定されたものではありません。
li要素、dd要素の中身は、普通のテキストや画像、見出し、段落、別のリスト……といつた要素です。ただ、「li要素やdd要素の中身に見出しを入れるのは極めて例外的な事である」とされます。
ul要素、ol要素の中身は、li要素以外はあり得ません。dl要素の中身はdt要素とdd要素に限られます。
従って、リストの中でリストを表現したい場合、li要素、dd要素の中にul/ol/dl要素以下を記述する必要があります。
<ol>
<li>最初のリスト項目</li>
<li>2番目のリスト項目
<ul>
<li>ネストされた最初の項目</li>
<li>ネストされた2番目の項目</li>
</ul>
</li>
<li>3番目のリスト項目</li>
</ol>もっとも、この種のリストのネスティングについては、必ずしも詳細に説明する意味はありません。ネスティングの概念として理解するよりも、要素の入れ子関係の説明として理解して下さい。
HTMLの場合、幾つかの規定によって、要素の終了地点が明かであったり、そのため、タグの記述で省略が可能であったりします。
ただし、省略の仕組がよくわからない初心者は、無闇に省略をしないで、終了タグをきちんと記述して下さい。
文中で、強調したい部分はem要素で、emよりも強調したい部分はstrong要素で明示できます。
ほかにも、色々な要素が存在します。リファレンスを見るなどして、調べてみて下さい。多くはインライン要素です。
ただし、それらのインライン要素として多くの箇所を明示しなければ意味の通らない文章、インライン要素のマーク附けを排除すると訳がわからなくなる文章は、良い文書ではありません。マーク附け前の、プレーンなテキストの状態で悪文である文書は、マーク附け後も悪文です。
普通の文章として良い文章である状態から、HTMLのマーク附けを始める事が、大前提です。HTMLは悪文をごまかすためのものではありません。
文中で、どうしても強制的に改行を実現しなければならない時があるかも知れません。その時は、br要素で強制的に改行する様、ブラウザに直接指示できます。
しかし、制作者がbrで強制改行をしなければならない事態は、滅多にありません。ブラウザは通常、ブロック要素の前後を改行で表現しますし、ブロック要素の中身をウィンドウの端で適切に折返し表示します。
br要素は極めて特殊な要素です。初心者は取敢ず、brに依存せずにHTML文書を作る訓練をして下さい。
案外、brは厄介な要素です。安易に使用しない様にしておいて下さい。