TIL - 시맨틱태그

rain98·2021년 5월 10일

TIL html

TIL

목록 보기

9/32

시맨틱(Semantic) 태그란?

시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다.

HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.

예를 들어, <div> 태그는 non-semantic 태그라고 할 수 있고, <table> ,<article> 등의 태그는 semantic 태그라고 볼 수 있다.
일반적으로 <div> 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알 수가 없다.

하지만 시맨틱 태그를 사용한다면 <table>, <article> 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다.

좀 더 자세히 살펴보면,

이전의 html에서 header를 표현하기 위해 아래와 같이 <div> 태그를 사용하여
개발자들이 자유롭게 class명이나 id를 정의하였다.
이렇게 되면 요소의 의미를 명확하게 정의가 되지않는다.

<div class = "header">header</div>

반면 <header>태그는 "header"를 의미한다는 뜻을 내포하고 있기 때문에 자신의 컨텐츠를 명확하게 정의하고 있다.

<header>header</header>

시맨틱태그를 사용하는 이유?

🔥🔥🔥DIV 지옥 탈출🔥🔥🔥

기존에는 <div> 태그 안에 id나 class 속성으로 개발자별로 각자 이름을 지정하였다.

즉 문서 내에 들어가는 목록이나 강조 등의 미시적인 부분에는 의미가 있었지만, 레이아웃에서 이게 메뉴인지 메인 컨텐츠인지 서브 컨텐츠인지 정확하게 분류할 수 있는 태그는 없었기 때문에 보기에도 힘든<div> 지옥인 경우가 많았다.

보기만 해도 끔찍하다

하지만 시맨틱 태그를 사용하여 지옥을 탈출 할 수 있다.

🔎검색과 데이터 베이스 그리고 시맨틱 웹

시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

시맨틱 웹이란 웹이 존재하는 수많은 웹페이지들에 메타데이터를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터 베이스로 구축하고자 한다.

태그가 의미를 가짐으로써 검색엔진의 크롤링에게 사이트에 대한 정보를 비교적 정확히 제공할 수 있게 된다.

한마디로 조금더 검색 사이트에서 어디가 내용인지를 알 수 있어서 검색 노출을 용이
하게 할 수 있다는것이다.

정보 접근성 (웹 접근성) 점수 증가

시맨틱 태그를 사용한 레이아웃은 컴퓨터가 읽어낼 수 있다.
궁극적으로 시각장애인에게 사이트의 어디가 본문인지 아닌지 알려줄 수 있다는 장점이 있다.

HTML5에서의 시맨틱 요소

<article> :
내용을 정의한다.
<aside> :
페이지 콘텐츠를 제외한 콘텐츠를 정의한다
링크, 광고, 사이드바 표시 등.
<details> :
사용자가 보거나 숨길 수있는 추가 세부 정보를 정의한다.
<figcaption> :
<figure>요소에 대한 캡션을 정의한다.
<figure> :
일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정한다.
<footer> :
문서 또는 섹션의 바닥글을 지정한다.
주로 저작권, 연락처 정보 등 내용이 삽입되며
<header>, <section>, <article> 등 다른 레이아웃 사용가능.
<header> :
문서나 섹션의 머릿글을 지정한다.
사이트 맨 위쪽이나 왼쪽에 사용하며 헤더 안에<form> 태그를 이용, 검색창을 넣거나 <nav>태그를 이용해 사이트메뉴를 넣는다.
<main> :
문서의 주요 내용을 지정한다.
<mark> :
강조표시된 텍스트를 정의한다.
형광펜을 칠한 것처럼 노랗게 칠해진다.
<nav> :
네비게이션 링크를 정의한다.
같은 사이트내의 링크나 다른 사이트로의 링크들의 모음이다.
<section> :
<header>,<footer>와 함께 문서의 구역을 정의한다.
<section>안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣는다.
<summary> :
<details> 요소를 위한 눈에 보이는 제목을 정의한다.
<time> :
날짜/시간을 정의한다.

시맨틱 태그의 활용

그러면 이를 통해 어떻게 시맨틱 태그를 어떻게 활용 할까?

1. 남들과 코딩할때 (가독성이 좋다.)

일단 우선적으로 의미를 부여하면서 HTML작성이 가능하므로 가독성이 좋다. HTML코드를 읽어내기가 빠르며 읽기가 편하기 때문에 남들과 코드를 공유하거나 같은 작업을 할때 시맨틱 태그를 사용하면 좋다.

2. 검색을 통해 노출이 되고싶을때 (정보 접근성 점수 증가)

예시를 들어보면 img태그를 사용할 경우 alt, class 등으로 해당 이미지에 대한 정보를 전달할 수 있어 정보 접근성 점수가 증가한다. 이로인해서 공유와 검색이 유리해지기 때문에 검색으로 사이트가 노출되고 하고 싶을때 사용하는 것이 좋다. 반면 css를 통해 작성 할 경우(background-image) 속성을 사용 할 수 없어 간편하게 개인 프로젝트 할때 유리하다.