概要

HTML（HyperText Markup Language）は、Webページの構造を作るための言語です。文章に「ここは見出し」「ここは段落」「ここはリンク」といった意味を付けることで、ブラウザがそれを理解し、適切に表示します。

HTMLとは何か？

HTMLは「マークアップ言語」と呼ばれ、プログラミング言語とは異なり、計算やデータ処理を行いません。代わりに、テキストに構造と意味を与える役割を持ちます。

HTMLの特徴

タグで構造を定義: <h1>、<p>、<a>などのタグを使って文書構造を表現
ブラウザで表示: Chrome、Safari、FirefoxなどのブラウザがHTMLを解釈して画面に表示
Webの基礎: すべてのWebページはHTMLで作られている
テキストベース: メモ帳でも編集可能なシンプルなテキストファイル

HTMLの基本構造

HTMLファイルは以下のような基本構造を持ちます：

サンプルコードを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私のWebページ</title>
</head>
<body>
    <h1>ようこそ</h1>
    <p>これは私のWebページです。</p>
    <a href="https://example.com">リンク</a>
</body>
</html>

各部分の説明

<!DOCTYPE html>: このファイルがHTML5であることを宣言
<html>: HTML文書全体を囲むルート要素
<head>: ページのメタ情報（タイトル、文字コードなど）
<body>: 実際に画面に表示される内容

よく使うHTMLタグ

タグ	用途	例
`<h1>〜<h6>`	見出し（h1が最も大きい）	`<h1>メインタイトル</h1>`
`<p>`	段落	`<p>これは段落です</p>`
`<a>`	リンク	`<a href="...">リンクテキスト</a>`
`<img>`	画像	`<img src="image.jpg" alt="説明">`
`<ul>, <ol>`	リスト	`<ul><li>項目</li></ul>`
`<div>`	ブロック要素のコンテナ	`<div>...</div>`

HTMLとCSS、JavaScriptの関係

Webページは通常、3つの技術を組み合わせて作られます：

HTML: 構造（骨組み）
CSS: 見た目（デザイン）
JavaScript: 動き（インタラクション）

例えるなら、HTMLは家の骨組み、CSSは壁紙や塗装、JavaScriptは自動ドアやエレベーターのような役割です。

HTML5とは？

HTML5は、HTMLの最新バージョンで、2014年に正式に勧告されました。動画や音声を簡単に埋め込める<video>や<audio>タグ、より意味のある構造を表現できる<header>、<footer>、<article>などのタグが追加されました。

実際にやってみよう：HTMLコードエディタ

下のエディタでHTMLコードを編集して、リアルタイムでプレビューを確認できます！

HTMLを書いてみよう

プレビュー

こんにちは！

これはHTMLで書かれた段落です。

💡 試してみよう：
• <h2>見出し</h2> で見出しを追加
• <strong>太字</strong> で文字を太くする
• <a href="https://example.com">リンク</a> でリンクを作成

用語	説明
CSS	HTMLで作った構造に色やレイアウトを付けるスタイルシート言語
JavaScript	Webページに動的な機能を追加するプログラミング言語
HTTP/HTTPS	HTMLファイルをブラウザに送信するための通信プロトコル

概要