正しいHTMLタグで作る！かんたんなブログ風Webページを作成して学んだこと

弊社で毎月開催されている社内講習会の課題として、「正しいタグの使い方を意識したHTML・CSSコーディング」に取り組みました。
今回はその課題で制作した、かんたんなブログ風のWebページをベースに意識したポイントや学んだことをまとめてみます。

課題の概要

PC

SP

Designed by Freepik

全体の構造を意味に沿って以下のように整理しました。

<header>ページのナビゲーションやロゴなど
<nav>ページ内リンク（SELF INTRODUCTION・BLOG）
<main>ページの主な内容
<footer>著作権情報など

これにより、スクリーンリーダーや検索エンジンにもわかりやすい構造になります。

ブログ記事部分には以下のようにタグを使い分けました。

<section class="blog-wrapper">
  <article>
    <h3>朝焼けの魔法</h3>
    ...
  </article>
</section>

記事単位の独立性を保つため、articleの中にはh3、time、p、ulなどの要素を使っています。

ブログ記事の日付は装飾ではなく、意味のある情報としてtimeタグでマークアップしました。

<time datetime="2024-04-06">2025.04.06</time>

このように書くことで、機械にも「これは日付だよ」と伝えることができます。

見た目が同じでも、HTMLタグの意味や構造を意識するかどうかで大きな差が出ると実感しました。

特にsectionとarticleの違いなど、普段あまり意識していなかったタグを調べながら使うことで理解が深まりました。

タグを正しく使うことで、SEOやアクセシビリティにも強くなるので、初心者こそ意識したいポイントだと思います。

今後もこういった「見た目」だけでなく「意味を意識したマークアップ」でサイト制作に取り組んでいきます。