HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのciteタグとは？作品タイトルをマークアップする方法と実装例

citeタグとは？

HTMLの<cite>タグは、創作物のタイトルを明示するために使用される要素です。対象となるのは、映画のタイトル、楽曲名、絵画の題名、書籍名など多岐にわたります。多くのブラウザでは、このタグで囲んだテキストはデフォルトで斜体（イタリック体）として表示されます。

それでは、citeタグの具体的な実装例を見ていきましょう。

実装例：書籍のタイトルを表示する

次のサンプルコードは、JavaとAngularJSに関するおすすめ書籍のタイトルを、citeタグでマークアップしたものです。

<!DOCTYPE html>
<html>
<body>
    <h1>Books</h1>
    <h2>Java</h2>
    <p>Refer the following books to learn Core Java:</p>
    <p><cite>Core Java: An Integrated Approach</cite> by R. Nageswara Rao.</p>
    <p><cite>Java - The Complete Reference</cite> by Herbert Schildt.</p>
    <h2>AngularJS</h2>
    <p>Refer the following books to learn AngularJS:</p>
    <p><cite>Pro AngularJS</cite> by Adam Freeman</p>
    <p><cite>Learning AngularJS: A Guide to AngularJS Development</cite> by Ken Williamson</p>
</body>
</html>

出力結果

HTMLのciteタグとは？作品タイトルをマークアップする方法と実装例

上記のコードを実行すると、各書籍のタイトルが斜体で表示されます。この例では、citeタグを使用して次のように作品（書籍）のタイトルを設定しています。

<h2>Java</h2>
<p>Refer the following books to learn Core Java:</p>
<p><cite>Core Java: An Integrated Approach</cite> by R. Nageswara Rao.</p>
<p><cite>Java - The Complete Reference</cite> by Herbert Schildt.</p>

書籍タイトルのマークアップ部分

ご覧のとおり、書籍のタイトルは<cite>タグで囲むだけで簡単に指定できます。

<cite>Core Java: An Integrated Approach</cite> by R. Nageswara Rao
  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"