HTMLはハイパーテキストマークアップ言語（HyperText Markup Language）の略で、ウェブページを構築するための標準的な記述規則です。ブラウザがこのマークアップを解釈し、ユーザーに可視化されたページとして表示します。
HTMLの構成要素
- HTML：ページ構造の定義
- CSS：ページの外観デザイン
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<!-- ここにコンテンツを記述 -->
</body>
</html>
DOCTYPE宣言 ドキュメントの解析モードを指定する重要な宣言です。主に以下の2つのモードがあります：
- Quirks Mode：旧式ブラウザの互換性優先
- Strict Mode：W3C標準に準拠した表示
head要素の構成
- メタ情報：エンコーディングやキーワードの設定
- タイトル：ブラウザタブに表示される文字列
- 外部リソース：CSSやJavaScriptの読み込み
<!-- キーワードの設定例 -->
<meta name="keywords" content="ウェブ開発,HTML5,CSS3">
<!-- 外部CSSの読み込み -->
<link rel="stylesheet" href="style.css">
body要素の基本タグ
- 段落タグ：<p>...
- 改行タグ：<br>
- リンクタグ：<a href="...">リンクテキスト</a>
- ヘッダータグ：<h1>から<h6>まで
フォーム要素
<form action="/submit" method="post">
<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username"><br>
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="送信">
</form>
リストとテーブル
- 無順序リスト：<ul><li>アイテム</li></ul>
- 順序リスト：<ol><li>アイテム</li></ol>
- 定義リスト：<dl><dt>用語</dt><dd>説明</dd></dl>
| 列1 | 列2 |
|---|---|
| データ1 | データ2 |
特殊文字の扱い HTMLで直接表示したい特殊文字は以下のようにエスケープします：
- <：<
- >：>
- &：&
セマンティックタグの活用 HTML5では<header>,<nav>,<section>,<article>,<footer>などの意味を持ったタグが追加され、ページ構造の明確化が可能になりました。