【HTML】codeタグでコンピュータコードを表示する方法を解説

codeタグHTML
書いてる人
あいりゅー

プログラミングを学びながら更新しています。
iPhone/iPad/Mac/Apple WatchなどのApple製品はこちらで主に更新しています。
麻雀の反省をひたすら掲載してるブログもやってます。

あいりゅーをフォローする

このページについて

このページではHTMLで使えるcodeの使い方を解説しています。

codeタグ

codeはコンピュータコードを表示するために使用されるタグです。定義といっても実際に何かのプログラムやスクリプトを埋め込んで機能を与えるわけでは無く、「プログラムやコンピュータコードで使用されているワードですよ」という説明のために使用します。

この関連タグとして、sampタグkbdタグ・varタグ・preタグの4つがあります。それらは個別で解説ページを作成してあるのでそちらを参照してください。

codeタグの書き方

codeは何かしらのプログラミング言語をブラウザで表示できるように書くことが多いため、divタグやらのブロック要素を持つタグの中で使うことが多いような感じです。それこそpreタグの中に入れて使うことで、インデントやスペースなどを維持したまま見せるっていう時にも使われます。

ソースコードをブラウザで表示したい時にはHTMLタグの<や>をエスケープ処理という書き方をする必要があるんですが、codeの中ではそれらの処理が不要となります。

<code><p>パラグラフを意味するpタグ</p></code>

この灰色の枠自体もpreタグとcodeの併用で作成されているため、<も>もそのまま表記されています。

codeはデフォルトでは見た目の変化はほぼありません。もっと変化を加えたい場合はCSSで色々と変更する事をお勧めします。

codeタグの属性

codeに固有の属性は無く、グローバル属性・イベント属性をサポートしています。

まとめ

codeはドキュメント内にプログラムのソースコード等を表示する時に使用します。通常はエスケープ処理が必要な文字などを入力した場合は問題なく扱うことが出来ます。

HTMLの基礎
HTMLってどんな言語?書き方やHTMLファイルの作成方法などを解説。
HTMLタグで押さえておきたいポイント3選
HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
HTMLタグと属性一覧
HTMLタグと属性の一覧です。
tableタグ生成ページ
tableタグの基本形を生成できるページです。
ulタグ・olタグ生成ページ
ulタグolタグの基本形を生成できるページです。
タイトルとURLをコピーしました