Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

프로그래밍에서 시맨틱은 코드 조각의 의미를 나타낸다.

Semantics in HTML

HTML에서는 <h1> 은 시맨틱 요소이다. “이 페이지에서 최상위 제목”인 텍스트를 감싸는 역할(또는 의미)를 나타낸다.

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

기본적으로 대부분의 브라우저의 사용자 에이전트 스타일시트 <h1>가 제목(heading)처럼 보이도록 큰사이즈 폰트로 스타일을 만든다.

반면에 모든 요소를 ‘최상위 제목’처럼 보이게 할 수 있다.

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

이렇게 하면 top level heading 처럼 보이지만 의미적 가치(semantic value)가 없으므로 추가적인 이점은 얻을 수 없다. 따라서 적합한 HTML 요소를 사용하는 것이 좋다.

HTML은 채워질 데이터를 나타내도록 코딩해야 한다.

의미론적인 마크업을 사용하면 아래와 같은 이점이 있다.

• 검색 엔진은 시맨틱 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.
• 시각 장애가 있는 사용자가 화면 판독기로 페이지를 검색할 때 시맨틱 마크업을 푯말로 사용할 수 있다.
• 의미없고 클래스 이름이 붙여져 있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다.
• 개발자에게 태그 안에 채워질 데이터 유형을 제안한다.
• 의미있는 이름짓기(Semantic naming)는 적절한 정의 요소 / 구성 요소의 이름짓기(naming)를 반영한다.

Semantic elements

<article>

HTML <article> 요소는 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있다.