HTML入門
初級Webページの骨格を作るマークアップ言語を学びましょう
全10レッスン
1→2→3→4→5→6→7→8→9→10→
HTMLの基本構造
DOCTYPE、html、head、bodyの基本
見出しと段落
h1-h6、p、リスト要素
リンクと画像
a、img、パスの指定
テーブル
table、tr、td、thで表を作る
フォーム
input、textarea、select、バリデーション
セマンティックHTML
header、nav、main、article、footer
メタデータとSEO
meta、title、OGP、検索エンジン対策
アクセシビリティ
aria属性、alt、役割と配慮
iframe・埋め込み
YouTube、地図、外部コンテンツの埋め込み
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 / 4HTMLの正式名称は?
自由に試してみよう
下のエディタで自由にHTMLを書いてみましょう。「実行」ボタンを押すと結果が表示されます。
index.html
プレビュー