In 'n' Out

知識を取り込み、そして発信する

HTMLタグの基本

HTMLタグの役割と書き方の基礎

HTMLは、ブラウザに文章の構造や意味を伝えるためのマークアップ言語です。
タグを使って「ここは見出し」「ここは段落」のように役割を指定することで、ページの内容を正しく整理できます。
このページでは、タグの基本的な書き方や文書の構造を理解するために必要な基礎事項を確認します。

タグとは

HTMLのタグは、文章の区切りや意味を示すための記号です。
見出しや段落、リンク、画像など、すべての要素はタグによって表現されます。
ブラウザはタグを読み取ることで、文書を適切な構造として表示します。

構文

<タグ名>内容</タグ名>

この形式で書かれたひとまとまりを「要素」と呼びます。
多くのタグは開始タグと終了タグの組み合わせで内容を囲む形で使います。

タグの基本構造

HTMLの要素は開始タグで始まり、終了タグで閉じます。 終了タグではタグ名の前にスラッシュ(/)を付けるのがルールです。 この組み合わせによって、文書内の構造が定義されます。

構文

<開始タグ>内容</終了タグ>

タグの中に記述する内容が、その要素の表示部分になります。
ブラウザはこの構造を読み取り、段落や見出しとして整形して表示します。

空要素

HTMLの中には、内容を持たず単独で成立するタグがあります。
これらは「空要素」と呼ばれ、終了タグを書きません。

構文

<空要素>

空要素は「内容を囲まないタグ」であり、改行や画像の挿入などに使われます。
空要素かどうかはタグごとに決まっているため覚えていく必要があります。

コメント

コメントはブラウザに表示されないメモのようなもので、コードの説明や区切りを残すために使われます。
ページの見た目には影響せず、編集時の理解を助けます。

構文

<!-- コメント -->

コメントは複数行にしてもよく、コードの整理に役立ちます。
1人でコーディングしている際は使う機会がそれほどありませんが、どこに何があるかを解釈する目安となります。
複数人での作業ではどこまでコーディングしたか、追加するコンテンツなど、メモ代わりに使用することが多々あります。

属性の書き方

HTMLのタグには「属性」と呼ばれる追加情報を付けることができます。
属性はタグの動作や情報を補足するためのもので、多くのタグで使用されます。
ここでは書き方だけを確認します。

構文

<開始タグ 属性名="属性値">内容</終了タグ>
<空要素 属性名="属性値">

属性はタグによって持つものと持たないものがあります。
具体的にどの属性が使えるかは、各タグの説明で詳しく扱います。