Html-phrase-elements

提供：Dev Guides
移動先:案内、検索

HTML-フレーズタグ

フレーズタグは特定の目的のために設計されていますが、 <b>、<i>、<pre> 、 <tt> などの他の基本的なタグと同様の方法で表示されます。 。 この章では、すべての重要なフレーズタグについて説明しますので、それらを1つずつ見ていきましょう。

強調されたテキスト

*<em> ... </em>* 要素内に表示されるものはすべて強調テキストとして表示されます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>

   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>

</html>

これは、次の結果を生成します-

マークされたテキスト

*<mark> ... </mark>* 要素内に表示されるものはすべて、黄色のインクでマークされて表示されます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>

   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>

</html>

これは、次の結果を生成します-

強いテキスト

*<strong> ... </strong>* 要素内に表示されるものはすべて、重要なテキストとして表示されます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>

   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>

</html>

これは、次の結果を生成します-

テキストの略語

開始<abbr>および終了</abbr>タグ内にテキストを配置することにより、テキストを短縮できます。 存在する場合、title属性にはこの完全な説明が含まれている必要があります。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>

   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>

</html>

これは、次の結果を生成します-

頭字語要素

*<acronym>* 要素を使用すると、<acronym>タグと</acronym>タグの間のテキストが頭字語であることを示すことができます。

現在、主要なブラウザは<acronym>要素のコンテンツの外観を変更しません。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>

   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>

</html>

これは、次の結果を生成します-

テキストの方向

*<bdo> ... </bdo>* 要素は双方向オーバーライドを表し、現在のテキストの方向をオーバーライドするために使用されます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>

これは、次の結果を生成します-

特別な用語

*<dfn> ... </dfn>* 要素（またはHTML定義要素）を使用すると、特別な用語を導入することを指定できます。 使用法は、段落の中の斜体の単語に似ています。

通常、キー用語を初めて導入するときは<dfn>要素を使用します。 最新のブラウザは、<dfn>要素のコンテンツを斜体フォントで表示します。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>

   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>

</html>

これは、次の結果を生成します-

引用テキスト

別のソースからのパッセージを引用する場合は、 <blockquote> …​ </blockquote> タグの間に挿入する必要があります。

<blockquote>要素内のテキストは、通常、周囲のテキストの左端および右端からインデントされ、イタリック体のフォントを使用する場合があります。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>

   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>

</html>

これは、次の結果を生成します-

短い引用

*<q> ... </q>* 要素は、文内に二重引用符を追加する場合に使用されます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>

   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>

</html>

これは、次の結果を生成します-

テキスト引用

テキストを引用する場合は、ソースを開始 <cite> タグと終了 </cite> タグの間に配置することを示すことができます

印刷出版物で予想されるように、<cite>要素のコンテンツはデフォルトで斜体のテキストで表示されます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Citations Example</title>
   </head>

   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>

</html>

これは、次の結果を生成します-

コンピューターコード

Webページに表示されるプログラミングコードは、 <code> …​ </code> タグ内に配置する必要があります。 通常、<code>要素のコンテンツは、ほとんどのプログラミング本のコードと同様に、等幅フォントで表示されます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Computer Code Example</title>
   </head>

   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>

</html>

これは、次の結果を生成します-

キーボードテキスト

コンピューターについて話しているときに、読者にテキストを入力するように指示したい場合は、この例のように <kbd> …​ </kbd> 要素を使用して、入力する内容を示すことができます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Keyboard Text Example</title>
   </head>

   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>

</html>

これは、次の結果を生成します-

プログラミング変数

通常、この要素は <pre> および <code> 要素と組み合わせて使用​​され、その要素の内容が変数であることを示します。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Variable Text Example</title>
   </head>

   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>

</html>

これは、次の結果を生成します-

プログラム出力

*<samp> ... </samp>* 要素は、プログラムやスクリプトなどからのサンプル出力を示します。 繰り返しますが、主にプログラミングやコーディングの概念を文書化するときに使用されます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Program Output Example</title>
   </head>

   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>

</html>

これは、次の結果を生成します-

住所テキスト

*<address> ... </address>* 要素は、任意のアドレスを含めるために使用されます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Address Example</title>
   </head>

   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>

</html>

これは、次の結果を生成します-

「https://www.finddevguides.com/index.php?title=Html-phrase-elements&oldid=18774」から取得
Powered by MediaWiki