こんにちは、Tomaです。
前回はHTMLの歴史や基本の4大タグについてお話ししましたが、いかがでしたでしょうか？少しずつHTMLを触り始めると、「もっとこんな風に表示したいな」という欲が出てくるものですよね。
前回の内容をおさらいしたい方は、まずこちらの記事をチェックしてみてください。
知識量に自信がなくても大丈夫。僕がブログの微修正で使っている「HTMLの4大タグ」まとめ
今回はその続編として、知っているだけでブログの「見やすさ」と「プロっぽさ」が格段に上がる、一歩進んだ5つのタグをご紹介します。
ゲームの攻略データやアップデート情報の整理に役立つものばかりですので、ぜひ活用してみてください。
第4章：脱・初心者！表現の幅を広げる便利な5つのタグ
基本の4大タグに慣れてきたら、次はブログの構成をより論理的に、そして見やすく整えるタグに挑戦してみましょう。
1. リストタグ（ul / li）
箇条書きを作るためのタグです。装備のメリット・デメリットや、クエストの持ち物リストを作る際に重宝します。
<ul>
<li>火属性の武器</li>
<li>回復薬グレード</li>
</ul>【実際の表示イメージ】
- 火属性の武器
- 回復薬グレード
これを使うだけで、読者がパッと見て内容を理解できるスッキリした構成になります。
2. 強調タグ（strong）
文字を太字にするタグです。単に目立たせるだけでなく、検索エンジンに対しても「ここが重要なキーワードです」と伝える役割があります。
<p>このボスの弱点は<strong>氷属性</strong>です。</p>【実際の表示イメージ】
3. 表組みタグ（table / tr / td）
ステータス比較やアイテム一覧など、複雑なデータを整理して見せたい時に使います。
<table>
<tr><td>武器名</td><td>攻撃力</td></tr>
<tr><td>鉄の剣</td><td>100</td></tr>
</table>【実際の表示イメージ】
| 武器名 | 攻撃力 |
| 鉄の剣 | 100 |
少し記述が複雑ですが、表があるだけで記事の信頼感はグッと増します。
4. コード表示タグ（code）
文章の中で、ゲームのコマンド名やプログラムの一部を「コード」として区別して表示したい時に使います。
<p>実行するには<code>/start</code>と入力してください。</p>【実際の表示イメージ】
/startと入力してください。等幅フォントで表示されるため、地の文と混ざらずに読みやすくなります。
5. 引用タグ（blockquote）
公式サイトの解説文や、SNSでの反応などを転載する際に使います。情報の出所を明確にするためにも重要です。
<blockquote>
<p>「次回アップデートで新モンスターを追加予定……」</p>
</blockquote>【実際の表示イメージ】
「次回アップデートで新モンスターを追加予定……」
視覚的にも「引用であること」が分かりやすくなり、記事にメリハリがつきます。
まとめ
今回は、基本から一歩踏み込んだ5つの便利なタグを紹介しました。これらを組み合わせることで、ブログの読みやすさは劇的に向上します。
まずはリストタグや太字から、少しずつ自分の記事に取り入れてみてくださいね！
