Webサイトを作るうえで必ず登場するのが HTML（エイチティーエムエル）。 「聞いたことはあるけど、何をするものなのかよくわからない…」という人も多いはず。 この記事では、HTMLの基本をやさしく解説します。
HTMLとは何か
HTMLとは HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ） の略で、 Webページの骨組み（構造）を作るための言語です。
- 文章の見出しをつける
- 画像を表示する
- リンクを貼る
- 表を作る
こういった「ページの構造」を決めるのがHTMLの役割です。
HTMLでできること
文章の構造を作る
HTMLでは、文章を「見出し」「段落」「リスト」などに分けて整理できます。
<h1>… 大見出し<p>… 段落<ul>… 箇条書きリスト
画像や動画を表示する
Webページに画像を表示したいときは <img> タグを使います。
YouTube動画を埋め込むことも可能です。
リンクを設定する
別のページや外部サイトへ移動するためのリンクは <a> タグで作ります。
HTMLの基本構造
HTMLファイルは、基本的に次のような構造になっています。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>ここに文章が入ります。</p>
</body>
</html>各部分の役割
<!DOCTYPE html>
HTML5で書かれたページであることを宣言する部分。
<html>
HTML文書全体を囲むタグ。
<head>
ページの設定情報（タイトルや文字コードなど）を記述。
<body>
実際に画面に表示される内容を書く部分。
HTMLタグとは？
HTMLでは、タグと呼ばれる記号を使ってページの構造を指定します。
例： <p>これは段落です</p>
<p>が開始タグ</p>が終了タグ- その間に文章を書く
タグは「この部分は段落ですよ」「ここは見出しですよ」とブラウザに伝えるための目印です。
よく使う基本タグ一覧
| タグ | 役割 |
|---|---|
| <h1>～<h6> | 見出し（数字が小さいほど重要） |
| <p> | 段落 |
| <a> | リンク |
| <img> | 画像表示 |
| <ul>/<ol> | 箇条書きリスト |
| <table> | 表の作成 |
このほかにもたくさんのタグがあります。
こちらについて詳しく知りたい方は以下の記事を参考にしてみてください。
HTMLとCSSの違い
HTMLは「構造」を作る言語ですが、 デザイン（色・大きさ・配置など）を担当するのは CSS です。
基本的には以下の3つが組み合わさってWebページが作られています。（別の近しい言語を使うこともありますが、今回は省略します。）
- HTML → ページの骨組み
- CSS → 色や形、文字の大きさなど見た目に関わる部分
- JavaScript → 動きや通信などの機能
まとめ
- HTMLはWebページの「骨組み」を作る言語
- タグを使って文章や画像の構造を指定する
- CSSやJavaScriptと組み合わせることで本格的なサイトが作れる
まずは基本タグを覚えて、簡単なページを作ってみるのがおすすめです。
