最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説

最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。

レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。

HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。

My current HTML boilerplate
by Manuel Matuzović

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• HTMLのテンプレート（最終形）
• HTMLのテンプレートを1行ずつ解説
• ページのタイトルと説明文、外部ファイル
• ソーシャルメディア用のHTML
• アイコンとアドレスバー
• もう必要ないと思われるタグ、たまに必要になるタグ

はじめに

この記事では、HTMLドキュメントの基本構造に使用するすべての要素と、その理由を解説します。

通常、新しいプロジェクトを始めるときは、最後に実装したサイトのHTML構造をコピーしたり、HTML5 Boilerplate（翻訳版: HTMLの基本テンプレート）からHTMLをコピーしているかもしれません。私はこれから新しいプロジェクトを始めるわけではありませんが、職場で使用しているサイトの構造を文章化する必要がありました。そのため、単にコピペするだけでなく、HTMLドキュメントの基本構造すべてを理解しなければなりませんでした。構造の調査と組み立てにかなりの時間を費やしたので、それをこの記事で共有したいと思います。

HTMLのテンプレート（最終形）

下記のHTMLが、最終形です。
【訳者注】言語を日本語（ja, ja_JP）に変更しています。

HTMLのテンプレートを1行ずつ解説

HTMLのテンプレートを1行ずつ解説します。まずは、一般的なタグから。

以前はDOCTYPE宣言にはいろいろな記述がありましたが、現在ではこれだけです。これが唯一無二です。他に選択肢がないにもかかわらず、互換性の理由から記述する必要があります。
参考: MDN

lang属性はHTMLの中でも最も重要な属性の一つで、多くのことを担っています。詳細については、lang属性の使用についてやlang属性：ブラウザが嘘をつく、甘い小さな嘘をつくをご覧ください。

html要素に適用され、ページの自然言語を定義します。例えば、英語ならen、ドイツ語ならde、日本語ならjaのように言語を識別するためのタグ（BCP47）で定義された形式の「言語タグ」を1つ記述します。
参考: MDN

no-jsのクラスは、JavaScriptをサポートしていないブラウザで特定のコンポーネントにスタイルを適用する場合に備えたものです。このクラスはJavaScriptをサポートし実行するブラウザでは無視されます。

charset属性は、ドキュメントの文字エンコードを宣言します。この属性を記述しないと、ブラウザによっては特定の文字が正しく表示されないことがあります。

例えば、Safariでcharset属性を記述せずに私の名前（Manuel Matuzović）を表示すると、正しく表示されません。

このHTMLはページタイトルの文字化けを避けるために、<title>より上に記述する必要があります。

metaタグにviewportを定義すると、レスポンシブWebデザインに必要なビューポートの幅を変更できます。width-device-widthは、ビューポートの幅をスクリーンの幅に設定します。initial-scaleは、ページが最初に読み込まれたときのズームレベルを制御します。

initial-scale=1は、iOS 9のSafariのみで必要であると読んだような気がしますが、その記事が見つかりませんでした。

viewportのmetaタグは、ドキュメントが適切にレンダリングされるように、そのドキュメントのできるだけ早い段階に記述する必要があります。
参考: HEAD

iOS 9.3以降、shrink-to-fit=noは不要になりました。

• Time to remove the shrink-to-fit=no band aid?
• Using the viewport meta tag to control layout on mobile browsers

ページのタイトルと説明文、外部ファイル

ページのタイトルは、サイト内でそのページだけの唯一でユニークなものを使用します。ブラウザのタブ、検索エンジンの結果、ブックマークして保存したときなど、さまざまな場所に表示されます。

• Provide informative, unique page titles
• Accessible page titles in a Single Page App

JavaScript moduleは、プログレッシブエンハンスメントです、ブラウザがJavaScript moduleをサポートしているということは、modules, ES6の構文, fetchなど、モダンJavaScriptをサポートしていることになります。私はほとんどのJavaScriptをこれらのブラウザにのみ提供しており、JavaScriptがアクティブなときにコンポーネントのスタイルが異なる場合は、CSSでjsクラスを使用しています。

JavaScript moduleのサポートブラウザ

サイトで共通に使用するCSSです。
参考: モダンブラウザに適したCSSリセットのまとめ

印刷用のCSSです。
参考: I totally forgot about print style sheets

説明文もタイトルと同様に検索エンジンの結果などに表示されるため、ユニークなものにします。長さは自由ですが、検索エンジンでの表示は、155-160文字になります。

ソーシャルメディア用のHTML

FacebookやTwitterなど、ソーシャルメディア用のHTMLです。

titleと同様に、ページのユニークなタイトルを記述します。TwitterやFacebookなどのソーシャルメディアのURLスクレーパーによって使用されます。

こちらも同様に、ユニークな説明文を記述します。TwitterやFacebookなどのソーシャルメディアのURLスクレーパーによって使用されます。

ソーシャルメディアやチャットアプリなど、URLが取得されて共有する際に表示される画像です。

理想的なのは重要なコンテンツが2:1の比率の長方形の中央に配置された正方形の画像です。これにより、長方形や正方形の画像を含むカードでも画像が美しく見えるようになります。
参考: Facebook, Twitter, Instagram, TikTokなど、各ソーシャルメディアで最適な画像・動画サイズのまとめ

1200pxの正方形の画像は、下記のように表示されます。

Twitterでの表示

WhatsAppでの表示

Twitterのルール:
カード画像は、アスペクト比2:1、最小300x157または最大4096x4096ピクセルに対応しています。画像のサイズは5MB以下であること。JPG、PNG、WEBP、GIF形式に対応しています。
参考: Twitter Developer Docs: Cards

画像の説明文を記述します。画像が純粋に装飾的で、意味のある情報を提供していない場合はこのmetaタグを使用しないでください。スクリーンリーダーはaltテキストを提供しない場合、画像を無視します。

これはOpen Graphプロパティのオプションですが、記述が推奨されています。ページで使用する言語を定義します。

website, article, video.movieなど、コンテンツの種類を記述します。Open Graphページに必須のプロパティです。
参考: Object Types

ページの正規URLを記述します。OpenGraphページに必須のプロパティです。
参考: The Open Graph protocol

このmetaタグは、Twitterで共有したときに画像のカードがどのように表示されるかを定義します。Webサイトには、summaryとsummary_large_imageの2つのオプションがあります。
参考: Twitter Summary Card with Large Image

summary_large_imageを定義した場合の表示

summaryを定義した場合の表示

画像が2つのオプションで見栄えがよいことを確認するために、正方形の画像を使用しています。summary_large_imageではカードの上下のピンクの部分が切り取られて表示されていることが分かります。

アイコンとアドレスバー

theme-colorは、ページやその周辺のユーザーインターフェースの表示をカスタマイズするためのCSSのカラーをブラウザに提供します。
サポートされているブラウザ: Chrome, BraveとSamsung Internet on Android

定義したカラーが適用されます。

従来のブラウザ用の32×32pxのファビコンです。Webサイトのルートにファビコンファイル（favicon.ico）をアップロードします。

最近のブラウザはほとんどがSVGファビコンに対応しています。favicon.svgの利点は、ラスター画像ではなくベクター画像なので、拡大縮小しても見栄えが良いことと、SVGにHTMLやCSSを追加できるので、ダークモードに対応できることです。
参考: SVGファビコンのカラーをダークモード時にCSSで変更できるの知ってた？

SVGファビコンのカラーをダークモード時に変更するには、.svgを編集します。
<svg>要素内に<style>を加え、fillプロパティでカラー値を定義します。ダークモード用のカラーは、メディアクエリでprefers-color-scheme: darkを使用します。

これで、ライトモード時はブラックに、ダークモード時はホワイトになります。

Appleデバイスのホーム画面に表示される180×180pxのアイコンです。

Androidデバイスの場合、.webmanifestファイルが必要です。このファイルは、ホーム画面とPWAのスプラッシュ画面に必要なアイコンが配置されている情報をブラウザに提供します。
参考: How to Favicon in 2021: Six files that fit most needs

linkタグのcanonicalを使用して、複数のURLで公開されているページのオリジナルソースを指定することで、コンテンツの重複によるSEOの問題を防ぐことができます。

moduleをサポートしていないブラウザを対象としたJavaScriptを提供する場合は、nomodule属性を追加します。これにより、スクリプトは従来のブラウザ、つまりIE11でのみ実行されます。

type="module"のJavaScriptは、moduleをサポートするブラウザでのみ実行されます。これは、nomodule属性の反対です。

もう必要ないと思われるタグ、たまに必要になるタグ

以下は、絶対に必要なものではありませんが、私が実装するほとんどのサイトに必要なものです。最後に、もう必要ないと思われるタグやたまに必要になるタグを追加しておきます。

何かを逃しているタグがあれば、Twitterまたはメールで教えてください。

もう必要ないと思われるタグ

Andrey Sitnikによると、これは最近のバージョンのWindowsでは不要になりました。

IE11以降、ドキュメントモードは非推奨になり、一時的な場合を除いて使用できなくなりました。IE11からは、ドキュメントモードとしてedgeモードが推奨されています。edgeモードは、ブラウザが最新の標準規格を最大限にサポートしています。
参考: 推奨されていないドキュメント モードと Internet Explorer 11

Safari 12以降、固定されたタブのアイコンを個別に変更する必要がなくなりました。

たまに必要になるタグ

ページを読み込む際の早い段階で特定のリソースを確実に利用できるようにするには、preloadを使用します。
参考: サイトを高速化したらロード時間は1.6秒に、Lighthouseは100を獲得、その際に実施した手順を解説
参考: スマホ対応の優れもの！クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト

• Preloading content with rel="preload"
• Preload, Prefetch And Priorities in Chrome
• Prefetching, preloading, prebrowsing

サイトのRSS Feedを定義します。

電話番号の自動検出とフォーマットを無効にします。

Twitterがパーソナライズの目的でサイトの情報を使用することを禁止します。

<head>要素とその子要素について詳しく知りたい場合は、下記をご覧ください。

HTMLのheadの書き方、head内に記述する要素の総まとめ