【2025年】HTMLの書き方｜サイトパフォーマンス・アクセシビリティ向上で品質UP

2025年3月4日2025年3月7日

Web制作に携わっていると、進化し続ける技術を常々インプットするのが大変。
コーディングに関しても油断していると置いてけぼりになりやすく、今の時代に適さないマークアップになりかねません。

本記事では、HTMLに焦点を置いて「このようにコードを書いてほしい！」という内容をまとめております。

さとみ

「こんな書き方があるよ」ということを伝えたかったので、コードの解説は少なめです。
具体的な仕様などを知りたい方は、参考記事などググっていただけると幸いです。

なお、タイトルの「アクセシビリティ」について詳しく知りたい方は、別記事にて解説しておりますのでぜひご覧いただければと思います。

<img>と<iframe>要素にLazy loading（遅延読み込み）で表示速度を改善

<img>と<iframe>にloading="lazy"を付けると、遅延読み込みになりページの読み込み時間を短縮します。

<img src="/img/example.jpg" width="300" height="250" alt="" loading="lazy">
<iframe src="/example.html" width="800" height="650" loading="lazy"></iframe>

width属性とheight属性が必須
- aspect-ratioでも代用可
- レイアウトシフト対策になる（※下記の記事参照）
WordPressでは<img>や<iframe>にloading="lazy"が自動的に追加される仕様になっている
メインビジュアルなど、ページ上部に表示されている画像には使用しない
- 単純にページの表示速度が遅くなるため、すぐにロードするloading="eager"を設定

SVG画像の読み込むなら、コードコピペではなくSVGスプライト

SVGのコードをそのままHTMLに貼り付けず、SVGを<symbol>で定義し<use>で呼び出します。

なお、<img>でSVGを読み込むとアニメーションが動かないのでご注意ください。

<!-- 呼び出し元 -->
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon" viewBox="0 0 24 24">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
  </symbol>
</svg>

<!-- 呼び出し先 -->
<svg>
  <use href="#icon"></use>
</svg>

呼び出し元の<svg>にはstyle="display: none;"を記述する
- 外部CSSでもOK
<symbol>のid="◯◯"と<use>のhref="#◯◯"は名称を揃える
コードの記述量が少なくなるのでHTMLの可読性UP
同じ画像を使い回すのに便利
<svg>のwidth/height/fillなどの属性はCSSに記述すると管理しやすい
- 属性として記述しても問題なし（扱いやすいほうでOK）
- 下部のサンプルコードでは、CSSにてwidthとaspect-ratioで実装
複数のSVGを提示したい場合はdefsで囲う
fillやstrokeはcurrentColorにするとcolorプロパティで色指定できる（※下部のサンプルコード参照）

SVG 2でxlink:hrefが非推奨になり、hrefに置き換えられました。

JSファイルの読み込みにCDNは使わない

CDNとは？

『Content Delivery Network』の略で、インターネット経由でファイルを配信する仕組みのことです。
ファイルをダウンロードする必要がない代わりに、ネット環境がない場所では動きません。

ブラウザにキャッシュされることによってサイト表示の高速化が期待できるというメリットがあります。

CDNでJSプラグインを読み込むのはお勧めしません。
プラグインのバージョンアップにより仕様が変更されたり、提供自体が終了したら動かなくなるリスクがあります。

個人的にはNPMでの導入が良いと考えてますが、プラグインファイルをダウンロード→サーバー内に置いて読み込むという方法を使うなら、下記コードのようにパスを指定しましょう。

<script src="/js/swiper.js"></script>

容量が大きいファイルにはrel=”preload”で表示速度を改善

CSSやJSほか、画像や動画など表示速度が遅いファイルは<link>にrel="preload"を指定して事前に読み込むことで表示速度を改善します。

<head>
  ...

  <link rel="preload" href="/css/style.css" as="style">
  <link rel="preload" href="/js/main.js" as="script">
  <link rel="preload" href="/img/example.webp" as="image" type="image/webp">

  <link rel="stylesheet" href="/css/style.css">
</head>

<body>
  <picture>
    <source srcset="/img/example.webp" type="image/webp" width="600" height="450">
    <img src="/img/example.jpg" width="600" height="450" alt="">
  </picture>

  <script src="/js/main.js"></script>
</body>

見出し（<h>要素系）のグループ化には<hgroup>要素

見出しに複数の要素（主題+副題）がある場合は<hgroup>でグルーピングします。

<hgroup>
  <h2>私たちについて</h2>
  <p>about</p>
</hgroup>

<hgroup>の仕様で<p>→<h2>の順番でも許容されている
<hgroup>に含んでいい見出し要素の数は1つまでなので、<h2>+<h3>のように「複数の見出し要素をグルーピングする」というマークアップは非推奨

レスポンシブによる画像切り替えなら<picture>要素

画面幅（レスポンシブ）に応じて画像を切り替えるときは<picture>を使います。

CSSのdisplay: none;などで画像を非表示にしてもサーバー側は画像を読み込むことに加え、Googleはしっかり認識するので、サイトパフォーマンス的にもSEO的にもマイナスになります。

<picture>
  <!-- ブラウザ幅最大～1024pxまでexample_lg.webpの画像を表示 -->
  <source media="(min-width:1024px)" srcset="/img/example_lg.webp" type="image/webp" width="1920" height="700">
  <!-- ブラウザ幅1023px～768pxまでexample_md.jpgの画像を表示 -->
  <source media="(min-width:768px)" srcset="/img/example_md.jpg" width="1200" height="500">
  <!-- ブラウザ幅767px～最小までexample_sm.jpgを表示 -->
  <img src="/img/example_sm.jpg" width="750" height="400" alt="" loading="lazy">
</picture>

<source>は上から順番に読み込まれる
- いずれの<source>にも条件が合致しない場合に、<img>の画像が表示される
media属性のmin-widthはmax-widthでも可
WebPなど未対応ブラウザがある画像形式を入れ込みたいときはtype属性を入れる
- 他形式（jpg/png/gif/svgなど）はほぼ全ブラウザで対応しているので書かなくてOK

<dl>要素の直下に<div>を置いてCSSによる装飾効率UP

<dl>直下に<div>を置き、さらにその直下に<dt>+<dd>を置きます。

少し前までは<dl>直下に<dt>+<dd>でしたが、最新のWHATWGの仕様では<dl>直下に<div>を置けるようになっています。
なお、<div>を置かなくても仕様的には問題ありませんが、スタイリングのしやすさが圧倒的に変わります。

<dl>
  <div>
    <dt>項目名</dt>
    <dd>ここにdtの説明が入ります。</dd>
  </div>
  <div>
    <dt>項目名</dt>
    <dd>ここにdtの説明が入ります。</dd>
  </div>
</dl>

HTMLのみでアコーディオン！<details>要素

アコーディオンの実装に<details>を使います。

<details>
  <summary>ここをクリック</summary>
  アコーディオンの中身が表示。
</details>

HTMLのみで開閉処理が備え付けられている他、閉じているアコーディオンの中身がページ内検索でヒットしたり、スクリーンリーダーが開閉状態について読み上げてくれるなど、アクセシビリティ面でも適しております。

開閉をアニメーションさせるにはJavaScriptが必要になります。
本記事ではそこまで紹介していないので、「アニメーションさせたい！」という方は下記をご参考ください↓※別サイトへ遷移します。

アコーディオンのスライドアニメーションはCSS2行で実装できる – TAKLOG

JSなしでモーダルウィンドウが可能！<dialog>要素

モーダルウィンドウの実装に<dialog>を使います。

JSライブラリを使ってモーダルウィンドウを実装するのが主流でしたが、<dialog>を使えばJSライブラリなしでモーダルを実装できるため低コストでアクセシビリティにも優れています。

<dialog open>
  <div>モーダルのコンテンツ</div>
  <form method="dialog">
    <button>閉じる</button>
  </form>
</dialog>

z-indexを使わなくても最上位に表示される
iOS Safariのバージョン15.3以下がサポート外だが、すべてのモダンブラウザでサポートされているので実務で使用しても問題なし

本格的にモーダルウィンドウをアニメーションさせるにはJavaScriptが必要になります。
本記事では実装例まで紹介していないので、「サンプルコードを知りたい！」という方は下記をご参考ください↓※別サイトへ遷移します。

dialog要素を使用したモーダルウィンドウの実装例 – TAKLOG

クリック目的のボタン（リンク以外）は<button>要素を使おう

クリック対象の要素（ハンバーガーメニュー・モーダル開閉ボタン・ページトップへ戻るボタンなど）に<button>を使います。

「え？普通じゃない？」と思うかもしれませんが、たまに<div>や<p>のような本来クリックできない要素にクリック処理を施しているコードを見かけます。
そのようなコードは、ブラウザによってはクリックやタップが反応しなかったりフォーカスが当たらないなどの不具合が生じる可能性があるので、避けたほうがいいという意味で挙げさせていただきました。

<button>のデータ送信処理をストップさせるtype="button"を付けることを忘れずに！

<button type="button" id="js-trigger">ボタン</button>

検索機能は<search>要素でGoogleに伝えよう

サイト内検索・絞り込み検索には<search>を使います。

<search>
  <form>
    <label for="query">サイト内検索</label>
    <input type="search" id="search" name="search">
    <button type="submit">検索</button>
  </form>
</search>