시멘틱 웹(Semantic Web)
<body>
<header> <!-- Header --> </header>
<nav> <!-- 메뉴 --> </nav>
<main>
<article> <!-- 본문 --> </article>
<aside> <!-- 사이드바 --> </aside>
</main>
<footer> <!-- Footer --> </footer>
</body>- Semantic : 의미의, 의미론적인
- 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다.
non-semantic(div, span)
<body>
<div> <!-- Header --> </div>
<div> <!-- 메뉴 --> </div>
<div>
<div> <!-- 본문 --> </div>
<div> <!-- 사이드바 --> </div>
</div>
<div> <!-- Footer --> </div>
</body>non-semantic 태그를 사용하기 전에, "과연 이게 non-semantic 태그 밖에 사용할 수 없는 것일까?"
내부에 담긴 콘텐츠들이 의미를 갖고있다면 그 의미에 적합한 태그를 사용하는 고민을 해볼 것.
의미론적인 마크업을 사용하면 아래와 같은 이점이 있다.
- 검색 엔진은 의미론적 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.
- 시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때, 의미론적 마크업을 푯말로 사용할 수 있다.
- 의미가 없는 끊임없는 div들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다.
- 개발자에게 태그 안에 채워질 데이터 유형을 제안한다.
- 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(naming)를 반영한다.
개발자들에겐 약속이고, 책임감이다. 정답은 없지만 제대로 된 개념을 알고 있는 개발자는 시멘틱 태그를 알고 준수하도록 해야한다.
'Mark Up > HTML' 카테고리의 다른 글
| [HTML] Chapter 06. 논 시멘틱 - 공간을 나누는 div, span 태그 (0) | 2022.12.26 |
|---|---|
| [HTML] Chapter 05. 시멘틱 마크업 (1) | 2022.12.26 |
| [HTML] Chapter 03. 콘텐츠 (0) | 2022.11.15 |
| [HTML] Chapter 02. HTML 문서의 구조 (0) | 2022.11.10 |
| [HTML] Chapter 01. HTML, CSS 그리고 JavaScript (0) | 2022.11.09 |
댓글