セマンティクスとは、音声のセマンティック構造を強調する関係と方法を研究する言語学のセクションです。 たとえば、命題メンバーの定義（主語、述語、追加、定義）、関係の研究、およびそれらに埋め込まれた意味（アクションの主語/目的とは何か、その説明を明確にするものなど）。
HTMLの前は、ドキュメントのセマンティックマークアップのタスクは次を使用して解決されていました。
- 模擬学術出版物向けのTeX（1978年テクノロジー）
- 広範なタスク用のSGML（1968テクノロジー）。 SGMLはその子孫XMLに非常に似ていますが、いくつかのルールを除きます。ルールには、タグに山カッコを入れない許可など、マークアップの読み取りが大幅に複雑になる場合があります。
言い換えれば、TeXが大学のレポート、科学論文などのプロトタイピングのニーズに厳密に適合した場合、SGMLはリレーショナルデータベースに類似した情報構造、つまりERモデル（エンティティ関係）の実装を許可しました。
（ERモデルの例）
（ER関係の例）
ERモデルは、データベース内のエンティティとエンティティ間の関係を定義する方法です。 ER関係の例：1対1、1対多、多対多、関連の関係（エンティティの関係）、集約（一般化と1つのエンティティの別のエンティティへの包含）など。
80年代後半にWebを作成し、SGMLを基礎として、Tim Berners Leahが構文を簡素化し、Webページレイアウト用の定義済みタグのリストを作成しました。 、ネストされたタグ、テキストコンテンツの許可など）とHTML 1.0を取得しました
したがって、SGMLベースのHTMLは元々、その部分のER関係のコンテキストでドキュメントの構造を記述すること、つまり、データベースと同様の用語でドキュメントの構造と内容を決定することを目的としていました。
次に、アプリケーションプログラムでGUIボタンを任意の方向に数ピクセル移動するために、データベース構造を編集する必要がある状況を想像してください。 逆説的ですが、現代のWebでは物事の順序になっています- 要素（GUIボタン）を視覚的に移動するには、HTML構造（データベース ） を変更する必要があります ！
この状況の発展は、90年代に始まったブラウザー間の非常に激しい競争でした。その間、HTMLは、視覚効果のみを作成し、Webドキュメントの構造内のセマンティックユニットを強調しないように設計された多数のタグで拡大しました。 ドキュメントのセマンティック部分のマークアップとそれらの外部デザインを1か所で組み合わせると、 現代のインターネットは障害のあるユーザーにとって完全に不適切になりました。 さらに、スタイルシートを切り替える代わりに非標準画面サイズのデバイス（スマートフォン）でWebページを表示するには、Webドキュメントの構造全体を処理する必要があり、これは非常に不便です。
幸いなことに、新しいWeb標準は、Webサイトの構造を視覚的なスタイル設定から適切に分離する方向にHTML5を移動していますが、これらの方法を正しく使用するには、Webページのレイアウトの認識を変更する必要があります。 実際、レイアウトデザイナーがデザイナーから送信されたレイアウトに主に焦点を合わせていた場合、主にページの情報構造、そのセマンティックパーツ、およびそれらの関係に主に依存することが重要です。 そして、2番目のステップとして、作成済みのWebページ構造に視覚要素と動的機能をどのように付加できるかを見てください。
要約-HTMLで指定されたWebページのDOMモデルは、Webドキュメントのコンテンツと構造を備えたデータベースとして認識されるべきであり、ページ上のスタイル要素の変更に応じて変更されることはありません。