Prologue
웹페이지를 살펴보면 우리는 쉽게 어떤 부분이 제목이고 어떤 부분이 클릭해야 움직이고 어떤 부분이 내용인지 쉽게 파악이 가능하지만 컴퓨터는 그렇지가 않습니다.
따라서 검색 엔진은 어떠한 태그가 어떠한 기능을 하는지 분별할 수 없고 웹페이지에서 데이터를 효율적으로 추출할 수가 없습니다.
이를 해결하고자 만든것이 Sementic Tag입니다.
1. Sementic Tag란?
HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써, 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그를 말합니다.
즉, 의미 없는 태그(span, div등)을 사용 하기 보다 의미있는 태그(header, footer, nav, article등)을 사용 함으로써 좀 더 명시적이면서도 직관적인 구조의 설계가 가능해집니다.
2. Sementic Tag를 사용하면 좋은점(장점)
- SEO(Search Engine Optimization)에 유리
: 검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해줍니다. - 웹 접근성에 효율적
: 스크린리더와 같은 환경에서 웹 접근성과 사용성을 향상시켜줍니다. (스크린리더가 화면을 읽을때 특정 효과가 발생) - 유지보수의 용이성
: 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하며, 해당 태그 영역에 채워야할 데이터를 예측하고 작업할 수 있습니다.
3. Sementic Tag의 활용예시
3-1. 텍스트 서식 관련 태그
// bold
<p><span style="font-weight: bold;">텍스트</span>가 굵어진다.</p>
<p><b>텍스트</b>가 굵어진다.</p>
<p><strong>텍스트</strong>가 굵어진다.</p>
// italic
<p><span style="font-style: italic;">텍스트</span>가 기울어진다.</p>
<p><i>텍스트</i>가 기울어진다.</p>
<p><em>텍스트</em>가 기울어진다.</p>위 각 3개씩의 p태그는 화면상에 완전히 같게 보입니다.
하지만 strong, em 태그만 스크린리더가 강조하여 읽고, 검색엔진에도 강조된 문장으로 전달합니다.
// mark
<p><span style="background-color: yellow;">텍스트</span>가 형광 마크로 강조된다.</p>
<p><mark>텍스트</mark>가 형광 마크로 강조된다.</p>
// del
<p><span style="text-decoration: line-through;">텍스트</span>가 가운데줄이 쳐진다.</p>
<p><del>텍스트</del>가 가운데줄이 쳐진다.</p>
// ins
<p><span style="text-decoration: underline;">텍스트</span>가 밑줄이 쳐진다.</p>
<p><ins>텍스트</ins>가 밑줄이 쳐진다.</p>
// sub
<sub>아래첨자</sub>
// sup
<sup>위첨자</sup>그외에도 위같은 태그들로 서식이 가능합니다.
3-1. 텍스트 인용 관련 태그
// 긴 인용문구 (cite="출처" 속성 사용가능)
<blockquote cite="http://www.tcpschool.com/html-tags/blockquote">
HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는
의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여
CSS의 사용을 권장한다.
</blockquote>
// 짧은 인용문구
<q>2019년 2월 현재 가장 높은 점유율을 보이는 웹 브라우저는 크롬 브라우저</q>
// 약자 (title="풀네임" 속성 사용가능)
<abbr title="International Olympic Committee">IOC</abbr>
// 글의 저자 또는 회사와 연락할 수 있는 정보, 주소
<address>
서울시 강남구 역삼동 <br>
Tel: (02)123-4567 | Fax: (02)234-5678
</address>
// 태그는 책이나 음악, 영화, 예술 작품 등과 같은 창작물의 제목을 정의
<p><cite>Mona Lisa</cite> 레오나르도 다 빈치, 1503년</p>위의 태그들로 인용글을 작성할 수 있습니다.
3-2. html구조 관련 태그
// 여러 문단을 묶는 태그, 독립적인 콘텐츠를 정의할 때 사용
<article></article>
// 콘텐츠나 페이지의 외곽에 위치한 요소들을 묶는 태그, 보통 퀵메뉴나 스크롤탑버튼등에 사용
<aside></aside>
// details: 사용자가 보거나 숨길 수 있는 세부 콘텐츠를 정의할 때 사용
// summary: details 태그를 통해 보여지는 콘텐츠를 담는 태그로 사용
<details>
<summary>사내 공지사항</summary>
<div>알립니다. ~~</div>
</details>
// figure: 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정
// figcaption: figure 태그로 정의한 일러스트레이션, 다이어그램, 사진등의 제목설명등을 작성
<figure>
<img src="images/img.jpg">
<figcaption>어떠한 배경 사진</figcaption>
</figure>
// 페이지나 일부분의 머리말(헤더)부분을 지정
<header></header>
// 페이지나 일부분의 꼬리말(푸더)부분을 지정
<footer></footer>
// 페이지의 가장 중요한 메인 부분을 지정
<main></main>
// 페이지의 네비게이션 부분을 지정
<nav></nav>
// 페이지의 일부분을 지정
<section></section>💡 시멘틱 태그들에 대해 알아보았고, 그냥 화면에 잘 나오는것이 다가 아니라 태그를 작성할때 의식적으로 노력하며 의미있는 요소를 적재적소에 사용해야 할것같다.
느리지만 천천히.