Semantics in Web

Semantics

프로그래밍에서 Semantics는 meaning of a piece of code라고 합니다.
직역하면 코드 조각의 의미라고 해석 되는데,
웹의 관점에서 생각해보면 아래와 같은 뜻으로 해석할 수 있을 것 같습니다.

• 이 자바스크립트 코드를 실행하면 어떤 영향이 있을까?
• 이 HTML element는 어떤 역할을 할까?
  (화면에서 어떻게 보일까? 라는 의미와는 조금 다릅니다)

몇 가지 간단한 코드를 보면서
어떤 코드가 Semantic한 코드인지 생각해보겠습니다.

Semantics in HTML

페이지의 최상위 제목을 나타내는 HTML

<span style="font-size: 32px; margin: 21px 0;">This is a top level heading</span>

<h1>This is a top level heading</h1>

Semantics in CSS

다양한 종류의 과일을 표현한 <li> element에 style을 적용

div > ul > li {
    color: red;
}

.fruits_item {
    color: red;
}

Semantics in JavaScript

과일 이름을 문자열 형태의 parameter로 받고
그 문자열을 textContent로 하는 <li> element를 반환하는 함수

const liTag = build('Peach');

const liTag = createLiTagWithContent('Peach');

Reference
Semantics | MDN