HTML入門

初級

Webページの骨格を作るマークアップ言語を学びましょう

全10レッスン

HTMLの基本構造

DOCTYPE、html、head、bodyの基本

→2

見出しと段落

h1-h6、p、リスト要素

→3

リンクと画像

a、img、パスの指定

→4

テーブル

table、tr、td、thで表を作る

→5

フォーム

input、textarea、select、バリデーション

→6

セマンティックHTML

header、nav、main、article、footer

→7

メタデータとSEO

meta、title、OGP、検索エンジン対策

→8

アクセシビリティ

aria属性、alt、役割と配慮

→9

iframe・埋め込み

YouTube、地図、外部コンテンツの埋め込み

→10

HTML総合演習

学んだ知識でWebページを作ろう

→

HTMLとは？

HTML（HyperText Markup Language）は、 Webページの構造と内容を定義するための言語です。ブラウザに「ここは見出し」「ここは段落」「ここは画像」といった情報を伝える「タグ」を使って書きます。

HTMLはプログラミング言語ではなく「マークアップ言語」です。計算やロジックを書くのではなく、コンテンツに意味（セマンティクス）を与えることが役割です。

📄

構造を定義

見出し、段落、リストなどの要素でページの骨格を作る

🔗

コンテンツを配置

テキスト、画像、リンク、動画などを埋め込む

🌐

すべてのWebの基盤

あらゆるWebサイトはHTMLから始まる

HTMLの基本構造

HTMLファイルには必ず以下の構造が必要です。エディタでコードを編集して、プレビューの変化を確認しましょう。

index.html

プレビュー

見出しと段落

<h1>〜<h6>で見出し、<p>で段落を作ります。

index.html

プレビュー

リンクと画像

<a>タグでリンク、<img>タグで画像を表示します。

index.html

プレビュー

確認クイズ

1 / 4

HTMLの正式名称は？

自由に試してみよう

下のエディタで自由にHTMLを書いてみましょう。「実行」ボタンを押すと結果が表示されます。

index.html

プレビュー