skillfindtech

Presentational vs Semantic Elements

Most HTML elements used within body element can be categorized as presentational elements and/or semantic elements.

A presentational element is an element that does not convey to computer programs reading it what its content is from the semantic perspective but only control how the content is displayed visually.

A semantic element is an element that conveys to computer programs, such as search engine web crawlers or assistive screen readers, what its content is from the semantic perspective. In addition, web browsers may also display visually a semantic element in a certain way. Furthermore, semantic elements are a way of describing their meaning in code to facilitate and enhance the quality of development.

Presentational Elements

As noted, presentational elements only control how an HTML document is displayed visually but do not describe semantically what their contents are.

Since 1997 using presentational elements has been discouraged in favor of using Cascading Style Sheets. Further, some presentational elements have their semantic "counterparts" which not only display visually their contents in a way similar to the presentational components but also tell computer programs what their content is. Such presentational elements and their "counterparts" are:

  • presentational big element for making the content's font larger - use semantic h1 for headings or span with the font-size property for non-headings,
  • presentational u element for underlining the content's font - use semantic em instead for emphasis, b for marking up keywords, and mark for highlighting references,
  • presentational s and strike elements for striking out the content's font - use semantic del,