프로그래밍에서,시맨틱은 코드의 조각을 의미합니다 — 예를 들어 ("이게 어떻게 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"

JavaScript 시맨틱

JavaScript에서 string 변수를 반환하는 함수를 생각해보자. 그 함수는 string형이고, 변수명은  textContent이며, <li> 요소를 반환합니다. build('Peach')또는 createLiWithContent('Peach')  함수가 호출되었다면, 이 함수들이 무엇인지 이해하기 위해서 코드를 확인 할 필요가 있을까요?

CSS 시맨틱

CSS에서, 다른 종류의 과일을 리스팅하는, 리스팅 태그 li 요소를 스타일링하는 것을 고려합니다. DOM의 어떤 부분이 div > ul > li, 또는 .fruits__item으로 선택되고 있는지 알고 있나요?

HTML 시맨틱

예를 들어 HTML에서 <h1> 시맨틱 요소는 "top level heading" 또는 텍스트를 감싸는 역할을 합니다.

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

기본적으로 대부분의 브라우저의 사용자 에이전트 스타일시트 <h1> 가 제목(heading) 처럼 보이도록 큰사이즈 폰트로 스타일을 만듭니다.(원하는 대로 스타일링 가능함)  어떤 요소라도 "top level heading" 처럼 보이게 할 수 있습니다. 다음을 고려해야 합니다.

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

이렇게 하면 top level heading 처럼 보이지만 시맨틱 값 (semantic value)이 없으므로 위에서 설명한 것처럼 추가적인 이점은 얻을 수 없습니다. 따라서 올바른 작업에 적합한 HTML 요소를 사용하는 것이 좋습니다.

HTML은 기본 프레젠테이션 스타일을 기본으로 두지 않고 채워질 데이터를 나타내도록 코드화해야 합니다. 프레젠테이션(시각적 방법)은 CSS 본래의 역할입니다.

Some of the benefits from writing semantic markup are as follows:

  • Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
  • Screen readers can use it as a signpost to help visually impaired users navigate a page
  • Finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes
  • Suggests to the developer the type of data that will be populated
  • Semantic naming mirrors proper custom element/component naming

When approaching which markup to use, ask yourself, "What element(s) best describe/represent the data that I'm going to populate?" For example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.

Semantic elements

These are some of the roughly 100 semantic elements available:

Learn more