2024-09-26

HTMLタグの意味と使い方

HTML

HTML（HyperText Markup Language）は、ウェブページの構造を作成するための基本的なマークアップ言語です。HTMLでは、タグ（タグ）は要素を囲んで、その内容や構造をブラウザに指示します。この記事では、基本的なHTMLタグの意味と使い方について説明します。

HTMLタグは、テキストや画像、リンク、フォームなど、さまざまな要素をページ上に表示するために使われます。各タグは、開くタグ（<タグ名>）と閉じるタグ（</タグ名>）で囲まれ、その中にコンテンツを配置します。タグによっては閉じる必要のないものもあります。

HTMLの基本構造

まず、HTML文書の基本的な構造を見てみましょう。すべてのHTML文書は、以下のような構造を持っています。

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8">
<title>HTMLの基本構造</title>
</head>
<body>
<h1>これは見出しです</h1>
<p>これは段落です。</p>
</body>
</html>

構造の説明

<!DOCTYPE html>:文書がHTML5で書かれていることを宣言します。
<html>: HTML文書のルート要素です。すべてのコンテンツはこの中に含まれます。
<head>: メタデータやCSS、JavaScriptのリンク、文書のタイトルなど、ページの情報を含む部分です。
<meta charset=”UTF-8″>: 文書の文字エンコーディングを指定します。この場合、UTF-8エンコーディングが使われます。
<title>: ブラウザのタブや検索エンジンで表示されるページのタイトルを指定します。
<body>: 実際のページ内容（テキスト、画像、リンクなど）が含まれる部分です。

基本的なHTMLタグ

見出しタグ（`<h1>` 〜 `<h6>`）

見出しタグは、文章の構造を定義するために使われます。<h1>が最も重要な見出しで、<h6>が最も重要度の低い見出しです。

<h1>これは最も重要な見出しです</h1>
<h2>これは2番目に重要な見出しです</h2>
<h3>これは3番目に重要な見出しです</h3>
<h4>これは4番目に重要な見出しです</h4>
<h5>これは5番目に重要な見出しです</h5>
<h6>これは6番目に重要な見出しです</h6>

段落タグ（`<p>`）

段落を作成するために使用します。

<p>これは段落です。段落は文章を区切るために使われます。</p>

リンクタグ（`<a>`）

他のページや場所へのリンクを作成します。href属性にリンク先のURLを指定します。

<a href="https://www.example.com">例のウェブサイト</a>

画像タグ（`<img>`）

画像を表示するために使用します。src属性に画像ファイルのURLを指定し、alt属性で代替テキストを指定します。閉じタグは不要です。

<img src="image.jpg" alt="サンプル画像">

リストタグ（`<ul>`, `<ol>`, `<li>`）

リストを作成するために使用します。<ul>は順序なしリスト、<ol>は順序ありリストを定義します。各リスト項目は<li>で囲まれます。

<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>

<ol>
<li>最初の項目</li>
<li>2番目の項目</li>
<li>3番目の項目</li>
</ol>

ディブタグ（`<div>`）

ロックレベルの要素を作成し、ページ内のコンテンツを区分けするために使われます。スタイルやスクリプトを適用するために便利です。

<div>
<p>この段落は div 内にあります。</p>
</div>

スパンタグ(`<span>`)

インラインレベルの要素を作成するためのタグです。特定の部分にスタイルやスクリプトを適用するために使われます。

<p>この文章の<span style="color:red;">一部</span>だけ赤色にします。</p>

テーブルタグ（`<table>`, `<tr>`, `<td>`, `<th>`）

表を作成するためのタグです。行は<tr>、列は<td>で定義します。表のヘッダーは<th>タグを使います。

<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr> 
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>

フォームタグ(`<form>`)

ユーザーからの入力を受け付けるフォームを作成します。入力フィールドやボタンを含めることができます。

<form action="/submit" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<input type="submit" value="送信">
</form>

改行タグ(`<br>`)

改行を挿入します。閉じタグは不要です。

<p>文章の途中で<br>改行を入れます。</p>

HTMLのコメント（``）

HTML文書内にコメントを挿入することができます。コメントはブラウザには表示されず、コードの説明やメモに使います。

<!-- これはコメントです -->
<p>この段落は表示されます。</p>

HTMLタグの基本ルール

HTMLタグを使ってウェブページを作成する際には、いくつかの基本ルールに従う必要があります。これらのルールを守ることで、構造的に正しいHTMLを作成し、ブラウザや検索エンジンに正しく解釈してもらうことができます。以下に、HTMLタグの基本ルールを説明します。

タグは常に山括弧（`< >`）で囲む

HTMLタグは山括弧（<タグ名>）で始まり、終了タグは山括弧の前にスラッシュ（</タグ名>）を付けて書きます。
例: <p>タグを使って段落を始め、</p>で終了します。

<p>これは段落です。</p>

開始タグと終了タグのペアを使用する

多くのHTMLタグは、開始タグと終了タグのペアで構成されています。開始タグで要素を開き、終了タグで閉じます。
例: <h1>タイトル</h1>, <div>コンテンツ</div>
一部のタグ（セルフクロージングタグ）は終了タグが不要です（例: <img>, <br>, <meta>など）。

要素の入れ子（ネスト）に注意する

HTMLタグは入れ子（ネスト）構造で書き、終了タグの順序を守る必要があります。開始タグと終了タグが正しく対応していないと、HTMLの構造が壊れる可能性があります。

例（正しいネスト）:

<div>
<p>これは正しい入れ子の例です。</p>
</div>

例（間違ったネスト）:

<div>
<p>これは間違った入れ子の例です。</div>
</p>

属性（Attributes）の使用

タグに追加情報を付加するために属性を使用します。属性は開始タグの中に記述し、属性名=”値”の形式で書きます。属性値は基本的に引用符で囲みます（シングルクォートも可）。
例: <a href=”https://example.com”>リンク</a>, <img src=”image.jpg” alt=”説明文”>

DOCTYPE宣言

HTML文書の最初に<!DOCTYPE html>を記述して、文書がHTML5で書かれていることを宣言します。これにより、ブラウザは適切なレンダリングモードで表示します。

<!DOCTYPE html>
<html>
<!-- 他のHTML内容がここに入ります --> 
</html>

ルート要素 `<html>` と `<body>`、`<head>`

HTML文書は<html>タグで全体を囲み、<head>と<body>の二つの主要な部分に分けられます。
<head>にはメタ情報やタイトル、スタイルシートのリンクなどが含まれ、<body>にはページの主なコンテンツが含まれます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>基本的なHTML構造</title>
  </head>
  <body>
    <p>これはページの内容です。</p>
  </body>
</html>

コメントの使用

HTML文書にコメントを追加して、コードの説明やメモを残すことができます。コメントはブラウザには表示されません。
コメントは  の形式で書きます。

<!-- これはコメントです。ブラウザには表示されません。 -->
<p>表示される段落</p>

特殊文字のエスケープ

特殊文字（例: <, >, &）はHTMLでは特別な意味を持つため、表示したい場合はエスケープシーケンスを使用します。

例:

< → <
> → >
& → &

HTMLのインデントと可読性

タグの階層構造に応じて、インデント（スペースやタブ）を使用してコードを整理すると、読みやすくなります。

<div>
  <ul>
    <li>アイテム1</li>
    <li>アイテム2</li>
  </ul>
</div>

大文字と小文字の使い方

HTML5では、タグ名や属性名は小文字で記述するのが推奨されています（例: <div>, <input>）。ただし、HTMLは大文字小文字を区別しません。
例: <DIV> と <div> は同じものとして扱われますが、慣習的に <div> を使います。

まとめ

HTMLタグはウェブページの構造を定義するための基本要素であり、タグの正しい使い方を理解することが重要です。この記事では、HTMLの基本構造といくつかの基本タグの使い方を紹介しました。これらのタグを使いこなすことで、シンプルで効果的なウェブページを作成することができます。

さらなる学習として、CSSやJavaScriptを組み合わせて、より豊かでインタラクティブなウェブページを作成する方法を学ぶことをおすすめします。

HTML & CSS

記事一覧へ

HTMLタグの意味と使い方

HTMLの基本構造

基本的なHTMLタグ

見出しタグ（<h1> 〜 <h6>）

段落タグ（<p>）

リンクタグ（<a>）

画像タグ（<img>）

リストタグ（<ul>, <ol>, <li>）

ディブタグ（<div>）

スパンタグ(<span>)

テーブルタグ（<table>, <tr>, <td>, <th>）

フォームタグ(<form>)

改行タグ(<br>)

HTMLのコメント（）