Webページの「構造」を書くための言語。見出し・段落・画像・リンクなど、ページに何がどの順で置かれるかを定義する。Webページはすべて最終的にHTMLでできている。
HTML(HyperText Markup Language)とは、Webページの構造を書くための言語です。「ここが見出し」「ここは段落」「ここに画像」「この文字はリンク」と、ページに何がどの順で置かれるかをタグと呼ばれる印で定義します。世界中のすべてのWebページは、最終的にHTMLでできています。
「家の骨組み・間取り図」です。どこに柱があり、どこが玄関で、どこがリビングか——建物の構造を決めるのがHTML。壁紙の色や家具の配置(見た目)はCSS、ドアの自動開閉(動き)はJavaScriptが担当します。3つセットで1軒の家(Webページ)が建ちます。
HTMLは「タグ」で文章を挟んで意味を与えます。
<h1>ページの大見出し</h1> — これは一番大きな見出し<p>本文の段落です。</p> — これは段落<a href="/glossary">用語集へ</a> — これはリンク<img src="photo.jpg"> — ここに画像を表示
覚えることは驚くほど少なく、よく使うタグは20個ほどです。
HTMLの構造が正しいと、ブラウザだけでなく検索エンジンにも内容が正しく伝わります。「大見出しはh1、段落はp」と意味どおりに書くことは、そのままSEOの土台になります。
初心者がつまずきやすいポイント
見た目を整えたくてHTMLだけで頑張ってしまうことです。「構造はHTML・見た目はCSS」という役割分担が大原則。文字を大きくしたいから見出しタグを使う、のような「見た目目的のタグ選び」は後で必ず苦労します。
API(エーピーアイ)
プログラム同士が情報をやり取りするための窓口。中の仕組みを知らなくても、決められた形で頼めば決められた形で返ってくる。
CSS(シーエスエス)
Webページの「見た目」を書くための言語。色・文字の大きさ・余白・配置・アニメーションまで、デザインに関わる部分をすべて担当する。構造のHTMLとセットで使う。
GitHub(ギットハブ)
プログラムのコードを保管・共有するためのWebサービス。変更の履歴がすべて残り、いつでも前の状態に戻せる。Vercelと連携すると、コードを送るだけで自動でサイトが更新される。
JavaScript(ジャバスクリプト)
Webページに「動き」を付けるためのプログラミング言語。ボタンを押したら開く、入力をチェックする、データを取ってきて表示するなど、ページ上のあらゆる動作を担当する。
Next.js(ネクストジェイエス)
Reactをベースにした、Webアプリ開発の人気フレームワーク。画面・ページ切り替え・サーバー処理までひと揃いで作れる。本サイトもNext.jsで動いている。
Supabase(スーパベース)
データベース・ログイン機能・ファイル保管をまとめて用意してくれるサービス。サーバーを自分で用意しなくても、会員制サイトの土台が作れる。