DOCTYPEはDocument Typeの略です。DOCTYPEは常にDTD（Document Type Definition）と関連付けられています。
DTDは、特定のタイプのドキュメントがどのように構造化されるべきかを定義します（例：buttonはspanを含むことができますが、divは含みません）。一方、DOCTYPEはドキュメントがどのようなDTDを尊重するとされるかを宣言します（例：このドキュメントはHTML DTDを尊重します）。
ウェブページの場合、DOCTYPE宣言は必須です。これは、ユーザーエージェントにドキュメントがどのバージョンのHTML仕様を尊重するかを伝えるために使用されます。ユーザーエージェントが正しいDOCTYPEを認識すると、ドキュメントを読み取るためにこのDOCTYPEに一致するno-quirks modeをトリガーします。ユーザーエージェントが正しいDOCTYPEを認識しない場合、quirks modeをトリガーします。
HTML5標準のDOCTYPE宣言は<!DOCTYPE html>です。
これは、複数の言語で利用可能なコンテンツを持つページをどのように提供するかという最も一般的なケースについて尋ねていると仮定します。ただし、ページ内のコンテンツは一貫した1つの言語でのみ表示されるべきです。
HTTPリクエストがサーバーに対して行われると、要求しているユーザーエージェントは通常、Accept-Languageヘッダーなど、言語の好みに関する情報を送信します。サーバーは、この情報を使用して、そのような代替が利用可能であれば、適切な言語のドキュメントのバージョンを返すことができます。返されるHTMLドキュメントは、<html lang="en">...</html>のように、<html>タグ内にlang属性も宣言する必要があります。
もちろん、これは検索エンジンに同じコンテンツが異なる言語で利用可能であることを知らせるのには役立ちません。そのため、<head>内でhreflang属性も使用する必要があります。例：<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />
バックエンドでは、HTMLマークアップにはi18nプレースホルダーと、YMLまたはJSON形式で保存された特定の言語のコンテンツが含まれます。サーバーは、通常バックエンドフレームワークの助けを借りて、その特定の言語のコンテンツを持つHTMLページを動的に生成します。
lang属性を使用する。"The date today is " + dateのようなことはしないでください。単語の順序が異なる言語では壊れてしまいます。代わりに、各言語のパラメーター置換を含むテンプレート文字列を使用してください。たとえば、英語と中国語の次の2つの文を見てください：I will travel on {% date %} と {% date %} 我会出发。言語の文法規則により変数の位置が異なることに注意してください。JavaScriptフレームワークが普及する前は、フロントエンド開発者は非標準の属性やDOMの追加プロパティなどの他のハックなしに、DOM自体に追加データを格納するためにdata-属性を使用していました。これは、ページまたはアプリケーションにプライベートなカスタムデータを格納することを目的としており、より適切な属性や要素がない場合に使用されます。
今日では、data-属性の使用は一般的に推奨されていません。その理由の1つは、ユーザーがブラウザの要素検証機能を使用してデータ属性を簡単に変更できることです。データモデルはJavaScript自体の中に格納され、おそらくライブラリまたはフレームワークを介したデータバインディングによってDOMと同期を保つのがより適切です。
ただし、データ属性の完全に有効な用途の1つは、SeleniumやCapybaraなどのエンドツーエンドテストフレームワークにフックを追加することです。これにより、無意味なクラスやID属性を作成する必要がありません。要素は特定のSelenium仕様によって見つけられる方法が必要であり、data-selector='the-thing'のようなものは、セマンティックマークアップを複雑にすることなくそれを行う有効な方法です。
上記のテクノロジーはすべて、クライアント側のキーバリューストレージメカニズムです。これらは値を文字列としてのみ保存できます。
| | cookie | localStorage | sessionStorage |
| --- | --- | --- | --- |
| 発信元 | クライアントまたはサーバー。サーバーはSet-Cookieヘッダーを使用できます | クライアント | クライアント |
| 有効期限 | 手動で設定 | 永続的 | タブを閉じると終了 |
| ブラウザセッションをまたいで永続的か | 有効期限が設定されているかによる | はい | いいえ |
| すべてのHTTPリクエストとともにサーバーに送信されるか | CookieはCookieヘッダーを介して自動的に送信されます | いいえ | いいえ |
| 容量（ドメインあたり） | 4kb | 5MB | 5MB |
| アクセシビリティ | 任意のウィンドウ | 任意のウィンドウ | 同じタブ |
注：ユーザーがブラウザが提供する何らかのメカニズムを介して閲覧データをクリアすることを決定した場合、保存されているcookie、localStorage、またはsessionStorageはすべてクリアされます。特にデータベースなどサーバー側での保存（これはもちろんユーザーのアクションに関係なく永続します）と比較して、ローカル永続性を設計する際には、この点を念頭に置くことが重要です。
<script> - HTMLの解析がブロックされ、スクリプトがすぐにフェッチされ実行されます。スクリプトの実行後、HTMLの解析が再開されます。<script async> - スクリプトはHTMLの解析と並行してフェッチされ、利用可能になり次第（HTMLの解析が完了する前である可能性もあります）実行されます。分析など、スクリプトがページの他のスクリプトに依存しない場合はasyncを使用します。<script defer> - スクリプトはHTMLの解析と並行してフェッチされ、ページの解析が完了した後に実行されます。複数のdeferスクリプトがある場合、それぞれの遅延スクリプトはドキュメント内で検出された順序で実行されます。スクリプトが完全に解析されたDOMに依存している場合、defer属性はHTMLが完全に解析されてからスクリプトが実行されることを保証するのに役立ちます。遅延スクリプトにはdocument.writeを含めることはできません。注：asyncおよびdefer属性は、src属性を持たないスクリプトでは無視されます。
<link>を<head>に配置する
<link>を<head>に配置することは、最適化されたウェブサイトを構築するための適切な仕様の一部です。ページが最初にロードされるとき、HTMLとCSSは同時に解析されます。HTMLはDOM（Document Object Model）を作成し、CSSはCSSOM（CSS Object Model）を作成します。どちらもウェブサイトの視覚要素を作成するために必要であり、迅速な「最初の意味のある描画」のタイミングを可能にします。このプログレッシブレンダリングは、サイトのパフォーマンススコアを測定する最適化カテゴリです。スタイルシートをドキュメントの下部に配置すると、多くのブラウザでプログレッシブレンダリングが妨げられます。一部のブラウザは、スタイルが変更された場合にページの要素を再描画するのを避けるためにレンダリングをブロックします。ユーザーは真っ白なページを表示したままになります。また、スタイルが適用されていないコンテンツがちらつく（FOUC）こともあり、スタイルが適用されていないウェブページが表示されます。
<script>を</body>の直前に配置する
<script>タグはダウンロードおよび実行中にHTMLの解析をブロックするため、ページの読み込みを遅くする可能性があります。スクリプトを下部に配置することで、HTMLが最初に解析され、ユーザーに表示されるようになります。
<script>を下部に配置する例外は、スクリプトにdocument.write()が含まれている場合ですが、最近ではdocument.write()を使用することは良い習慣ではありません。また、<script>を下部に配置すると、ブラウザはドキュメント全体が解析されるまでスクリプトのダウンロードを開始できません。これにより、DOM要素を操作する必要があるコードがエラーをスローしてスクリプト全体を停止させることがなくなります。<script>を<head>に配置する必要がある場合は、defer属性を使用します。これは、HTMLが解析された後にのみスクリプトを実行するという同じ効果を達成しますが、ブラウザはスクリプトをより早くダウンロードできます。
スクリプトを閉じ</body>タグの直前に配置すると、空のキャッシュでページがより速く読み込まれるという錯覚を生み出します（スクリプトがドキュメントの残りの部分のダウンロードをブロックしないため）。ただし、ページロード中に実行したいコードがある場合、それはページ全体がロードされてからのみ実行を開始します。これらのスクリプトを<head>タグに配置すると、それらはより早く実行を開始するため、プライムキャッシュではページが実際に速く読み込まれるように見えます。
<head>と<body>タグは現在オプションです
HTML5の仕様によると、<head>や<body>などの特定のHTMLタグはオプションです。Googleのスタイルガイドでさえ、バイトを節約するためにそれらを削除することを推奨しています。しかし、この慣行はまだ広く採用されておらず、パフォーマンスの向上は最小限である可能性が高く、ほとんどのサイトでは問題にならないでしょう。
プログレッシブレンダリングとは、ウェブページのパフォーマンスを向上させるために使用される技術の名称です（特に、知覚される読み込み時間を改善するため）。コンテンツを可能な限り迅速に表示するためにレンダリングします。
ブロードバンドインターネットが普及する以前ははるかに一般的でしたが、モバイルデータ接続がますます普及し（そして信頼性が低くなっている）現代の開発でも依然として使用されています！
そのような技術の例：
DOMContentLoaded/loadイベントをリッスンして他のリソースやコンテンツをロードしたりできます。srcset属性を使用するのは、ユーザーのデバイスの表示幅に応じて異なる画像を配信したい場合です。Retinaディスプレイを持つデバイスには高品質の画像を配信することでユーザーエクスペリエンスが向上し、低解像度のデバイスには低解像度の画像を配信することでパフォーマンスが向上し、データの無駄を減らすことができます（大きな画像を配信しても目に見える違いはないため）。例えば、<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">は、クライアントの解像度に応じてsmall、medium、またはlargeの.jpgグラフィックを表示するようにブラウザに指示します。最初の値は画像名で、2番目の値は画像の幅をピクセル単位で示します。デバイス幅が320pxの場合、以下の計算が行われます。
クライアントの解像度が1xの場合、1.5625が最も近く、small.jpgに対応する500wがブラウザによって選択されます。
解像度がRetina（2x）の場合、ブラウザは最小値を超える最も近い解像度を使用します。つまり、500w（1.5625）は1より大きく、画像が見栄えが悪くなる可能性があるため選択しません。ブラウザは、2に近い結果比率を持つ1000w（3.125）の画像を選択します。
srcsetは、狭い画面のデバイスにはより小さな画像ファイルを配信したいという問題を解決します。デスクトップディスプレイのように巨大な画像を必要としないためです。また、オプションとして、高密度/低密度の画面に異なる解像度の画像を配信したいという問題も解決します。
はい、Pug（以前はJade）、ERB、Slim、Handlebars、Jinja、Liquid、EJSなど、いくつか使ったことがあります。私の意見では、それらは多かれ少なかれ同じであり、コンテンツのエスケープや表示するデータを操作するための便利なフィルターなど、同様の機能を提供します。ほとんどのテンプレートエンジンでは、表示前にカスタム処理が必要な場合に独自のフィルターを注入することもできます。
Canvasはピクセルを扱うラスタベースですが、SVGは図形の数学的記述を用いるベクトルベースです。CanvasはJavaScriptで各ステップを指定する命令型描画を採用しており、アニメーションやゲームのような動的でインタラクティブなグラフィックに最適です。
対照的に、SVGはHTMLで直接図形やパスが定義される宣言型描画を使用しており、よりアクセスしやすくSEOフレンドリーです。Canvasはオーバーヘッドが低いため、複雑なシーンに最適ですが、スケーリングすると画質が低下する可能性があります。SVGは解像度に依存しないため、画質を犠牲にすることなくさまざまな画面サイズに適応します。
結論として、Canvasは動的でパフォーマンス重視のグラフィックに適しており、SVGはスケーラブルで解像度に依存しないグラフィックに優れており、固有のアクセシビリティとSEOの利点があります。
HTMLの空要素とは、開始タグと終了タグの間にコンテンツを含まない要素です。代わりに、それらは自己終了タグであり、閉じ山括弧（>）の前にスラッシュ（/）があります。空要素の一般的な例をいくつか示します。
<img>：画像をドキュメントに埋め込むために使用されます。<input>：ユーザー入力を受け付けるために使用されます。<br>：改行または強制改行を挿入するために使用されます。<hr>：水平線または区切り線を作成するために使用されます。