시멘틱 태그란 ???
시멘틱은 (의미론적인)이라는 뜻이다. 풀이를 해보자면 의미있는 태그를 말한다.
웹 사이트에서 내용이 잘 나온다고 전부가 아니다.
조금 더 자세히 알아보자면 웹 문서 자체가 의미가 있어야 가치가 있는것이다.
나중에 배울 CSS로 아무리 멋있고, 화려하게 디자인을 해도 문서 자체의 의미가없으면 내용만 있는 껍데기일 뿐이다.
말이 길었지만 다시 돌아와서 시멘틱 태그를 사용하면 무엇이 좋은지 알아보자.
- 시각 장애인이 스크린 리더기를 통해 웹 사이트의 구조를 쉽게 파악이 가능하다.
- 작업자 입장에서 소스코드를 볼때 파악하기 쉽다(가독성)
- 검색엔진최적화(SEO)로 만드는 사이트의 우선순위를 올릴 수 있다.
SEO(검색엔진 최적화: Search Engine Optimization)
SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다.
검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)
인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.
주요 시멘틱 태그
1. header 태그
일반적으로 header태그에는 로고와 메뉴를 감싸는 부분을 말한다.
- 하나 이상의 제목 요소(h1 ~ h6)
- 로고(logo)나 아이콘(icon)
- 저자(author) 정보
<header>
<h1>
<a>
Logo
</a>
</h1>
<nav>
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
</ul>
</nav>
</header>2. footer 태그
푸터태그에는 회사정보와 관련된 내용이 들어간다.
- 저자(author) 정보
- 저작권 정보
- 연락처
- 사이트맵(sitemap)
- 페이지 맨 위로 되돌아갈 수 있는 Top 버튼
- 연관 페이지 등
3. 메뉴를 나타내는 nav태그
nav태그는 각각의 메뉴들을 묶은것을 말한다
<nav>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>4. 독립적인 컨텐츠를 나타내는 article태그
블로그의 포스트나 뉴스사이트의 기사처럼 독립된 내용에 사용한다.
- 포럼(forum) 포스트
- 블로그 포스트
- 보도 기사
- 논평(comment) 등
5. 핵심내용을 나타내는 main태그
메인 컨텐츠(내용)을 정의할때 사용한다.
- 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다.
의미있는태그(sementic)와 의미없는태그(non-sementic)
- div와 span태그는(non-sementic) 의미가 없는 태그로 분류가 됩니다.
- div와 span을 제외하고는 sementic으로 분류가 됩니다.
이외에도 굉장히 많다. W3C SCHOOL 사이트에 가면 다양한 의미있는 태그들을 볼 수 있다. https://www.w3schools.com/html/html5_semantic_elements.asp
참고자료
https://poiemaweb.com/html5-semantic-web
http://www.tcpschool.com/html-tags/main
