-
시맨틱 태그란 ?
: Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그- div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없다.
- form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다.
-
시맨틱 태그를 사용해야 하는 이유
-
SEO ( Search engine optimization )
: 검색을 최적화, 브라우저의 검색 엔진이 내가 만든 웹을 어떤 검색 결과에 띄워줘야 할지 정하는 요소. -
웹 접근성
: 웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹은 문제없이 동작한다. -
유지보수성
: 단순히, div tag로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수있기 때문에, 다른 개발자들이 코드를 유지보수 편리.
-
시맨틱 태그를 정하는 기준 : 사용할 HTML은 태그는 스타일 기반이 아닌 채워질 데이터를 기반으로 결정되어야 한다. (예를들어 블로그 글 제목 스타일이 p태그를 사용하는 단락과 같은 디자인이더라도, p가 아닌 h1을 사용해야한다.)
-> 어떻게 보여야 하는지는 전적으로 CSS의 책임이다. (이부분 헷갈리지 말자!) -
예시
<header>머리글, 제목, 헤더
<nav>네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현
<aside>좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그
<section>말그데로 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여러개의 콘텐츠의 그룹화
<article>기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용.
<footer>바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그
<address>콘텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담는 기능
<hgroup>제목과 관련된 부제목을 묶는 태그
<main>이름처럼 문서<body>의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.
<details>주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.
<figure>이미지, 다이어그램, 사진 등 독립적인 컨튼츠 정의시 사용
<figcaption> <figure>요소의 설명 캔션(caption) 정의
<mark>현재 맥락에 관련이 깊거나 중요한 부분 강조
<time>시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현
<summary>details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다. -
비슷한 태그의 사용용도 구분
: 사용자의 특정한 액션(login)을 위해서는 button을 사용하는 게 맞고, 순수하게 어디론가 이동하는 게 목적이라면 a 태그를 사용하는 게 맞다.
