프로그래밍에서 시맨틱은 코드 조각의 의미를 나타낸다.
mdn의 예를 빌리면, "이게 어떻게 시각적으로 보여질까?"보다는
"이 코드 라인을 실행하는 것이 어떤 효과가 있고 어떤 목적이나 역할이 있는가?"를 말한다고 한다.
출처 : MDN
즉, 내가 이해한 바로는 코드를 보기만 해도 의미를 알 수 있게 하는 것을 semantic하다고 하는 것 같다.
이미지 출처:https://dasima.xyz/html-layout/
위 그림은 구글 검색 결과를 기준으로 레이아웃 태그를 나눠놓은 것인데 이해하기 쉬워서 가져와봤다. 사실 위의 header,nav,section등 모든 것을 div로 사용할 수도 있다. 하지만 왜 이런 걸 쓰는 걸까?
위에서 언급한 semantic과 어찌보면 일맥상통하는 부분이다. 웹페이지의 접근성을 위해서, 또는 유지보수의 편의성을 위해서 사람이 잘 알아볼 수 있도록 시맨틱하게 코드를 짤 필요가 있다.
이런 관점에서 위에서 언급한 레이아웃 태그들은 시맨틱한 코드를 돕는다. div로 class를 나누어 구획을 나눌 수도 있지만 footer와 nav같이 유일한 태그를 사용하여 클래스를 굳이 주지 않아도 되고 파싱을 할 때에도 의미를 이해하기 쉽다.
<header>
: 사이트 이름, 문서의 제목, 로고 등을 정의한다.
<nav>
: 사이트의 다른 페이지로 이동하는 카테고리, 메뉴를 정의한다.
<section>
: 범위 사이의 데이터를 같은 주제의 그룹으로 분류한다.
<article>
: 개별 문서의 제목과 본문을 정의한다.
<footer>
: 저작권, 저자 연락처 등을 표시한다.
<aside>
: 사이드바 영역이다. 본문 내용과 직접적 연관이 없는 내용들을 기재한다.
"오늘 코드를 짜면서 아래와 같은 부분을 개선해보자."