Semantic vs. Presentational HTML

Vocabulary flashcards covering key terms that distinguish semantic HTML from presentational HTML and examples of each.

Semantic HTML

HTML that uses meaningful tags to describe the purpose and structure of content, enhancing accessibility, SEO, and maintainability.

Presentational HTML

HTML that focuses on how content looks rather than what it means, often mixing design with content and decreasing accessibility.

A semantic element representing a self-contained piece of content that could stand alone (e.g., blog post, news story).

A semantic element that defines introductory content or a group of navigational links for a section or page.

A semantic element that contains major navigation links within a document.

A semantic element representing a thematic grouping of content, typically with a heading.

A semantic element that contains information about its nearest section or the entire document, such as author info or copyright.

A semantic element that identifies the dominant content of the , excluding repeated sections like headers or footers.

A semantic element for content tangentially related to the main content, such as sidebars or pull quotes.

A semantic element that indicates strong importance; typically rendered bold but conveys meaning beyond style.

A semantic element that indicates emphasized text; typically rendered italic but signifies importance through meaning.

A presentational element that simply makes text bold without conveying meaning; replaced by for semantic emphasis.

A presentational element that simply italicizes text without conveying meaning; replaced by for semantic emphasis.

Deprecated presentational tag formerly used to specify font size, face, and color; styling should be done with CSS instead.

Deprecated presentational tag that centers content; replaced by CSS text-alignment properties.

Deprecated presentational tag that underlines text; use CSS or semantic alternatives for emphasis.

Line-break element that inserts a single line break; can be misused for layout and should be limited to semantic breaks like poetry or addresses.

---

Horizontal-rule element that creates a thematic break between paragraph-level elements; still valid but can be misused for purely visual separation.