HTML 탐구생활 : html 코드 시맨틱하게 작성하기

 

1. Semantic Tag란?

semantic은 '의미의'라는 뜻의 형용사이다. semantic tag는 의미를 가지는 태그를 의미한다. 

 

 

2. Semantic Tag를 쓰는 이유?

웹사이트가 검색엔진에 노출되는 것은 매우 중요하다. 검색엔진은 로봇(Robot)이라는 프로그램을 이용하여 웹사이트의 정보를 수집한다(이것을 크롤링이라고 부른다) 정보를 수집한 다음 사용자가 검색할만한 키워드를 예상하여 검색 키워드에 해당하는 색인(index)을 미리 만들어둔다. 검색엔진이 수집한 정보는 html코드인데, html 코드의 시맨틱 요소들을 해석하게 된다.  검색엔진 노출 때문도 있지만, 개발자는 여러 사람들과 협업을 많이 하기 때문에 코드의 의미를 명확하게 해주는 것이 중요하다. 

 

---

 

3. 기본적인 웹사이트의 구조

웹사이트 기본구조

-- header : 웹사이트의 상단부에 위치하며 웹사이트의 제목이나 로고, 검색 폼 , 저자 정보등의 요소들을 포함한다.

-- nav : 보통 메뉴나 목차등을 포함한다.

-- section : 논리적으로 관계가 있는 요소들을 분리할 때 사용, 대부분 heading태그를 포함한다.

-- article : 다른 페이지나 영역에 언제든 갖다 붙일 수 있는 영역을 의미하며, 웹 문서의 다른 부분들과 독립적인 내용을 포함 한다. 예시로는 게시물이나 뉴스 기사, 사용자의 댓글 등이 있다. 

-- footer : 저자 정보, 저작권, 사이트맵, 연관페이지 등을 포함한다.

** 추가 **

-- main : 문서의 주요 콘텐츠를 나타낸다. 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결된 콘텐츠로 이루어짐.

main의 콘텐츠는 문서의 유일한 내용이어야 하며 사이드바, 사이트 로고, 검색폼등 여러 문서에 걸쳐서 반복되는 요소들을 포함해서는 안된다. 

 

 

4. item도 시맨틱하게

header,nav,section은 웹사이트의 기본구조의 뼈대 역할을 하는 일종의 박스이다. 이 박스만 semantic하게 작성하는 것이 아니라 안의 콘텐츠도 의미에 맞게 코드를 작성해주어야 한다.

div나 span의 경우 아무런 의미를 가지지 않는 non-semantic tag이다. 단지 그룹화를 하기 위한 박스 역할만 한다.

반면 button, ul, ol , li , p, h1등은 그 자체로 의미를 가지는 시맨틱 태그이다. 

제목을 나타내고 싶을 때는 heading태그, 리스트에 해당하는 것은 ul, ol태그, 중요한 내용을 강조하고 싶을 때 strong, 인용문을 나타내고 싶을때는 blockquote등등 각각의 의미에 맞게 작성해주자.

 

 

// 참고 사이트

https://developer.mozilla.org/ko/docs/Glossary/Semantics

Semantics - 용어 사전 | MDN