正しいHTMLタグで作る！かんたんなブログ風Webページを作成して学んだこと
弊社で毎月開催されている社内講習会の課題として、「正しいタグの使い方を意識したHTML・CSSコーディング」に取り組みました。
今回はその課題で制作した、かんたんなブログ風のWebページをベースに意識したポイントや学んだことをまとめてみます。
課題の概要
- テーマ：「正しいHTMLタグを使う」
- 目的：意味的に正しいマークアップを意識し、保守性・アクセシビリティの高いWebページを作る練習
- 制作物：写真ブログ風の1ページ構成サイト
今回作成したもの
PC
SP
Designed by Freepik
意識した「正しいタグの使い方」
1.header/nav/footerを使った構造的なレイアウト
全体の構造を意味に沿って以下のように整理しました。
<header>ページのナビゲーションやロゴなど
<nav>ページ内リンク（SELF INTRODUCTION・BLOG）
<main>ページの主な内容
<footer>著作権情報など
これにより、スクリーンリーダーや検索エンジンにもわかりやすい構造になります。
2. sectionとarticleの使い分け
ブログ記事部分には以下のようにタグを使い分けました。
- section：セクションのまとまり（自己紹介エリアやブログ全体）
- article：ひとつひとつのブログ投稿（独立性のある内容）
<section class="blog-wrapper">
<article>
<h3>朝焼けの魔法</h3>
...
</article>
</section>
記事単位の独立性を保つため、articleの中にはh3、time、p、ulなどの要素を使っています。
3. time要素で日付の意味を明示
ブログ記事の日付は装飾ではなく、意味のある情報としてtimeタグでマークアップしました。
<time datetime="2024-04-06">2025.04.06</time>
このように書くことで、機械にも「これは日付だよ」と伝えることができます。
最後に
見た目が同じでも、HTMLタグの意味や構造を意識するかどうかで大きな差が出ると実感しました。
特にsectionとarticleの違いなど、普段あまり意識していなかったタグを調べながら使うことで理解が深まりました。
タグを正しく使うことで、SEOやアクセシビリティにも強くなるので、初心者こそ意識したいポイントだと思います。
今後もこういった「見た目」だけでなく「意味を意識したマークアップ」でサイト制作に取り組んでいきます。