ITコース HTML基礎 010_要素、属性

要素

開始タグ	要素の内容	終了タグ
`<h1>`	これは見出しです	`</h1>`
`<p>`	これは段落です	`</p>`
`<a href="https://www.zhaojian.net/" title="リンク">`	これはリンクです	`</a>`
`<img src="/images/logo.png" alt="これは画像です">`	これは画像です
`<br>`	改行

1
<!DOCTYPE html>
2
<html lang="en">
3

4
    <head>
5
        <meta charset="UTF-8" />
6
        <title>hello HTML</title>
7
    </head>
8

9
    <body>
10
        <h1>これは見出しです</h1>
11
        <p>
12
            これは段落です<br>
13
            <a href="https://www.zhaojian.net/" title="リンク">これはリンクです</a>
14
        </p>
15
        <img src="/images/logo.png" alt="これは画像です" />
16
        <br />
17
    </body>
18

19
</html>

[!まとめ]
HTML 要素 は 開始タグ で始まり、終了タグ で終わります
HTML 要素 の内容は開始タグと終了タグの間にあるものです
一部の HTML 要素 には 空のコンテンツ（empty content） があり、これらの内容がなく閉じタグもないタグは 空タグ または void 要素 と呼ばれ、特定の機能を実現しながらシンプルさと柔軟性を維持するために設計されています。例：<br>、<hr>、<img>、<meta>、<input> など
ほとんどの HTML 要素 は属性を持つことができます
HTML 要素 は一般に HTML タグ と呼ばれます
HTML 要素 は通常ペアで出現します。例：<p> と </p>
HTML 要素 は他の HTML タグ内にネストできます
HTML 要素 は大文字小文字を区別しませんが、小文字の使用が推奨されます

属性

HTML 要素は属性（Attribute）を持つことができ、要素に関する詳細情報を提供したり、要素の特定の動作を定義したりします。属性は常に開始タグで定義され、「属性名=属性値」の形式で出現することが多いです。例えば、リンク（a）要素は href 属性を使用してリンクのターゲットアドレスを指定できます：

例：

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

効果：

例の効果

上記のコードでは、a 要素の href 属性の値は "https://www.zhaojian.net" であり、リンクをクリックするとブラウザはその URL に移動します。

一般的な属性：

id：要素に一意の識別子を提供します。
class：要素に1つ以上のクラス名を提供し、異なる要素に同じクラス名を追加できます。
style：要素にインラインスタイルを提供します。
title：リンク要素にタイトルコンテンツを追加します。
alt：画像要素に説明コンテンツを追加します。

[!まとめ]
属性は常に名前=値のペアの形式で出現します。例：name="value"
属性と要素名（または複数の属性がある場合は前の属性）の間にスペースを入れます
属性値は常に引用符で囲む必要があり、ダブルクォートが最も一般的ですが、シングルクォートでも問題ありません
属性と属性値は大文字小文字を区別しませんが、小文字の使用が推奨されます

要素

属性

コメント