HTMLとは
HTML（HyperText Markup Language）は、Webページを作成するための基本的なマークアップ言語です。インターネット上で表示される文章や画像、リンク、フォームなどを定義し、ブラウザにそれらをどのように表示するかを伝える役割を持ちます。
HTMLの特徴
- ハイパーテキスト:
- テキスト間にリンク（ハイパーリンク）を埋め込み、別のページやコンテンツへ移動できる構造。
- 例:
<a href="https://example.com">リンクテキスト</a>。
- マークアップ言語:
- 文書の構造や意味を「タグ」で記述する。
- タグは「<」と「>」で囲まれ、要素（コンテンツ）を装飾や機能付けする。
- ブラウザで解釈される:
- Chrome、Safari、FirefoxなどのブラウザがHTMLを解釈し、ユーザーに視覚的なWebページを表示します。
HTMLの基本的な役割
- 文書構造を作る:
- 見出し、段落、リスト、テーブルなどの要素で文書の骨組みを定義。
- コンテンツを表示する:
- テキスト、画像、動画、音声などのマルチメディアコンテンツを配置。
- リンクを設定する:
- 他のページやリソースへの参照を埋め込む。
- フォームの作成:
- ユーザー入力（例: 検索ボックス、ボタン）を受け取るためのインターフェースを作成。
HTMLの基本的な役割
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML サンプル</title>
</head>
<body>
<h1>HTML サンプルページ</h1>
<h2>テーブルの例</h2>
<table>
<thead>
<tr>
<th>番号</th>
<th>名前</th>
<th>年齢</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>山田 太郎</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>鈴木 花子</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>田中 一郎</td>
<td>28</td>
</tr>
</tbody>
</table>
</body>
</html>
コードの詳細説明
<!DOCTYPE html>- 文書の型を指定します。この宣言により、HTML5で記述されていることをブラウザに伝えます。
<html lang="ja">- HTML文書全体を囲むルート要素です。
lang="ja"により、この文書が日本語で記述されていることを指定します。
<head>- ページのメタ情報を記述するセクション。
- ここでは文字コード、ビューポート設定、タイトルが定義されています。
<meta charset="UTF-8">- 文書の文字エンコーディングをUTF-8に設定します。これにより、日本語などの多言語を正しく表示できます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">- レスポンシブデザインをサポートするための設定。
- デバイスの幅に応じて適切にスケーリングされます。
<title>HTML サンプル</title>- Webページのタイトルを設定します。
- このタイトルはブラウザのタブや検索エンジンの結果に表示されます。
<body>- Webページのコンテンツを表示する部分。
<h1>HTML サンプルページ</h1>- ページのメインタイトルとして「HTML サンプルページ」を大きな文字で表示します。
<h2>テーブルの例</h2>- サブタイトルとして「テーブルの例」を表示します。
<table>- テーブル（表）を作成する要素。
<thead>- テーブルのヘッダー部分を定義します。
- ここでは、列名として「番号」「名前」「年齢」が指定されています。
<tr>- テーブルの行を表します。
- ヘッダー行やデータ行がそれぞれ
<tr>タグで囲まれています。
<th>- テーブルヘッダーセル（列名）を定義します。
- 太字で中央揃えで表示されるのが一般的です。
<tbody>- テーブルのデータ部分を定義します。
<td>- テーブルデータセルを定義します。
- 各セルに「番号」「名前」「年齢」のデータが配置されています。
コメント