시맨틱 웹(Semantic Web)
- Semantic : 의미의, 의미론적인
- 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다.
프로그래밍에서,시맨틱은 코드 조각의 의미를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"
출처: https://developer.mozilla.org/ko/docs/Glossary/Semantics
잘 된 예제
<body>
<header><!-- Header --></header>
<nav><!-- 메뉴 --></nav>
<main>
<article><!-- 본문 --></article>
<aside><!-- 사이드바 --></aside>
</main>
<footer><!-- Footer --></footer>
</body>의미를 가지는 태그들 (nav, main, article, ...) 을 사용한다.
잘못된 예제
<body>
<div><!-- Header --></div>
<div><!-- 메뉴 --></div>
<div>
<div><!-- 본문 --></div>
<div><!-- 사이드바 --></div>
</div>
<div><!-- Footer --></div>
</body>의미가 없는(non-semantic) 태그들만 사용한다.
Question) 웹 페이지 설계 과정에서 과연 non-semantic 태그를 사용할 수밖에 없는 환경(상황)인지 생각해보자... > 불필요한 사용은 최대한 삼가야 한다.
의미론적 마크업 사용시의 이점
-
검색 엔진은 의미론적 마크업을 분석한다. == 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 Keyword로 간주한다.
-
시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때 의미론적 마크업을 표지판으로 사용할 수 있다. > 웹 접근성
-
의미가 없는 끊임없는
<div>들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다. -
개발자에게 태그 안에 채워질 데이터 유형을 제안한다. > 유지, 보수, 개선과정의 이점
-
의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(naming)를 반영한다.
내가 생각하는 Semantic 개발의 이점
👍 개발자로써 프로젝트의 협업력이 올라가고, 추후 유지/보수하기에 매우 용이한 개발을 진행할 수 있다.
👍 HTML 문서가 Semantic 개발되어있다면 한참 뒤에 보거나, 처음 보더라도 누구든 쉽고 빠르게 내용을 파악할 수 있다.
💵 오늘을 살자