HTML 시멘틱 태그 사용이유

<div>로만 HTML의 거의 모든 태그를 사용하던 도중, 이는 문서자체가 구조적이지 못하게하고, HTML5에서 추가된 Sementic(의미론적인)특징을 사용하지 못하는 것이라는 유튜브를 보고 이를 정리한 글입니다.

 

사용해야 하는 이유

의미부여

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

사실 만능 <div>를 사용하다가 Semantic 마크업들을 찾는 행위자체가 개발하는데 시간을 더 잡아먹을 것은 사실입니다. 하지만, Semantic 마크업을 사용하여 의미를 부여해준다면, 유지보수하거나 소프트웨어 재공학을 위해 다시 문서를 분석할 경우, 시간을 절약할 수 있을 것입니다.

변수명을 지정할 때, camelCase로 할 것 인지, kebab-case로 할 것인지 고민을 하고, 변수명의 의미를 주기위해 개발자끼리 표준을 만들거나, 서로간의 약속을합니다. 이를 통해 리팩토링하거나 디버깅할 때 소요하는 시간을 줄이곤합니다.

Semantic 마크업을 사용하는 행위는 문서에 의미를 부여해주는 행위입니다. 의미를 올바르게 부여해주는 행위만으로 미래의 나에게 혹은 개발자 동료들에게 더 나은 미래 혹은 더 빠른 퇴근을 선물해 줄 수 있습니다.

SEO

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

SEO를 위해서는 검색어를 페이지에 적절하게 배치해야 합니다. 검색엔진은 결과를 보여줄 때, HTML의 태그들을 분석합니다. 이 때, Semantic한 문서는 검색엔진이 유의미한 결과를 낳을 수 있도록 합니다.

 

Non-Semantic elements

div

<div> division의 약자로 포함하고 있는 컨텐츠가 어떠한 의미도 갖지 않음을 이야가힙니다. 논리적인 구분을 정의하는 태그이며, 각각의 블록을 갖습니다.

<div>는 레이아웃 잡는 용도로 많이 사용되며 주로 class속성을 같이 사용합니다.

span

<span>요소는 <div>와 마찬가지로 아무 의미를 갖지 않는 요소입니다.

<span>태그안에 아무런 컨텐츠가 없다면 해당 부분은 아무런 변화가 없지만 <span태그 내에 객체가 들어간다면, 그 객체의 크기만큼 공간이 할당됩니다.

 

HTML5 Semantic elements

<article>: 문서나 사이트에서 독립된 컨텐츠 영역을 지정합니다. 이 부분을 다른 곳에 옮기더라도 분리되어지고, 의미가 통해야합니다.

<aside>: 페이지의 왼쪽 혹은 오른쪽에 위치한 컨텐츠영역을 의미합니다.

<details>: 추가정보를 기술하는 영역을 의미합니다.

<dialog>: 대화상자나 창을 지정하며 open속성을 사용하여 숨기거나 보이도록 할 수 있습니다.

<figure>: 문서흐름상 이해를 위해 필요한 그림, 동영상을 포함할때 사용합니다.

<figcaption>: <figure>요소의 제목을 지정합니다.

<footer>: 문서나 Section의 하단 정보 영역을 의미합니다.

<header>: 문서나 Serction의 상단 정보 영역을 의미합니다.

<main>: 문서의 주 컨텐츠영역을 지정합니다.

<mark>: 마크되거나 강조된 텍스트를 의미합니다.

<menuitem>: 팝업메뉴의 아이템을 지정합니다.

<nav>: 문서의 네비게이션을 의미합니다.

<section>: 페이지의 주요부분을 의미하며, 긴 글의 세부사항과 같은 관련 컨텐츠의 묶음, 또는 탭 키 사용을 요하는 인터페이스를 가진 웹 어플리케이션에서의 페이지의 묶음 단위를 의미합니다.

 

참고자료

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