HTML タグに類似: strong および em、q、cite、blockquote

XHTML には似た機能を持つタグがいくつかあります。もちろん、ここでの類似性とは意味の類似性を指すため、これらの類似タグの使い方が明確でない人も多くいます。そこで、今日のトピックでは、類似タグを分解し、各タグの目的を明確にします。以前、strong と em の違いについてすでに説明しました。 strongとemに加えて、q、citeなどの類似のタグもあります。
XHTML には似た機能を持つタグがいくつかあります。もちろん、ここでの類似性とは意味の類似性を指すため、これらの類似タグの使い方が明確でない人も多くいます。そこで、今日のトピックでは、類似タグを分解し、各タグの目的を明確にします。以前、strong と em の違いについてすでに説明しました。 strong や em の他に、q、cite、blockquote などの類似のタグもあります。これら3つはいずれも参照のカテゴリーに属しますが、いくつか違いがあります。1つずつ説明していきましょう。
<q></q> の場合、q の機能は非ブロック要素を引用すること、つまり段落を形成できない内容を引用することです。引用するのは誰かが言った文であったり、文書の抜粋などです。ここでは「文」であることが特徴として明らかです。また、q だけでは段落は生成されません。 q 自体にはスタイルがなく、ほとんどのブラウザでは目立つようにデフォルトのスタイルを設定していません。しかし、CSS を使用すると、一般的なコンテンツと区別することができます。 q タグには、cite という非常に重要な属性がもう 1 つあります。 cite 属性値は主に、引用されたコンテンツの出典を示すか、オンラインアドレスを提供します。
<q cite="http://andymao.com/andy/post/92.html">このコンテンツを読むと、段落の詳細をより深く理解できます</q>
これら 2 つのラベルは混同されやすいため、q を p と書かないように特に注意してください。
実は前回の記事で cite についてお話ししました。その記事では、「このラベルは文書のタイトルと名前のみを示します。このラベルは本の最後にある参考文献のカタログに少し似ており、脚注のようなものでもあります」と書きました。では、it と q の違いは何でしょうか?実のところ、これは非常に簡単に理解できます。q はコンテンツを表示し、cite はコンテンツを述べている人物または書籍の名前を表示します。 Cite と q は一緒に使用されることが多いです。例えば：
<cite>魯迅</cite>はこう言っています: <q>もともと地上には道がなかったが、歩く人が増えるにつれて道が現れた</q>。このサイトでさらに多くの HTML マークアップコンテンツを表示します。
では、blockquote とそれらの違いは何でしょうか? Blockquote はブロック引用であり、XHTML では任意のタグを含めることができます。上記の質問と引用はそれほど包括的ではありません。 Blockquote は、1 つ以上の段落を引用する必要がある場合に使用します。ブラウザは通常、引用されたコンテンツを通常の段落と区別するためにデフォルトでインデントします。もちろん、CSS スタイルを通じて区別の形式を変更することもできます。
blockquote には cite 属性があり、q と同様に引用元を示すために使用されます。オンラインドキュメントの URL を含めることができます。
XHTML タグには pre というタグもあります。このタグは Dreamweaver では「フォーマット」と呼ばれています。以前 Dreamweaver を使用していたときは、これが何に使われるのかよくわかりませんでした。 pre は通常ソースコードを表示するために使用され、<p> などの段落を区切ることができるタグをサポートしていないことが、今になって明らかになりました。表示されるコンテンツをラップする必要がある場合は、コードを必要とせずにソースファイル内でラップできます。同時に、pre はすべてのスペースを保持して表示します。
一般的に言えば、pre は現在ソースコードを表示するために使用されており、code の目的と似ています。違いは、pre はブロックレベルであるのに対し、code はインラインである点です。簡単に言えば、pre には複数行のコンテンツを含めることができますが、code には短い文または数文字のみが含まれます。
ここで説明されている内容は完全には説明できないため、ドキュメントを読んだ後に実際に試してみて、その特別な機能を自分で発見する必要があります。友人の中には、CSS に関する知識がほしいという人もいました。ここで私の執筆意図を伝えたいと思います。まだテーブルレイアウトを廃止していない友人たちが、まずは全体の状況に影響を与えないいくつかのフォームを使用できるように、段階的に進めていきたいと思います。 CSS が関係すると互換性の問題が発生する可能性があるため、ここではまずドキュメントについて説明し、その後、全体のレイアウトに影響を与えない CSS の知識を追加します。段階的に深く理解することで、読者は最終的にテーブルレイアウトから標準レイアウトに自然に移行できるようになります。もちろん、すでに独学でこのステップを完了している友人がいる場合は、「その他の基準」の欄で私と連絡を取ることができます。

<<: フレックスマルチカラムレイアウトで発生する問題と解決策の詳細な説明

>>: SQL グループ化により重複を削除し、他のフィールドで並べ替える