HTMLにおいて、見出し(h1-h6)は文書の論理構造を示す大切な要素です。単に文字を大きくする目的で見出しを使うのはNGです。全ての環境で見出しが大きな文字で表現されるとは限りません。文書の構造に基づいて、適切に見出しをマークアップする必要があります。見出しが適切だとウェブページも読み易くなります。スタイルシートによるレイアウトでも、見出しのスタイルが全体の良し悪しに影響してくるように思えます。(p要素)
そしてこれはp要素による段落です。p要素はそれが段落であることを明示します。多くの視覚系ユーザエージェントでは、p要素の前後にスペースを空けることで段落を表現します。しかし、見出し同様、それは表現の一形態に過ぎません。音声系ユーザエージェントであれば、読み上げの間隔を広げることで段落を表現するかも知れません。スタイルシートを使えば、空行ではなくインデントで段落を表現することも可能です。p要素はそれぞれのユーザエージェントが適切に表現します。スペースを空ける目的でp要素を使ってはいけません。(p要素)
引用はblockquote要素またはq要素で示します。
blockquote要素は、その部分が引用された文章であることを示す要素です。引用部分が長く、ブロックレベルで引用したい場合に使用されます。一般的なブラウザでは左右がインデントされて表示されますが、インデントさせることが目的の場合はスタイルシートを利用するようにしてください。
さらに長めの引用。
吾輩は猫である。名前はまだ無い。
どこで生まれたか頓と見當がつかぬ。何ても暗薄いじめじめした所でニャー/\泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間で一番獰惡な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。掌の上で少し落ち付いて書生の顏を見たが所謂人間といふものゝ見始であらう。此の時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て裝飾されべき筈の顏がつる/\して丸で藥罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。加之顏の眞中が餘りに突起して居る。そうして其穴の中から時々ぷう/\と烟を吹く。どうも咽せぽくて實に弱つた。是が人間の飮む烟草といふものである事は漸く此頃知つた。
此書生の掌の裏でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。書生が動くのか自分丈が動くのか分らないが無暗に眼が廻る。胸が惡くなる。到底助からないと思つて居ると、どさりと音がして眼から火が出た。夫迄は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。
ふと氣が付いて見ると書生は居ない。澤山居つた兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して仕舞つた。其上今迄の所とは違つて無暗に明るい。眼を明いて居られぬ位だ。果てな何でも容子が可笑いと、のそ/\這ひ出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。
一方、q要素は引用部分が短く、インラインで引用したい場合に使用され
ます。
詩やソースコード、ASCIIアートなど、空白文字に意味のある部分はpre要素を使って表します。
朝御飯 納豆ねばねば 平城京
改行が そのまま反映 されますよ
空白も 連続しても そのまんま
#include <stdio.h>
int main(void)
{
printf("Hello, world!");
return 0;
}
% __ __ __ __ __ __ __ __ __ __ __ __ __ __
100 | * |
90 | * * |
80 | * * |
70 | @ * |
60 | @ * |
50 | * @ * |
40 | @ * |
30 | * @ @ @ * |
20 | |
10 | @ @ @ @ @ |
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
Flash frequency (Hertz)
code要素を、変数や引数にはvar要素を使います。順番に意味の無い箇条書きにはul要素を使います。
順番が意味を持つ箇条書きにはol要素を使います。
用語と説明の列挙にはdl要素を使います。
上付き文字はsup要素で示します。例えば E=MC2 など。環境によっては上手く伝わらないでしょう。
下付き文字はsub要素で示します。例えば TEX など。視覚系要素に頼らないウェブページ作りが大切です。
追加部分と削除部分を示すにはins要素とdel要素を使います。インライン要素としてしか使用できません(del要素)。ブロックレベル要素としてもインライン要素としても使用できます(ins要素)。
段落を丸ごと削除部分としてマークアップしてみました。(del要素)
段落を丸ごと追加部分としてマークアップしてみました。(ins要素)
入力フォームの配置にはform要素を使います。form要素の中にはテキストフィールドやボタンなどの部品を入れることができます。fieldset要素やlabel要素を用いると、より使い易いフォームを作れます。なお、以下のフォームはサンプルのため正しく機能しません。
表を示すにはtable要素を使います。表を上手く使うことで複雑な情報を整理することができますが、環境によっては逆効果になることもあります。言うなれば表は黒魔術です。かなりイケてるっぽい黒魔術
ですが、やっぱり所詮は黒魔術
です。レイアウトに使うのは論外です。
| 比較項目(thead要素中のth要素) | HTMLのテーブル | 高級木製テーブル |
|---|---|---|
| 比較結果(tfoot要素中のth要素) | 表として使いましょう(tfoot要素中のtd要素) | 家具として使いましょう(tfoot要素中のtd要素) |
| 時間割表(tbody要素中のth要素) | 作れます(tbody要素中のtd要素) | 作れません(tbody要素中のtd要素) |
| 顧客名簿 | 作れます | 作れません |
| 碁盤 | 置けません | 置けます |
| 恋人との夕食 | 出来ません | 出来ます |
| 徹甲弾 | 止められません | |
| 榴弾 | ||
| レイアウト | うちの子じゃありません | グッドデザイン賞受賞 |
| スタイルシートを使いましょう | お揃いの椅子もあります | |
画像を配置するにはimg要素を使います。img要素は空要素です。alt属性で代替テキスト(画像の説明ではない!)を指定するようにしましょう。
ruby要素を使うと
object要素は各種形式のデータを扱うことができる汎用の要素です。