Edition for Web Developers — Last Updated 19 September 2024
この仕様は、パンくずナビゲーションメニューを記述する機械可読な方法を提供しない。著者は単に段落で一連のリンクを使用するよう推奨される。nav
要素は、ナビゲーションブロックであるとして、これらの段落を含むセクションをマークするために使用できる。
次の例において、現在のページは2つの経路を経由して到達できる。
< nav >
< p >
< a href = "/" > Main</ a > ▸
< a href = "/products/" > Products</ a > ▸
< a href = "/products/dishwashers/" > Dishwashers</ a > ▸
< a > Second hand</ a >
</ p >
< p >
< a href = "/" > Main</ a > ▸
< a href = "/second-hand/" > Second hand</ a > ▸
< a > Dishwashers</ a >
</ p >
</ nav >
この仕様は、ページのグループ(タグクラウドとも呼ばれる)に適用するキーワードのリストをマークアップするための特別な任意のマークアップを定義しない。一般に著者は、非表示およびスタイルシートを使って見栄え効果をだす明示的なインラインのカウントをもつul
要素を使用してこのようなリストをマークアップする、またはSVGを使用することのいずれかを推奨される。
ここで、3つのタグは短いタグクラウドに含まれる:
< style >
. tag-cloud > li > span { display : none ; }
. tag-cloud > li { display : inline ; }
. tag-cloud-1 { font-size : 0.7 em ; }
. tag-cloud-2 { font-size : 0.9 em ; }
. tag-cloud-3 { font-size : 1.1 em ; }
. tag-cloud-4 { font-size : 1.3 em ; }
. tag-cloud-5 { font-size : 1.5 em ; }
@ media speech {
. tag-cloud > li > span { display : inline }
}
</ style >
...
< ul class = "tag-cloud" >
< li class = "tag-cloud-4" >< a title = "28 instances" href = "/t/apple" > apple</ a > < span > (popular)</ span >
< li class = "tag-cloud-2" >< a title = "6 instances" href = "/t/kiwi" > kiwi</ a > < span > (rare)</ span >
< li class = "tag-cloud-5" >< a title = "41 instances" href = "/t/pear" > pear</ a > < span > (very popular)</ span >
</ ul >
それぞれのタグに関する実際の頻度は、title
属性を用いて説明する。CSSスタイルシートは、異なるサイズの単語のクラウドにマークアップを変換するために提供されるが、CSSをサポートしないか視覚系でないユーザーエージェントのために、頻度によって様々なタグを分類するためにマークアップは"(popular)"または"(rare)"のような注釈を含む。したがって、すべてのユーザーが情報の恩恵を受けることが可能となる。
順序は特に重要でないので、(ol
よりむしろ)ul
要素が使用される。リストは実際にはアルファベット順である一方で、タグの長さによって並べられる場合に同じ情報を伝えるだろう。
ページ自体に適用するタグを表すものではないため、tag
のrel
キーワードはこれらa
要素で使用されない。これらはタグ自体をリスト化するインデックスの単なる一部である。
この仕様は、ミーティング議事録、チャット記録、脚本における対話、インスタントメッセージログ、および様々なプレーヤーが交代で談話する他の状況を満たし、会話をマークアップするための特定の要素を定義しない。
代わりに、著者はp
要素や句読点を使って会話をマークアップすることを推奨する。スタイリング目的のために話者を印をつける必要がある著者は、span
またはb
を使用するよう推奨される。i
要素に包まれたテキストを含む段落は、ト書きをマークアップするために使用できる。
この例は、AbbotとCostelloの有名なスケッチ、Who's on firstからの抽出物を用いてこれを示す:
< p > Costello: Look, you gotta first baseman?
< p > Abbott: Certainly.
< p > Costello: Who's playing first?
< p > Abbott: That's right.
< p > Costello becomes exasperated.
< p > Costello: When you pay off the first baseman every month, who gets the money?
< p > Abbott: Every dollar of it.
以下の抜粋は、インスタントメッセージの会話ログが、行ごとのUnixタイムスタンプを提供するためにdata
要素を使用して、マークアップする方法を示す。タイムスタンプは、time
要素が対応していない形式で提供されており、よってdata
要素が(すなわち、Unixのtime_t
のタイムスタンプ)代わりに使用されることに注意されたい。著者は、time
要素でサポートされる日付と時刻のいずれかを使用してデータをマークアップすることを望んだが、その要素は、data
の代わりに使用されていたかもしれない。データ分析ツールがページの著者と調整することなく、明確にタイムスタンプを検出することを可能にするので、これは都合がよいかもしれない。
< p > < data value = "1319898155" > 14:22</ data > < b > egof</ b > I'm not that nerdy, I've only seen 30% of the star trek episodes
< p > < data value = "1319898192" > 14:23</ data > < b > kaj</ b > if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
< p > < data value = "1319898200" > 14:23</ data > < b > egof</ b > it's unarguably
< p > < data value = "1319898228" > 14:23</ data > < i > * kaj blinks</ i >
< p > < data value = "1319898260" > 14:24</ data > < b > kaj</ b > you are not helping your case
HTMLは、グラフをマークアップするための良い方法を持たないので、ゲーム由来の対話的な会話の記述をマークアップするのはより困難である。この例は、会話の各時点での可能な応答を列挙するためにdl
要素を用いて1つの可能な規則を示す。考慮すべきもう1つのオプションは、DOTファイル形式で会話を記述するものであり、文書内に配置するSVG画像として結果を出力している。[DOT]
< p > Next, you meet a fisher. You can say one of several greetings:
< dl >
< dt > "Hello there!"
< dd >
< p > She responds with "Hello, how may I help you?"; you can respond with:
< dl >
< dt > "I would like to buy a fish."
< dd > < p > She sells you a fish and the conversation finishes.
< dt > "Can I borrow your boat?"
< dd >
< p > She is surprised and asks "What are you offering in return?".
< dl >
< dt > "Five gold." (if you have enough)
< dt > "Ten gold." (if you have enough)
< dt > "Fifteen gold." (if you have enough)
< dd > < p > She lends you her boat. The conversation ends.
< dt > "A fish." (if you have one)
< dt > "A newspaper." (if you have one)
< dt > "A pebble." (if you have one)
< dd > < p > "No thanks", she replies. Your conversation options
at this point are the same as they were after asking to borrow
her boat, minus any options you've suggested before.
</ dl >
</ dd >
</ dl >
</ dd >
< dt > "Vote for me in the next election!"
< dd > < p > She turns away. The conversation finishes.
< dt > "Madam, are you aware that your fish are running away?"
< dd >
< p > She looks at you skeptically and says "Fish cannot run, miss".
< dl >
< dt > "You got me!"
< dd > < p > The fisher sighs and the conversation ends.
< dt > "Only kidding."
< dd > < p > "Good one!" she retorts. Your conversation options at this
point are the same as those following "Hello there!" above.
< dt > "Oh, then what are they doing?"
< dd > < p > She looks at her fish, giving you an opportunity to steal
her boat, which you do. The conversation ends.
</ dl >
</ dd >
</ dl >
一部のゲームにおいて、会話はより単純である。各文字は単に、彼らがいうことを固定された行の集合を持つ。この例において、ゲームのFAQ/チュートリアルは、各文字の既知の可能な応答の一部を示す:
< section >
< h1 > Dialogue</ h1 >
< p >< small > Some characters repeat their lines in order each time you interact
with them, others randomly pick from amongst their lines. Those who respond in
order have numbered entries in the lists below.</ small >
< h2 > The Shopkeeper</ h2 >
< ul >
< li > How may I help you?
< li > Fresh apples!
< li > A loaf of bread for madam?
</ ul >
< h2 > The pilot</ h2 >
< p > Before the accident:
< ul >
< li > I'm about to fly out, sorry!
< li > Sorry, I'm just waiting for flight clearance and then I'll be off!
</ ul >
< p > After the accident:
< ol >
< li > I'm about to fly out, sorry!
< li > Ok, I'm not leaving right now, my plane is being cleaned.
< li > Ok, it's not being cleaned, it needs a minor repair first.
< li > Ok, ok, stop bothering me!Truth is, I had a crash.
</ ol >
< h2 > Clan Leader</ h2 >
< p > During the first clan meeting:
< ul >
< li > Hey, have you seen my daughter?I bet she's up to something nefarious again...
< li > Nice weather we're having today, eh?
< li > The name is Bailey, Jeff Bailey. How can I help you today?
< li > A glass of water?Fresh from the well!
</ ul >
< p > After the earthquake:
< ol >
< li > Everyone is safe in the shelter, we just have to put out the fire!
< li > I'll go and tell the fire brigade, you keep hosing it down!
</ ol >
</ section >
HTMLは、脚注をマークアップするための専用のメカニズムを持たない。ここで提案する選択肢がある。
短いインライン注釈の場合、title
属性を使用することができる。
この例において、対話の2つの部分は、title
属性を使用して脚注のようなコンテンツで注釈付けされる。
< p > < b > Customer</ b > : Hello! I wish to register a complaint. Hello. Miss?
< p > < b > Shopkeeper</ b > : < span title = "Colloquial pronunciation of 'What do you'"
> Watcha</ span > mean, miss?
< p > < b > Customer</ b > : Uh, I'm sorry, I have a cold. I wish to make a complaint.
< p > < b > Shopkeeper</ b > : Sorry, < span title = "This is, of course, a lie." > we're
closing for lunch</ span > .
不幸なことに、title
属性に依存することは、多くのユーザーエージェントがこの仕様で要求されるようなアクセス可能な方法で属性を公開しないため、現在推奨されない(たとえば、ツールチップを出現させるマウスなどのポインティングデバイスが必要になり、これはモダンな携帯端末やタブレットをもつ人のような、キーボードのみのユーザーとタッチのみのユーザーを締め出す)。
title
属性が使用される場合、属性をもつ要素への読者の関心を引き出すためにCSSを使用することができる。
たとえば、次のCSSは、title
属性を持つ要素の下に破線を置く。
[title] { border-bottom : thin dashed; }
より長い注釈の場合、後で文書の要素を指すよう、a
要素が使用されるべきである。リンクのコンテンツが角括弧内の数字であるのが慣例である。
この例において、対話における脚注は、ダイアログの下の段落にリンクする。段落は、ユーザーが脚注の場所に戻ることができるように、対話へ相互にリンクする。
< p > Announcer: Number 16: The < i > hand</ i > .
< p > Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why < em > do</ em > you
contradict people?
< p > Norman: I don't. < sup >< a href = "#fn1" id = "r1" > [1]</ a ></ sup >
< p > Interviewer: You told me you did!
...
< section >
< p id = "fn1" >< a href = "#r1" > [1]</ a > This is, naturally, a lie,
but paradoxically if it were true he could not say so without
contradicting the interviewer and thus making it false.</ p >
</ section >
サイドノートに対して、単に特定の単語や文よりもテキストのセクション全体に適用されるより長い注釈の場合、aside
要素を使用すべきである。
この例では、サイドバーはそれにいくつかの文脈を与えて、対話の後に与えられる。
< p > < span class = "speaker" > Customer</ span > : I will not buy this record, it is scratched.
< p > < span class = "speaker" > Shopkeeper</ span > : I'm sorry?
< p > < span class = "speaker" > Customer</ span > : I will not buy this record, it is scratched.
< p > < span class = "speaker" > Shopkeeper</ span > : No no no, this's'a tobacconist's.
< aside >
< p > In 1970, the British Empire lay in ruins, and foreign
nationalists frequented the streets — many of them Hungarians
(not the streets — the foreign nationals). Sadly, Alexander
Yalt has been publishing incompetently-written phrase books.
</ aside >
図または表について、脚注は該当figcaption
またはcaption
要素、または文の周囲に含めることができる。
この例において、表は、文に与えられる脚注を持つセルを持つ。figure
要素は、表とその脚注の組み合わせを単一の凡例に与えるために使用される。
< figure >
< figcaption > Table 1. Alternative activities for knights.</ figcaption >
< table >
< tr >
< th > Activity
< th > Location
< th > Cost
< tr >
< td > Dance
< td > Wherever possible
< td > £0< sup >< a href = "#fn1" > 1</ a ></ sup >
< tr >
< td > Routines, chorus scenes< sup >< a href = "#fn2" > 2</ a ></ sup >
< td > Undisclosed
< td > Undisclosed
< tr >
< td > Dining< sup >< a href = "#fn3" > 3</ a ></ sup >
< td > Camelot
< td > Cost of ham, jam, and spam< sup >< a href = "#fn4" > 4</ a ></ sup >
</ table >
< p id = "fn1" > 1. Assumed.</ p >
< p id = "fn2" > 2. Footwork impeccable.</ p >
< p id = "fn3" > 3. Quality described as "well".</ p >
< p id = "fn4" > 4. A lot.</ p >
</ figure >
要素は、次のいずれかである場合に実際に無効であるといわれる。
button
要素input
要素select
要素textarea
要素disabled
属性を持つoptgroup
要素option
要素fieldset
要素この定義は、どの要素がフォーカス可能であるか、ならびにどの要素が:enabled
および:disabled
擬似クラスと一致するかを決定するために使用される。