[TIL] HTML Semantic Tag What & Why

html lgoo

1. 시멘틱 태그(Semantic Tag)란

◎ 시멘틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다.

 

• non-semantic tag : <div>와 <span> 등 자신의 컨텐츠에 대해 아무것도 설명해주지 않는다.

• semantic tag : <header>, <article>, <img>, <footer> 등 자신의 컨텐츠를 명확하게 정의한다.

2. 시멘틱 태그(Semantic Tag)의 종류

◎ 시멘틱 태그의 요소는 다음과 같다.

 

태그	설명
<article>	내용을 정의힌다.
<aside>	페이지 컨텐츠를 제외한 콘텐츠를 정의한다. 링크, 광고, 사이드바 표시 등.
<detailes>	사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의한다.
<figcaption>	<figure> 요소에 대한 캡션을 정의한다.
<fiure>	일러스트레이션, 다이어그램 등과 같은 자체 포함 된 콘텐츠를 지정한다.
<footer>	문서나 섹션의 머리글을 지정한다. 주로 저작권, 연락처 정보 등 내용이 삽입된다.
<header>	문서나 섹션의 머리글을 지정 한다. 사이트 맨 위쪽이나 왼쪽에 사용하며 헤어 안에 <form> 태그를 이용, 검색창을 넣거나 <nav> 태그를 이용해서 사이트 메뉴를 넣는다.
<main>	문서의 주요 내용을 지정한다.
<mark>	강조 표시된 텍스트를 지정한다. 노란색 형광펜을 칠한 것처럼 나온다.
<nav>	내비게이션 링크를 정의한다. 같은 사이트 내의 링크나 다른 사이트로의 링크들의 모음이다.
<section>	<header>, <footer>와 함께 문서의 구역을 정의한다. <section> 안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣는다.
<summary>	<details> 요소를 위한 눈에 보이는 제목을 정의한다.
<time>	날짜/시간을 정의한다.
<hn>	각 웹 콘텐츠 영역에 제목을 표시할 때 사용한다. <h1>은 페이지당 한 번만 사용하는 것이 권장된다.
<address>	웹페이지 저작자의 이름이나 제작자의 웹페이지, 이메일 주소 등의 연락처를 넣기 위한 태그이다. 보통 <footer> 태그 안에 많이 사용된다.

위의 요소들 중 많이 사용되는 요소는 아래와 같다.

<article>, <aside>, <header>, <nav>, <main>, <section>, <footer> 

3. 시멘틱 태그(Semantic Tag) 사용 예시

◎ 시멘틱 태그를 사용하여 레이아웃을 직접 구성한 코드와 브라우저 화면을 봐보자.

 

semactic tag code

semactic tag browser

시멘틱 태그를 사용하여 레이아웃을 구성하였다.

HTML5 이전에는 heder와 footer의 구역을 나눌 때는, 아래 코드와 같이 <div>와 <span>에 id와 class를 붙여 구역을 나누고 스타일을 지정했다.

<div class="header">header영역 입니다.</div>
<div class="footer">footer영역 입니다.</div>

하지만 HTML5부터는 아래의 코드처럼 사용하여 구역을 명확히 나눌 수 있으며, 다른 사람들도 태그를 보며 어떤 것을 나타내는지 쉽게 이해할 수 있다.

<header>header영역 입니다.</header>
<footer>footer영역 입니다.</footer>

4. 시멘틱 태그(Semantic Tag) 사용 이유

• 확실한 의미부여

• SEO(Search Engine Optimization)

4-1. 확실한 의미부여

◎ Semantic Tag는 HTM로 만든 문서에 추가적으로 의미를 부여해준다. 무의미한 요소(Non-Semantic Element)로 문서를 작성할 경우, HTML 문서를 접하는 사람이 어떤 데이터를 봐야 할지, 어떤 데이터를 제공하는지 파악하기 어렵다.

Semantic Tag를 사용하여 의미를 부여해준다면, 유지 보수하거나 소프트웨어 재공학을 위해 다시 문서를 분석할 경우, 시간을 절약할 수 있다.

의미를 올바르게 부여해주는 행위만으로 나에게 혹은 동료 개발자에게 코드의 시간을 절약해줄 수 있다.

4-2. SEO(Search Engine Optimization)

◎ 검색 엔진 최적화(SEO(Search Engine Optimization)는 검색엔진이 웹 페이지의 자료를 수집하거나 순위를 방식에 맞게 웹페이지를 구성하여 검색 결과의 상위에 나올 수 있게 하는 행위를 말한다.

검색엔진은 결과를 보여줄 때 HTML의 태그를 분석하기 때문에 Semantic Tag를 사용하여 검색엔진이 유의미한 결과를 낳을 수 있도록 해야 한다.

※ 참조

https://www.w3schools.com/html/html5_semantic_elements.asp

HTML Semantic Elements