これからWeb制作を学びたい初心者向けに、HTMLの基本から実践例まで丁寧に解説します。
この記事を読むだけで、HTMLの書き方とWebページ作成の基礎が理解できます。
この記事で学べること
- HTMLの基本構造と書き方
- よく使うタグ・属性の使い方
- リンク・画像・リスト・テーブルの基本
- 初心者が陥りやすいミスとその対策
- HTML学習の次のステップ
目次
1. HTMLとは何か？
HTML（HyperText Markup Language）は、Webページを作るための言語です。
文字・画像・リンク・表・リストなどの要素を「タグ」で囲むことでブラウザに表示を指示します。
ポイント：HTMLは構造を作る言語であり、デザイン（色・レイアウト）はCSS、動きはJavaScriptで担当します。
2. HTMLの基本構造
HTMLの基本的なひな形は以下の通りです：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>段落の文章</p>
</body>
</html>
- <!DOCTYPE html>：HTML5の宣言
- <html>：ページ全体のルートタグ
- <head>：タイトル・meta情報・CSSやJavaScriptの読み込み
- <body>：ページに表示される内容
3. よく使う基本タグ
- <h1>～<h6>：見出し
- <p>：段落
- <a href="">：リンク
- <img src="" alt="">：画像
- <ul>/<ol>/<li>：リスト（順序なし・順序あり）
- <strong>、<em>：強調表示
初心者向けポイント：
HTMLでは必ず開始タグと終了タグをペアで書くことが基本です（<br>など例外あり）。
4. リンクの書き方
リンクは<a>タグを使います：
<a href="https://example.com">公式サイト</a>
- href属性：リンク先URL
- リンクテキスト：ユーザーがクリックする部分
- target="_blank" を追加すると新しいタブで開く
5. 画像の表示
画像は<img>タグで表示します：
<img src="images/sample.jpg" alt="サンプル画像">
- src属性：画像ファイルの場所
- alt属性：画像が表示されない時の代替テキスト、SEOにも重要
- width / height でサイズ指定可能
6. リスト（箇条書き）の作り方
順序なしリスト：
<ul>
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ul>
順序ありリスト：
<ol>
<li>朝食</li>
<li>昼食</li>
<li>夕食</li>
</ol>
7. テーブルの書き方
表は<table>タグで作ります：
<table>
<tr><th>商品</th><th>価格</th></tr>
<tr><td>りんご</td><td>100円</td></tr>
<tr><td>みかん</td><td>80円</td></tr>
</table>
- <tr>：行
- <th>：見出しセル
- <td>：データセル
8. 初心者がやりがちなミスと注意点
- タグの閉じ忘れ（例：<p></p>）
- 画像パスやリンク先のURLの間違い
- 半角・全角の混同
- 属性値の引用符を忘れる
- 見た目だけでなく構造を意識して書く
コツ：HTMLは構造を意識することが最優先です。デザインは後からCSSで整えられます。
9. 練習用の簡単サンプルページ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML入門サンプル</title>
</head>
<body>
<h1>ようこそHTML入門</h1>
<p>これは段落です。</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>
<img src="images/sample.jpg" alt="サンプル画像">
<a href="https://example.com">公式サイト</a>
</body>
</html>
10. 関連記事リンク例（初心者向け）
まとめ：HTML入門のポイント
- HTMLは構造を作るための言語
- タグと属性の基本を理解する
- リンク・画像・リスト・テーブルを正しく使う
- 最初は簡単なサンプルで練習する
- 慣れたらCSSやJavaScriptと組み合わせてページを完成させる
この入門ガイドを参考に、まずは簡単なWebページを作ってみましょう。
HTMLの基礎を押さえれば、応用もスムーズに学べます。
