HTML : Semantic하게 작성해야하는 이유

윤남주·2021년 12월 27일

Semantic Web의 중요성

HTML 파일은 document이다 (첫 번째 줄에 <!DOCTYPE>을 선언하는 것에서부터 명백하게 드러난다)

모든 웹의 근간이 되는 문서 이다.
그렇기 때문에 원칙적으로 모든 스타일을 제거하고도 HTML 하나만으로 모든 정보가 전달되어야 한다.

CSS를 이용하면 아무런 의미가 없는 div 태그 하나만으로 거의 모든 마크업이 가능하다. 스타일을 주어서 인간이 시각적으로 보기엔 전혀 문제 없게 만들 수 있다.

하지만 의미가 없는 태그인 div와 span를 남용한다면, 시각적 정보 외의 메타데이터가 부족하여 기계에게 의미전달이 충분하게 되지 않는다. 이것이 Semantic Web과 Semantic tag의 존재 이유이다.

1. 기계와 사람의 일치

Semantic 하게 마크업을 한다는 것은 적절한 의미의 태그들을 사용하여 문서를 정보 구조에 맞게 마크업한다는 것이다. 좋은 정보구조는 해당 문서를 사람과 기계가 동일하게 이해하도록 도와준다.

사람은 CSS로 꾸며진 웹을 통해 볼드로 적혀진 부분이 중요한 정보이고, 한 제목과 한 문단이 한 덩어리의 정보를 만든다는 것을 시각적으로 인식할 수 있다.

기계는 <em> 태그를 통하여 해당 부분이 중요하다는 것을, <h1> 을 통하여 제목이라는 것을, <article> 을 통하여, 한 덩어리의 정보라는 것을 인식할 수 있다.

2. SEO (Search Engine Optimization)

구글과 같은 검색 엔진들은 HTML 문서로 검색 결과를 도출해낸다.

만약 우리 회사를 홍보하고 싶은데, 회사 이름을 <p>태그 안에 넣는다고 한다면, <h1>태그에 넣었을 때보다 훨씬 더 약한 의미와 연관성을 갖게되고, 이는 SEO에 악영향을 끼친다.

만약 이 글을 이미지로 제작하여 이미지 하나만 포스팅 할 경우, 검색 엔진은 아무 내용도 인식하지 못하고 내 포스트는 노출되지 못한다.

3. 웹 접근성

웹 접근성 (Web Accessibility)
누구나 인터넷(웹) 개별 사이트에 접근하기 쉽게 기술적으로 보장하는 일
특히 장애인이거나 나이가 많아 인터넷을 이용하기 어려운 이를 돕는 게 목표다

시각 장애인은 스크린 리더로 웹을 본다. 스크린 리더는 HTML 문서를 읽어내려가며, 각 요소들의 내용을 음성으로 알려주는 장치이다.

사진, 영상 등의 미디어의 경우 alt 속성에 있는 텍스트를 읽어주어, 시각 장애인도 문제없이 모든 정보에 접근할 수 있도록 도와준다. 그렇기 때문에 마크업을 하는 개발자는 모든 사람이 내가 만든 문서에 접근할 수 있도록 도움을 주는 장치들을 마련해야한다.

Semantic Tag를 이용하여 문서를 제작하면 접근성을 높일 수 있다.
만약 여러 항목을 열거하는 경우 모두 <span> 태그에 넣어 리스트를 만드는 것보다 리스트의 의미를 가지고 있는 <ul> <li> 태그를 사용하는 것이 좋다.

시맨틱 태그를 이용하여 마크업을 한 이후엔, alt, aria-label 등의 속성을 사용해 정보를 채워 넣어준다. 디자인 요소로만 사용한 태그는 aria-hidden을 사용하여 스크린 리더가 무시하도록 할 수 있다.

4. 간편한 CSS 작업

개발자들이 가장 싫어하는 것은 일일히 작업하는 것이다.
하지만 <div> 태그로만 작업한다면 일일히 모든 태그에 클래스명과 아이디를 주어야하고, 코드가 더러워지고, 어디가 무슨 클래스명인지 다 외워야하고... 힘들어진다.

Semantic Tag로 마크업을 한 경우 훨씬 깔끔하게 일괄적으로 스타일을 적용할 수 있다.

예를 들어 해당 페이지의 모든 설명 문단에 background-color: black;을 주고싶다면 <div> 사용 후 클래스를 주는 것보다는 <p>로 마크업하고 스타일을 주는 것이 훨씬 간편하다.

5. 유지 보수, 협업

더러운 코드는 보기 싫고, 차근차근 읽지 않는다면 무슨 의미인지 한눈에 알아보기 힘들다.
다른 사람들도 수정을 하고, 협업을 해야하는 페이지라면 모두가 알아보기 쉽게 정갈한 코드를 짜야한다.
Semantic Markup은 기계에게도 의미를 전달해주지만, 동료 개발자에게도 의미를 전달해준다.

Semantic Tag

<article>
문서에서의 독립된 콘텐츠 영역

<aside>
사이드 영역, 광고 등

<footer>
푸터, 웹페이지의 꼬리말

<header>
헤더, 웹페이지의 머리말

<main>
주요 콘텐츠 영역, 한 페이지에 하나만 사용!

<nav>
네비게이션, 웹사이트 탐색 영역

<section>
섹션, 계층 나누기. 여러 콘텐츠가 들어갈 수 있음

💡 Sectioning Elements
section, article, nav, aside
Sectioning Element 안에는 항상 heading 필요

img vs background-image

이미지를 넣는 두 가지 방법 img 와 background-image에는 어떤 차이가 있을지 위에서 말한 Semantic Web의 장점을 기반으로 알아보자.

img를 사용

이미지 또한 콘텐츠의 일부분일 때
이미지가 콘텐츠, 즉 의미를 전달하는 부분일 경우 올바른 alt 속성 사용과 함께 마크업한다.
이미지가 중요한 의미를 가질 때
이미지가 콘텐츠는 아니지만, 중요한 의미를 전달할 경우 (예. 경고 이미지).
해당 이미지가 없을 경우 강조도가 많이 낮아진다고 생각이 될 경우.
SEO, 접근성 향상을 위하여
alt 속성을 통하여 검색 엔진에 노출되고, 스크린 리더가 읽을 수 있다.
로딩 속도가 더 빠름
다른 조치 없이 background-image만 사용하는 경우와 비교하면 HTML에서 불러오는 것이 더 빠르다.
인쇄 시 포함되길 원할 때

background-image를 사용

진짜 배경 이미지로 사용할 경우
뷰포트 전체를 덮는 배경 이미지를 넣을 경우 사용
CSS로 다루기가 더 편함
background-color, background-repeat, background-attachment, background-position, background-blend-mode 등의 다양한 제어 속성을 사용할 수 있음.
또한 이미지 위에 텍스트를 놓기 훨씬 편하다.
콘텐츠가 아닌 이미지
디자인적 요소로 쓰이거나 콘텐츠가 아닌 이미지라면 background-image를 사용하여 문서에서 제외시켜주는 것이 오히려 Semantic Web으로서의 가치를 높여준다.
이미지를 교체하는 경우
transition을 통해 이미지가 교체되길 원하는 경우, 혹은 애니메이션으로 이미지 위치를 움직이고 싶을 경우.
인쇄 시 포함되지 않길 원할 때