コード表示、注釈、リスト表示関連のタグ

この記事ではコード表示、注釈、リスト表示関連のタグについて説明します。

ソースコードや引用、注釈、リストのHTMLでの記述方法を説明しています。

YouTube Video

コード表示関連のタグ

<code>タグ

1Inline code example: <code>let x = 10;</code>

• <code>タグは、HTML文書内でコードやプログラムのスニペットを示すために使用されるインライン要素です。
• デフォルトで等幅フォントで表示され、コードの可読性を向上させます。

<pre>タグ

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>

• <pre>タグは、HTML文書内でテキストをそのままのフォーマットで表示するためのタグです。 このタグを使用すると、テキスト内の空白や改行がそのまま保持され、元のフォーマットが維持されます。 主に、プログラムコードや詩、テキストアートなど、フォーマットを保つ必要がある内容を表示するのに使われます。

    function hello() {
        console.log("Hello, world!");
    }
    

1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>

• <pre>タグ内では空白も保持されるため、閉じタグ前に空白があると、この例のように最後に空白行が表示されます。

<samp>タグ

1Sample system output: <samp>Error: Invalid input.</samp>

• <samp>タグは、コンピュータープログラムの出力を示すためのHTMLタグです。 プログラムやシステムからの出力やメッセージを示すのに使われます。

<kbd>タグ

1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>

• <kbd>タグは、ユーザーの入力を示すためのHTMLタグです。 ショートカットなどキーボードからの入力やコマンドの入力を示すのに使われます。

<var>タグ

1Variable example: <var>x</var> = 5;

• <var>タグは、プログラム内の変数や数式の変数を示すためのタグです。 変数名や数式内の変数を強調するために使われます。

引用などに使われるタグ

<blockquote>タグ

1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>

• <blockquote>タグは、長い引用や他のソースからのテキストを示すために使われ、通常はブロックレベルで表示されます。

<q>タグ

1This is a short quote: <q>Short quote example.</q>

• <q>タグは、短い引用を示すためのインライン要素です。 このタグを使うことで、他の文やテキストの一部を引用としてマークアップできます。 通常、<q>タグで囲まれたテキストは引用符で囲まれて表示されます。 <q>タグはネストして使用することもできます。 この場合、内側の引用には異なる種類の引用符が使われることが一般的です。

<cite>タグ

1Reference to a book: <cite>The Great Gatsby</cite>

• <cite>タグは、引用や参考文献の出典を示すためのインライン要素です。 主に、著作物や作品のタイトル、記事、論文、Webページ、書籍などの出典を示す際に使用されます。

<address>タグ

1<address>123 Main Street, Springfield, USA</address>

• <address>タグは、ドキュメントやセクションの作成者、または所有者に関する連絡先情報を表すために使用されます。 このタグの中には、通常、メールアドレス、電話番号、物理的な住所などが含まれます。

<time>タグ

1<time datetime="2024-12-04">December 4, 2024</time>

• <time>タグは、特定の時点、期間、または繰り返しの時間を表すために使用されます。 このタグの中には、日付や時刻を記述し、文書にセマンティックな意味を持たせることができます。

<data>タグ

1<data value="2024">Current Year</data>

• <data>タグは、人間が読めるコンテンツと機械が解釈できる値を関連付けるために使用されます。 このタグは、データをプログラムによって簡単に処理できる形でマークアップする場合に便利です。

<details>タグと<summary>タグ

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>

• <details>タグは、展開・折りたたみ可能なウィジェットを作成します。<summary>タグと一緒に使うことで、クリックして詳細を開く部分を設定でき、よく「続きを読む」などのインタラクティブな情報表示に利用されます。

リスト表示に使われるタグ

<ul>タグ

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

• 順序が必要ない箇条書きリストを作成するためのタグです。 リストの各項目は<li>タグで定義されます。デフォルトではリストの各項目の前に黒い点が表示されます。

<ol>タグ

1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>

• 順序付きの箇条書きリストを作成するためのタグです。 リストの各項目は<li>タグで定義されます。デフォルトでは数字が表示され、項目の順番が明示されます。

<dl>タグ

1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>

• 用語や定義、または名称と詳細をペアにしたリストを作成するためのタグです。 リストの項目は<dt>タグと<dd>タグで定義されます。<dt>タグに用語や名称を、<dd>タグに定義や説明を記述します。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video