시멘틱
정의
시멘틱 태그란 의미에 맞게 태그를 작성하는것을 뜻한다
HTML Tag는 Non-semantic, semantic으로 나뉜다
| 분류 | 설명 |
|---|---|
| Non-Semantic | div, span처럼 content에 대해 의미가 명확하지 않은 것 |
| Semantic | header, nav, img같이 태그 자체의 의미가 명확한 것 |
종류
| 태그명 | 역할 |
|---|---|
<aside> | 페이지의 콘텐츠를 제외한 콘텐츠를 나타냄 (링크, 광고 등) |
<footer> | 페이지의 가장 하부 역할 우리가 흔히 보는 회사 정보 등이 여기에 표시된다 |
<header> | 페이지의 가장 상단 머릿글 역할 |
<main> | 주요 내용을 나타내고 딱 한번만 사용해야한다 |
<nav> | 사이트 내의 링크나 타 사이트로의 링크 모음 |
이외에도 우리가 흔히 쓰는 <img> <input> 같은 태그들도 같다고 할 수 있다.
더 많은 태그들을 보고 싶다면 아래의 링크에서 확인이 가능하다
시멘틱 태그의 필요성
코드 가독성
HTML로 처음 구조를 짰을 때는 항상 div와 span으로 모든 걸 해결했다.
해당 태그안에 class 혹은 id를 명명해서 어떤 역할을 하는지 말이다
예전에 작성하던 방법으로 아래와 같이 body안에 하나의 Container를 만들어 보았다.
<div class="header"></div>
<div class="main-container">
<div class="side-bar"></div>
<div class="content"></div>
</div>
<div class="footer"></div>위와 같이 클래스명으로 해당 div가 어떤 역할을 명시해줄수는 있지만, 구조가 복잡해지고
길어지면 구조를 파악하는데 있어서 점점 힘들어질수가 있다
<header></header>
<div class="main-container">
<nav></nav>
<section>
<article></article>
</section>
</div>
<footer></footer>하지만 Semantic Tag의 의도에 맞게 위처럼 바꿔본다면 해당 영역이 어떤 역할을 하는지 명확히 알수 있게 된다.
위처럼 의미를 명확하게 나타내면 코드의 가독성을 높이는 동시에 유지보수를 쉽게 할수있다
검색엔진
검색엔진은 Robot을 이용해 웹사이트 정보를 수집하는데, 검색을 할 사용자가 어떤 것을 검색할지 미리 예상하여 인덱스를 만들어 둔다.
인덱스를 만들 때 검색 로봇은 크롤링 대상이 되는 사이트의 HTML 코드를 보고 수집을 진행하게 되고, 코드를 이해하기 위해 시멘틱 요소를 해석하게 된다.
사이트 관리자는 시멘틱 태그인 <meta> 태그를 활용해 정보를 표기하고 검색엔진은 그 정보를 활용한다
이해
- 사이트에 이미지를 넣을 때,
<img>를 사용하는 것과<div>를 사용해서background-image속성을 추가하는 것의 차이는 무엇일까?
- Sementic 측면에서의 이해
img는 sementic 한 태그이지만div에 background-image를 주어주면 non-sementic하다.
- alt의 유무
img태그는 alt 속성을 가지고 있지만,div는 그렇지 않다. alt를 가지고 있는img태그는 이미지를 불러오는 에러가 났을 때 에러가 난 자신이 어떤 이미지였는지 인식할 수 있게 한다.
<img src="warning.img" alt="warning image"
그리고 alt가 없다는 것은 눈이 불편하셔서 스크린 리더같은 것을 이용해 도움을 받으시는 분들에게 정보를 줄수 없다는 큰 단점이 있다.
- Image Loading Error가 났을 때
img태그는 에러가 나면 에러 이미지 표시가 화면에 표시되지만div는 해당div영역 자체가 표시되지 않는다.
출처
