マークアップ言語 - フレーズ要素_HTML/Xhtml_Web ページの制作

序章と前の章で、セマンティック タグの概念について少し触れましたが、タグを使用してファイルの意味を識別することは、タグで表示効果を設定するだけではありません。ただし、この目標は理想主義的すぎると思います。もちろん、目標を完全に達成できなくても、この目標に向けて努力することが価値があるというわけではありません。
実際の状況では、多くの場合、特定の設計目標を達成するために非セマンティック タグを追加する必要があります。その主な理由は、現在、一部の CSS ルールが一部のブラウザーで正しく表示されないためです。その結果、残念ながら、特定の設計目標を達成するには追加のタグを使用する必要があります。
心に留めておかなければならない重要な概念があります。それは、できる限りセマンティック構造を記述しようとすることで、同時に、標準のサポートが 100% ではありませんが、実際的な利点がもたらされるということです。重要なポイントを通過しました。Web 標準に準拠したメソッドを使用して Web ページを作成できるようにしましょう。場合によっては犠牲を払わなければなりませんが、より標準に準拠したタグを作成するようにすればするほど、今後の作業が容易になります。 表示効果VS構造ラベル
この章では、表示効果と構造タグの違いについて説明します。具体的には、 を使用して を置換する場合と、 を使用して を置換する場合の違いについて説明します。後で、他のいくつかのフレーズ要素と、標準に準拠した構造化されたタグ構文内でのそれらの重要性についても説明します。
太字のテキストが必要な場合、 を に置き換えることを勧めている人がいることを聞いたことがあるかもしれませんが、この場合、そのような置き換えが「なぜ」必要なのかについては詳しく説明されていません。他の Web デザイナーがタグの使用法を変更する必要があると聞いたからといって、変更することを期待するのは難しいです。 が よりも優れているのはなぜですか?
タグと タグを削除して タグと タグを置き換えることにはどのような利点がありますか?効果、この本のすべての例もこの概念に従うように努めています。 専門家の意見を見てみましょう
まず、HTML4.01 のフレーズ要素仕様で、W3C がテキスト フラグメント内に構造情報を追加できる および
フレーズ要素について説明します。意味は次のとおりです。
は強調を表します。
はより強い強調を表します。
ここで私たちが議論しているのは、強調の 2 つの異なるレベルです。たとえば、単語やフレーズをより大きく、より高いピッチで、より速く発音する必要があります。つまり、通常のテキスト コンテンツよりも強調する必要があります。
W3C はさらに次のように説明しました。
フレーズ要素の表示効果はブラウザによって異なります。一般的に、ビジュアル ブラウザでは のテキスト コンテンツが太字で表示されます。音声合成ソフトウェアでは、次のように合成パラメータを変更できます。内容に合わせて音量、音程、スピードなどを調整します。
ああ! 最後の文は特に興味深いものです。音声合成ソフトウェア (以前はスクリーン リーダーと呼ばれていました) は、強調する必要があるテキストを正しく処理します。これは確かに優れています。
対照的に、 または が表示効果から構造を分離することである場合は、 を使用するのが正しいです。単に太字または斜体のテキストを表示したい場合は、CSS を使用してください。他の例については、この章で後ほど説明します。
それぞれの違いを理解するために、2 つのロゴの例を見てみましょう。
今後の参考のための注文番号は次のとおりです。 6474-82071。方法 B
今後の参照のために注文番号 は: 6474-82071 厚くて美しいです。
この状況は、文内の特定のテキストをより重要に見せるために、 の代わりに を使用する完璧な例です。コンテンツの表現方法を変更します。音量を上げたり、ピッチやスピードを変更したりすることで、両方の目的を同時に達成できます。 だから何？
同様に、 を に置き換えると、単にテキスト内容を斜体で表示するだけでなく、同時に重要性を表現できます。 方法 A
It 時間はかかりませんでしたが、私道の雪かきには 3 時間かかりました 朝。方法 B
シャベルをやるのに 3 時間もかかりませんでした。 今朝の私の私道の強調。
前の例 (執筆時点ではこれが当てはまりました) では、「three」という単語を声に出して言っているかのように強調して見せることが私の意図でした。視覚的には、方法 B の方がほとんどのブラウザでうまく機能します。が斜体で表示され、スクリーン リーダーが音色、速度、または音量を適切に調整します。 太字か斜体だけでも大丈夫です
多くの場合、視覚的に表示する必要があるのは太字と斜体のテキスト効果のみであることに注意してください。つまり、サイドバーにリンクのリストがあり、すべてのリンクを同じ効果で表示したいとします。太字です (図 6-1)

視覚的な機能を超えてリンク コンテンツを強調するつもりはありません。これは、スクリーン リーダーやその他の非視覚的ブラウザーによってリンクが強調表示されないように、CSS を使用してリンクの外観を変更するのに適しています。
たとえば、太字のリンクをより速く、より大きく、より高いピッチで読み上げたいと思いますか?
図 6-1 の表示効果を実現するために、ID がサイドバーに設定されている

にリンク バーが配置されていると仮定します。これにより、CSS を使用してその中のリンクを指定できるようになります。 #sidebar は太字で表示されます。
#sidebar a{
font-weight:bold;
とてもシンプルなので、考えるだけで少しばかげているように感じますが、構造とプレゼンテーションを分離するのに役立つ素晴らしい方法です。それは大胆です。
同様に、斜体のテキストについて考えるときにも同様の考え方が適用できます。コンテンツを強調したくないが、単にテキストを斜体にしたい場合も、font-style 属性を使用して CSS を通じてこれらの状況を処理できます。
同じ #sidebar を例として使用してみましょう。たとえば、#sidebar 内のすべてのリンクを斜体にするには、次のように記述します。
#sidebar a{
フォントスタイル:斜体
}
これも非常に単純な概念ですが、構造化マークアップ構文の分野では、エフェクト タグを表示する代わりに CSS を使用して CCTV を処理するという状況を議論することが非常に重要だと思います。最も単純な解決策が最も簡単に無視される場合もあります。 。 太字と斜体を共有する
テキストコンテンツを太字と斜体で同時に表示する場合は、まず質問を考えなければならないと思います。どの程度強調するつもりですか。この質問に対する答えに基づいて選択します。適切なタグ: (強調) または (より強い強調) を選択し、テキストを選択したラベルでマークします。
たとえば、次の例では、当初は「fun」を太字と斜体で同時に表示する予定でしたが、最終的には
Building という単語を強調するために を使用することにしました。 Web 標準を備えたサイトは 楽しい!
ほとんどのブラウザでは、この単語を斜体でのみ表示します。太字と斜体の両方を使用するには、いくつかのオプションがあります。上記の文に同意していただければ幸いです。
1 つの方法は、通常の を「fun」の外側で囲み、 内のすべての を太字で表示することです。
Web 標準を使用してサイトを構築すると、 fun!
CSS は次のようになります:
em span{
font-weight:bold;
}
余分なタグを追加したため、明らかなセマンティック部分は良くありませんが、このメソッドはクラスを重視することに変わりはありません。
もう 1 つの方法は、 タグにクラスを指定し、CSS で太字の効果を追加することです。
サイトの構築 Web 標準を使用すると、楽しい!
CSS は次のようになります:
em.bold{
font-weight:bold;
を使用すると (テキストの内容を意味的に強調しながら) 斜体の効果が得られ、これに太字クラスを追加すると、 内のテキストが太字で表示されます。
同様の方法を使用して を変更することもできます。このとき、テキストの特定の段落を強調するときに斜体をデザインできます。 クラスに斜体効果を加え、元の太字効果である を組み合わせたものです。
マークアップ言語は次のようになります。
次のようなものを使用してサイトを構築します。 Web 標準は 楽しい です!
CSS は次のとおりです:
strong.italic{
font-style:italic;
#p# 概要
このトピックについて議論する必要があると思うので、これはこの本の中心的なテーマの 1 つの良い例です。コンテンツとプレゼンテーションを分離することは重要であり、有益です。また、 と を入れ替えることも重要です。タグ タグを構造的に同等のタグに形成すること (コンテンツを強調する場合) は、この種の分離目標を達成するのに役立つ簡単な方法です。
次に誰かが「はい、 の代わりに常に を使用するべきです」と言うのを聞いたら、この議論を裏付ける十分な理由があることになります。
視覚的な太字または斜体の効果を求める場合は、 または を使用するのが適しています。
この章ではこれまで、W3C が「フレーズ要素」と呼ぶものの一部である と に焦点を当ててきました。この部分では、さらにいくつかのフレーズ要素とその関係を見てみましょう。基準に合わせて。 フレーズ要素
と に加えて、W3C HTML 4.01 仕様のフレーズ要素の完全なリストには次のものが含まれます。 :他の引用や参照元の情報が含まれます:名詞の定義例を表します:コード部分を表します <samp>: プログラム、スクリプトの出力例を表します <kbd>: ユーザーが入力するテキストを表します <var>: プログラムの変数を表します <abbr>: 短縮名詞を表します (WWW、HTML、URL、Mass. など) <acronym>: 短縮名を表します (WAC、レーダーなど) <br><br>#p# <cite> のデザインから始めて、いくつかのタグを詳しく見てみましょう。 <br><cite> は議論する価値のある興味深い要素であり、単に表示効果を指定する <i> タグを置き換える場合に特に重要です。<cite> の目的は引用元を参照することです。歴史的には、たとえば、デザイナーは本のタイトルを斜体にするために <i> を使用することがありますが、この章の前半で、表示効果を指定するには CSS が最適なツールであることを学びました。 <br>出版物のタイトルを示すために <em> を使用することを提案することもできますが、書籍や他の出版物を引用する場合、それを強調するつもりはありません。つまり、書籍のタイトルを斜体で表示します (印刷物でも一般的です)。業界ではアンダースコアを使用しますが、明らかにリンクと混同される可能性があります)。 <br>その後、<cite> タグはこのジョブに合わせて作成されました。ほとんどのブラウザでは、デフォルトで <cite> タグ内のコンテンツが斜体で表示されます。また、同じ目的を達成するために CSS ルールを追加することもできます。 仕様 <br>W3C の <cite> タグの仕様は、HTML 4.01 仕様で簡単に説明されています。<br><cite>: 他の引用および参照元の情報が含まれています。 <br>これでほぼ把握できますが、<cite> にどのような情報を入れられるかは正確にはわかりませんが、「出典」という観点からは、少なくとも著者と出版物を入れることはできます。それ。 <br><cite> がどのように使用されるかを見てみましょう: <br>小説、<cite>スカーレット 手紙</cite>はピューリタンのボストンを舞台にしており、この本と同様に書かれた。 マサチューセッツ州セーラム <br><cite> タグを使用すると、タイトルが「The Scarlet Letter」になります。 ほとんどのブラウザでは斜体で表示されます。<br>cite が存在しない場合でもブラウザが正しい効果を表示できるように、次の非常に単純な CSS ルールを追加します。 {<br>フォント スタイル: イタリック体;<br>} <br>確認すると、書籍やその他の出版物のタイトルにある <i> タグが <cite> に置き換えられましたが、ほとんどのブラウザでは斜体の表示効果が得られ、ページのコンテンツがより構造化されました。もちろん、この構造は CSS でも使用できます。見てみましょう。 <cite> のスタイルを変更します。 <br>構造とセマンティクスを使用してページ コンテンツを構築することについて説明しますが、出版物にタグを付けることで、CSS を使用してスタイルを指定する (およびスタイルを変更する) ことも容易になります。 、実際のスタイルを完全に制御でき、必要に応じていつでも簡単に変更できます。 <br> ウェブサイト全体が <cite> タグを使用して、すべての <cite> 要素を斜体にすることを想定しています。無題の書籍出版物を斜体だけでなく、灰色の背景に赤い太字で表示します。 <br> もちろん、これはいくつかの CSS ルールを使用して迅速に実行でき、以前に <cite> でマークされたすべての参照のタイトルを即座に変更できます。これは、 <i> または <em> を使用した場合には不可能です。 <br>cite {<br>font-style: italic;<br>font-weight: 太字;<br>色: 赤;<br>背景色: #ddd;<br>} <br>図 6-2 は、ほとんどのブラウザの表示効果です。これは、後でサイト全体のデザイン スタイルを簡単に変更できるように、最初に構造化マークアップを記述するもう 1 つの良い例です。 -2. <cite> タグを使用し、CSS スタイル効果を使用して構造の可能性を解き放ちます。 <br>スタイルが使いやすいことに加えて、構造化マークアップはサーバー側のソフトウェアでも処理しやすく、興味深いアプリケーションをもたらします。<br>たとえば、ユーザビリティの提唱者 Mark など。 巡礼者は彼の個人ウェブサイト「Dive into 「マーク」では、多くの <cite> タグが使用されています。<cite> タグは、ブログ内で引用されている出版物をマークするために使用されるため、Mark は、すべての記事を解析してデータベースを作成し、参照された引用に基づいて作成するプログラムを作成できます。出典分類 (http://www.peintomark.com/archives/quotes/) <br>以下の図 6-3 は、私が独自に検索した結果です。Mark のブログで 2 つの関連記事を見つけることができます。これらはすべて <br> で「Dan Cederholm」をマークすることで実現されます。<p>図 6-3 「Dive into mark」で Mark Pilgrim によって作成された「投稿」 引用」の結果 (http://www.peintomark.org/archives/quotes/dan_cederholm/) <br>#p# と <br>また、<abbr> (短縮名詞) と <acronym> (短縮名) という 2 つのフレーズ要素を提案したいと思います。これらのタグを使用すると、すべてのユーザーが内容を理解できるようになります。ウェブページの使いやすさを向上させます。 <br>HTML4.01 仕様で W3C によって定義されている <abbr> と <acronym> の使用法をもう一度見てみましょう。 短縮名詞 (WWW、HTTP、URL、Mass. など) を表します。 短縮名詞 (WAC、レーダーなど) を表します。 <br>これらの要素は、適切な title 属性を使用すると、特定の名詞を理解できないユーザーに役立ちます。たとえば、「XHTML」の略語をマークする場合、次のように <abbr> タグを使用できます。 <br><abbr title="eXtensible HyperText Markup Language">XHTML</abbr> <br>ここで <abbr> を使用すると、スクリーン リーダーは全文を発音する代わりに略語 (X-H-T-M-L) を発音します。これに対して、<acronym> を使用すると、略語がスペルアウトされます。 <br><acronym> タグの使用例は次のとおりです: <br><acronym title="北​​大西洋条約 組織」> NATO</頭字語> <br/>2 つの聴覚 CSS ルールを使用することもできます。これらの違いを再度強調します。<br/>abbr {<br/>話す:綴り;<br/>}<br/><br/>頭字語 {<br/>話す:通常;<br/>} <br/> 聴覚スタイルを使用すると、作成者はスクリーン リーダー専用の読み上げ方法を指定できます。これにより、ページの聴覚表現を変更したり、マークアップ構造をガイドしたり、トーンや音色などを変更したりできるため、ページの読み上げ効果が高まります。視覚効果と一致するように一度定義します。 <br/>多くの人は、ページ内で繰り返し現れる略語や略語を一度だけ定義することを提案します。名詞が出現するたびに定義を繰り返すのはスペースの無駄であり、タイトル属性は出現する場合にのみ追加するのが最善であると考えています。これはある程度理にかなっていると思いますが、ユーザーがページ上の特定の段落に移動すると、ページの上部に展開された略語が表示されないため、定義の恩恵を受けることができない可能性があります。 <br/><abbr> および <acronym> で囲まれた名詞を定義するとき (およびその頻度) は、自分の判断で行ってください。 <br/>一部のブラウザでは、読者を視覚的に引きつけるために、<abbr> と <頭字語> の下に 1 ピクセルの点線の下枠が追加され、マウスがその上に移動すると、ブラウザは、title属性で指定された定義内容を「ツールチップ」の形式で表示します。 <br/>デフォルトで点線の下枠が表示されないブラウザの場合は、CSS <br/>abbr、頭字語 {<br/>border-bottom: を定義することで同じ効果を実現できます。 1 ピクセルの点線;<br/>カーソル: ヘルプ;<br/>} <br/>また、カーソルを「ヘルプ」(ほとんどのブラウザでサポート) に変える追加ルールを追加しました。これは、これがクリックできるリンクではなく、「ツールヒント」として表示される定義であることがユーザーにわかるようにするためです。 Newhouse、「Real World Style: CSS Help」)。 <br/>図 6-4 は、「XHTML」が定義テキストと点線の下端に展開された状態です。<br/> <br/>図 6-4. 一般的なブラウザの表示。 ;互換性の問題の例<br/>この本の執筆時点では、インターネットの Windows バージョンは、 Explorer は、<abbr> タグのスタイルの指定とツール ヒントの表示をまだサポートしていません。 IE/Win は <acronym> タグをサポートしています。これは、一部のデザイナーが短縮名詞や略語を扱う場合にのみ <acronym> を使用することを奨励しています。 <br/>これを実行したくなるかもしれませんが、現実世界の問題を解決するために間違った要素を使用するのは良いことではありません。この特定の問題については、仕様に従って名詞を表現し、正しくサポートされているブラウザーに任せることを好みます。 handle it<abbr&gt ;タグのスタイル まだ言及していないいくつかのフレーズ要素を簡単に見てみましょう。 <br/>#p# <コード> <br/><code> 要素は、XHTML ページ内にコード例を表示するように設計されています。たとえば、CSS の一部を共有したい場合は、次のように記述できます。 <br/><code><br/>#content {<br/>width: 80%;<br/>padding: 20px;<br/>background: blue;<br/>}<br/>
一般に、ビジュアル ブラウザでは のコンテンツが固定幅のセリフ フォントで表示されます。 CSS ルールを追加して、好みの表示方法を指定することもできます。 <br/>コード {<br/>フォントファミリー: Courier、セリフ;<br/>色: 赤;<br/>} <br/>このように、<code> の内容は赤い Courier フォントになります。 <br/><samp> 要素は、たとえば、作成中の Perl について説明する場合に、プログラムやスクリプトのサンプル出力を識別するために使用されます。 スクリプトが結果を出力するとき、次のようにマークします: <br/><p>スクリプトが実行されたとき、コマンドで 行に「<samp>script was」というメッセージが表示されます。 成功しました!</samp>。</p> <br/>ここでは、スクリプト出力例を <samp> で囲みます。同時に、<code> の場合と同様に、CSS ルールを使用してプログラム出力例に独自のスタイルを設定することもできます。 <var> <br/><samp> に関連して、<var> はプログラム内の変数と参照をマークするために使用されます。たとえば、XSLT スタイルシートについて説明する場合、次のように記述できます。 <br/><p>パラメータ <var>lastUpdated</var> を渡します。 main.xsl ファイルに。</p> <br/>多くのブラウザでは <var> タグの内容が斜体で表示されますが、斜体が気に入らない場合は、単純なルールを作成してデフォルト値を削除できます。CSS の font-style 属性を使用して変更できます。表示効果: <br/>var {<br/>フォントスタイル: 通常;<br/>フォントファミリー: Courier, serif;<br/>color: purple;<br/>} <br/>最後に、フレーズ要素を完成させる <kbd> 要素を見てみましょう。 <kbd> たとえば、指定したアクセスキーを使用してカーソルを検索ボックスに切り替える方法を説明する場合、<br/><kbd> 要素を使用できます。これ： <br/><p>フォーカスを検索入力フィールドにすばやく移動するには、Mac ユーザーは次のように入力します。 <kbd>コマンド 9</kbd>.</p> <br/>私が次に何を言おうとしているのか、おそらくおわかりでしょう。簡単な CSS ルールを使用すると、すべての <kbd> 要素を他のフレーズ要素と同じようにスタイル設定できます。 <br/>この章で見てきたことを振り返り、最初に、同じ表示効果で <strong> <em> が優れている理由を説明します。簡単にデザインする方法 太字や斜体の表示効果を設定するにはCSSを使うのが正しい方法です。 <br/> では、人物や出版物をマークするための <cite> から始まる他のフレーズ要素についても説明し、表示効果とデータ分析における構造化マークアップ構文の利点を示します。 <br/>また、追加の CSS 表示と発音ルールを使用して定義内容を強化しながら、Web ページの使いやすさを向上させるために、適切なコンポーネントで短縮名詞や略語をマークする方法も示します。最後に、残りのフレーズ要素、各要素を確認できます。これらはすべて、一般的なテキスト用に異なるプリセット スタイルを持っていますが、単一のページまたは Web サイト全体の単純な CSS ルールを迅速かつ簡単に設計して、これらの要素に必要な表示スタイルを指定することもできます。 <br/>この章には、多くの人にとってまったく馴染みのないラベルがいくつかありますが、中国で標準化が開始された後、悲しいことにそれは p と誤解されました。 css については、本当にどう説明したらよいのかわかりません。これを見た人が、標準化セマンティック文書への道標を正しく理解できることを願っています</p>。"></acronym></acronym></acronym></abbr></abbr></acronym></abbr></acronym></abbr></p></cite></cite></cite></em></i></cite></cite></cite></cite></cite></i></cite></cite></cite></cite></cite></cite></cite></em></i></cite></i></cite></cite></acronym></abbr></var></kbd></samp>