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

HTMLのcodeタグとは?使い方とサンプルコードを解説

<code>タグは、HTML文書内でソースコードを整形して表示するための要素です。たとえば、Javaなどのプログラムコードを読みやすい形でWebページ上に表示したい場合に、この<code>要素を活用します。

<code>要素で囲まれたテキストは、デフォルトで等幅フォント(モノスペースフォント)で表示されるため、コードが見やすくなります。それでは、実際の実装例を見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h1>Header Files</h1>
<h2>C++</h2>
<code>
    #include <iostream>
</code>
<h2>C</h2>
<code>
    #include <stdio>
</code>
</body>
</html>

出力結果

HTMLのcodeタグとは?使い方とサンプルコードを解説

上記の例では、Webページ上にC言語およびC++のヘッダーファイル(インクルード文)という短いコード断片を表示しています。

<h2>C++</h2>
<code>
    #include <iostream>
</code>

ヘッダーファイルの記述は<code>要素の中に配置されており、この要素によってコードとして適切に整形されて表示されます。

<code>
    #include <iostream>
</code>

codeタグを使う際のポイント

<code>タグは単体でも使用できますが、複数行にわたるコードを表示する場合は、改行やインデントをそのまま保持できる<pre>タグと組み合わせるのが一般的です。また、<kbd>(キーボード入力)や<samp>(実行結果の出力)など、用途に応じた専用タグも用意されているため、表示する内容に合わせて使い分けると、より読みやすいマークアップが可能になります。

  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"