[TIL] Semantic Mark-up

10bohyunkim01·2020년 9월 17일

The term “semantics” refers to the study of the relationship between words and how we draw meaning from those words. Similar to the field of linguistics and logic, “semantics” in HTML can be defined by elements that clearly describe the meaning and purpose of the element.

Semantics perhaps puts greater emphasis on the meaning than its purpose. A myriad of semantic tags may serve a similar or same purpose, but the contents may not align with the intended meaning. For example, div is a non-semantic tag that can contain any information but do not tell the computer anything about the meaning of the contents. On the other hand, semantic tags like aside, footer, and nav convey meaning that reside with their contents, rather than simply defining the elements based on the intended visual presentation.

Example Scenario:

Suppose you want to place an image in a specific position.

Non-semantic method: Use the div tag with a background-image style property

Semantic method: Use the img tag

Visually speaking, both methods will render the same result. However, the div tag itself does not convey information about the intended meaning and purpose, while the img tag contains src and alt attributes that are designed specifically for the intended content. Various ways to display information on a web page exist, but semantic tags should be preferred to non-semantic tags.

프론트엔드 개발 꿈나무 🤓

0개의 댓글