📓 들어가며
우리가 주로 사용하는 웹페이지들은 사용자가 보기 편하도록 레이아웃을 구성해 보여준다.
이런 역할을 하는 태그를 Container tag라고 하는데 주로 다른 태그를 묶어서 특정한 구역을 만들거나, 스타일을 적용하기 위해 사용된다.
📓 Semantic Tag 와 Non-Semantic Tag
Container 역할을 하는 태그 안에는 Semantic tag와 Non-Semantic tag가 있다.
Semantic tag는 웹 페이지의 콘텐츠에 의미를 부여하는 HTML 태그이다.
단락을 나타내는 p 태그, 목록을 표시하는 ul, ol 태그, 제목을 표시하는 h1, h2 ... 태그들이 있으며,
이렇게 적절한 Semantic tag를 사용하면 페이지가 좀 더 읽기 쉽고 검색 엔진에서 더 잘 인식될 수 있다.
주로 웹 페이지의 구조를 명확하게 나타내기 위해서 많이 사용한다.
그 반대인 Non-Semantic tag는 콘텐츠를 묶거나 스타일링을 위해 사용되는 태그들이며, HTML문서의 구조나 의미를 전달하지 않는다.
대표적으로 div, span 태그들이 이에 해당된다.
📓 Semantic Tag를 사용하면 좋은 점
- 웹 페이지 접근성 향상
웹 페이지의 구조와 콘텐츠가 명확하게 전달되므로, 시각이나 운동 능력 등에 제한이 있는 사용자들도 웹 페이지를 더욱 쉽게 이해하고 접근할 수 있다.
- 검색 엔진 최적화 (SEO)
검색 엔진이 웹 페이지의 구조와 콘텐츠를 더욱 정확하게 이해할 수 있다.
따라서, 검색 결과에서 더욱 높은 순위를 얻거나, 정확한 검색 결과가 노출될 가능성이 높아진다.
SEO는 Search Engine Optimization의 약어로, 검색 엔진 최적화를 의미합니다.
SEO는 웹 페이지를 검색 엔진 상위 결과에 노출시키는 기법을 의미합니다.- 코드의 가독성 향상
Non-Semantic 태그만을 사용하는 것보다 Semantic 태그를 사용해 해당 태그의 사용 용도나 의미를 정확하게 전달해 코드의 가독성이 높아지고, 유지보수나 협업 작업등이 용이해진다.
📓 웹 페이지 구조를 나타낼 때 사용하는 Semantic Tag
| 웹 페이지 구조를 나타낼 때 사용하는 Semantic tag |
설명 |
|---|---|
| header | 사이트의 머리부분, 전체 페이지의 머릿말 |
| nav |
웹페이지의 메뉴, 목차 등 같은 사이트 안의 문서나 다른 사이트로 연결하는 링크 |
| main |
main content 영역 문서 내 1번만 사용 가능 다른 태그들의 하위로 작성할 수 없다. |
| section |
본문의 article을 포함하는 부분 주제별 컨텐츠를 묶을 때 사용 페이지의 각각의 영역을 구분할 때 사용 |
| article | 본문의 주 내용이 들어가는 부분 |
| aside | 본문과 별개의 내용을 포함하는 부분 |
| footer |
페이지의 바닥 부분 사이트 관련 연락처 정보와 저작권 정보를 표시 |
