HTMLとは？
Webページの「土台」をつくる言語
HTML（エイチ・ティー・エム・エル）とは、Webページの構造や中身を作るための言語です。
たとえば次のようなものがHTMLで書かれています：
- 見出し（タイトル）
- 段落（文章）
- 画像やリンク
- ボタンやフォーム など
Webページを建物にたとえると、HTMLは「骨組みや間取り」を決める設計図のような存在です。
なぜHTMLから学ぶの？
HTMLは、すべてのWeb制作の出発点だからです。
この講座では、HTMLの基本的な書き方から始めて、CSSやJavaScriptへとステップアップできるように構成しています。この講座は、HTMLとCSSの基本を1つずつ丁寧に学んでいける「完全無料の学習コンテンツ」です。
学習のはじめ方
初めてWeb制作に触れる方でも安心して進められるように、手順やコード例をわかりやすく紹介しています。
まずは下記の準備を整えてから、課題01から順に トレーニングしてみましょう！
準備するもの
- パソコン（Windows または Mac）
- テキストエディタ（おすすめ：Visual Studio Code）
- Webブラウザ（Google Chrome / Microsoft Edge / Safariなど）
HTML基礎 課題一覧
HTMLで自己紹介ページを作ろう
見出しと強調を使ってコンテンツを整理しよう
リストタグを使って情報を整理しよう
画像と代替テキストを表示しよう
文字リンクと画像リンクを作ってみよう
表（テーブル）を作成してみよう
フォームの基本を作ってみよう
セマンティックなHTML構造を作ってみよう（header/main/footer）
記事とセクションを使って情報を整理しよう（section / article / aside）
記事ごとに独自のセマンティック構造を作ってみよう
ナビゲーションメニューを作ってみよう（header内 nav）
画像とキャプションをセットで扱ってみよう（figure / figcaption）
付録：HTMLの様々なmeta要素
付録：HTML要素辞典
付録：input要素の属性を理解しよう
最初のファイルを作ってみましょう
まずは、デスクトップなどに「web-practice」というフォルダを作成しましょう。
その中に、テキストエディタで新規ファイルを作成し、次のように保存してみてください。
- ファイル名：
index.html - 文字コード：UTF-8
- 拡張子は
.htmlにする（.txtにならないよう注意）
保存ができたら、そのファイルをダブルクリックすると、Webブラウザでページが開きます。
これでHTMLファイルの基本的な作成と表示の準備が完了です！
学習の進め方
下記のステップの順番に学習を進めましょう。
まずは、HTMLの入力練習です。タグ（要素や属性）を正確に入力できるように練習しましょう。
各ページには練習用のコード例や解説もありますので、少しずつ自分のペースで進めてください。
それでは、次のステップに進んでみましょう！
パソコンとエディタ（VSCodeなど）を用意し、学習用のフォルダを作成します。
順番に学んでいける構成になっています。
コードを手で打ち込む練習をしながら、構造を理解していきましょう。
各課題には解答例もあります。自分の書いたコードと見比べてみましょう。