Webサイトやブログを作る際、必ずと言っていいほど登場するのが「HTML」。
WordPressでも、知っておくだけで自由度が一気に上がります。
この記事では、初心者が最短で理解できるように、HTMLの超基本をわかりやすく解説します。
HTMLとは？
HTMLとは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための基本言語です。
HTML（HyperText Markup Language）は、Webページの骨組みとなる言語。
- 見出し
- 段落
- リンク
- 画像
など、ページの構造や意味をブラウザに伝える役割があります。
HTMLはタグ（< >）で書く
HTMLは「タグ」を使って表示する要素を指定します。
例：
<h1>タイトル</h1>
<p>文章です。</p>
<h1>：見出し開始</h1>：見出し終了
これが基本形です。
HTMLの基本構造（テンプレート）
最低限のひな形は以下の通りです。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文の段落です。</p>
</body>
</html>
<body>内が画面に表示される領域です。
よく使う基本タグ
見出し（hタグ）
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
h1〜h6まであり、SEOにも重要。
段落（p）
<p>文章を段落として表示します。</p>
太字（strong）
<strong>強調したい部分</strong>
検索エンジンにも「重要」と伝えられます。
改行（br）
文章1<br>文章2
画像を表示（img）
<img src="image.jpg" alt="画像の説明">
alt属性はSEO的にも重要です。
リンク（a）
<a href="https://example.com">外部サイトへ</a>
新しいタブで開く場合：
<a href="https://example.com" target="_blank">新しいタブで開く</a>
箇条書き（ul）
<ul>
<li>リンゴ</li>
<li>バナナ</li>
</ul>
番号付きリスト（ol）
<ol>
<li>ステップ1</li>
<li>ステップ2</li>
</ol>
ランキング記事で超便利。
表（table）
<table>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>モデルA</td>
<td>¥50,000</td>
</tr>
</table>
比較記事やスペック表に最適。
よく出る属性の意味
| 属性 | 用途 |
|---|---|
| href | リンク先URL |
| src | 画像の場所 |
| alt | 画像の説明文 |
| target | 新タブで開くなど |
HTMLだけではデザインできない
「色」「余白」「レイアウト」などのデザインはCSSの役割です。
例（CSS）：
p {
color: red;
}
→ 文字が赤く表示。
WordPressとHTMLの相性が良い理由
- 記事内で装飾自由度UP
- 比較表が作れる
- 広告ボタンが作れる
- 回遊率UPにつながる内部リンクが最適化
→ ブログ運営者なら知って損ありません。
SEOとの関係性
HTMLはSEO（検索上位表示）にも影響します。
特に重要：
- 見出し階層（h1→h2→h3…）
- strongタグ
- alt属性
- 表の構造
Googleはタグの意味を理解します。
初心者がやりがちなNG
- 見出しの乱用
- h1を複数使用
- alt空欄
- 意味なく太字連発
簡単な練習課題
以下をブラウザで保存→表示すると理解が深まります。
<!DOCTYPE html>
<html>
<head>
<title>練習ページ</title>
</head>
<body>
<h1>初めてのHTML！</h1>
<p>これはHTMLの練習ページです。</p>
<h2>好きな食べ物</h2>
<ul>
<li>寿司</li>
<li>ラーメン</li>
</ul>
<h2>外部リンク</h2>
<a href="https://www.google.com" target="_blank">Googleへ行く</a>
<h2>画像</h2>
<img src="https://placehold.jp/150x150.png" alt="ダミー画像">
</body>
</html>
HTML学習の最短ロードマップ
- 見出しと段落
- リンク
- 画像
- リスト
- 表
- 属性理解
この6つできれば、ブログで困らないレベルに！
よくある質問（FAQ）
Q：HTMLは覚えないとダメ？
A：全暗記不要。使いながら自然と覚えます。
Q：プログラミングですか？
A：構造記述言語。プログラムではありません。
Q：WordPress初心者でも使いますか？
A：かなり使います。理解していると強いです。
まとめ
| 学習ポイント | 状態 |
|---|---|
| 構造化言語 | ✅ |
| タグで意味づけ | ✅ |
| altがSEOに重要 | ✅ |
| 見出し階層は必須 | ✅ |
| CSSと組み合わせる | ✅ |
著者からのひとこと
HTMLを理解すると、「自分のブログがメキメキ強くなる」瞬間が必ず来ます。
始めたばかり頃が、一番伸びます！
まずは、今日は「リンク」「画像」「見出し」だけでもOK！
「触って慣れる」が最強の上達法です。
次の記事は「HTML5とは？初心者向けにわかりやすく解説」です。
