Sementic한 HTML

SooSoo·2021년 11월 6일

공부정리

목록 보기

6/7

동기

HTML을 공부하다보면 Semantic HTML이란 표현을 가끔 마주한다. 다른 것들부터 이해하기 바빠 대충 이해하고 넘기던 개념이기도 하다. 단순히 Header tag와 Footer tag 정도 맞춰주면 되지 않나? 라고 생각했었다.

최근에 테이블 형식의 컴포넌트를 생기면서 table tag를 사용할 일이 있었다.

그러면서 잊고 있던 Semantic HTML을 공부해봐야겠다는 생각이 들었다.

div를 쓰든 table tag를 쓰든 렌더링 된 결과물은 같다.

무슨 이유로 우리는 Semantic함을 추구하는 걸까.

Sementic이란

우선 HTML이 어떤 것인지부터 생각해보자.
HTML은 Hypertext Markup Language이다.

그러면 마크업의 정의는 무엇일까.

위키백과에 따르면 마크업 언어의 정의는 다음과 같다.

마크업 언어(markup 言語, markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.

이에 따라 HTML은 웹페이지가 어떻게 구조화되어 있는지 브라우저에게 알려주는 마크업 언어라고 정의할 수 있다.(MDN 참조)

HTML은 프로그래밍 언어가 아니다..!

HTML은 브라우저에게 페이지의 구조를 알려주는 역할이다.

위의 정의들을 종합해보면

Sementic하게 HTML을 정의한다는 것은 웹페이지가 어떤 구조로 이루어져 있는지 브라우저가 해석하기 편하게 HTML을 작성하는 것을 의미한다.

그리고 HTML5에서는 이를 위한 semantic tag를 제공한다.

→ <section / >, <article / >, <footer / > 등

(HTML4에서도 가능했지만, div tag에서 sementic을 class에 넣어주는 방식으로 구현했어야한다.)

컴퓨터가 이해하기 편하다는 것은 다음과 같은 의미이다.

우리는 h1 태그와 p 태그를 사용해서 텍스트를 표현할 때, 스타일을 적용하지 않으면 일반적인 형태의 텍스트가 동일하게 표시될 것이다.

그러나 컴퓨터는 태그를 보고 엘리먼트의 중요성을 다르게 판단한다.

h1 태그를 사용했을 경우에는 그 페이지 또는 섹션의 타이틀이라는 의미이기 때문에 페이지에서 더 큰 중요도를 가지고 있다고 브라우저는 해석한다.

그러면 사용자가 아닌 컴퓨터가 이해할 수 있게 페이지를 구성하는 것은 왜 중요할까? 다음 단계로 넘어가보자. 총 2가지의 이유가 있다.

Sementic 해야하는 이유

SEO
접근성

SEO

검색엔진 최적화의 목적은 페이지의 컨텐츠가 필요한 이용자에게 정확히 닿는 것이다. Semantic하게 작성된 HTML은 페이지의 어떤 컨텐츠가 중요한지 서치엔진이 판단하도록 돕는다. 앞서 소개한 내용처럼 h1 태그는 p 태그에 비해 HTML 구조에서 더 큰 중요성을 가진 것으로 판단된다.

접근성

일반 사용자들에 비해 웹페이지에 대한 접근이 용이하지 않은 사용자들에게 Sementic한 HTML이 도움이 될 수 있다. 스크린리더가 HTML을 해석할 때에도 태그에 따라 다르게 해석할 수 있다고 한다. 때문에 컴퓨터의 이해를 돕는 것은 특정 사용자의 이해를 돕는 역할까지 이어질 수 있다.

조금 더 나아간 활용법

Sementic한 HTML은 Apple watch 등 다른 디바이스에서 웹을 이용할 때에도 유용하게 이용될 수 있다.

We've brought Reader to watchOS 5 where it automatically activates when following links to text heavy web pages. It's important to ensure that Reader draws out the key parts of your web page by using semantic markup to reinforce the meaning and purpose of elements in the document. Let's walk through an example. First, we indicate which parts of the page are the most important by wrapping it in an article tag. Specifically, enclosing these header elements inside the article ensure that they all appear in Reader.

watchOS의 읽기 모드에 대한 애플의 소개대본 중 일부이다. Sementic한 HTML 구조를 파악하여 중요한 내용을 선별하고 작은 화면에 필요한 정보를 추려낸다.

추가로, 마이크로데이터를 활용하여 이 동작을 더 확실하게 수행할 수 있는 것 같다. 마이크로데이터에 대해서는 추후에 더 조사해보아야겠다.

Sementic Element

이제 Sementic Element 중 대표적인 것들을 살펴보며 어떻게 써야할지 생각해보자.

전체 페이지의 구성에서 구획을 나눌 때 사용하는 태그부터 살펴본다.

<header/ >

일반적으로 제목, 로고 등이 배치되는 공간이다.

Header와 Footer는 중첩해서 사용하지 않지만, 한 페이지에 한번만 사용할 필요는 없다. (Article 태그 내에서도 사용할 수 있다.)

<nav/ >

HTML의 장점 중 하나는 문서들 간 이동이 가능하다는 점이다.

nav 태그 내에서 링크들을 그룹화하여 제공한다.

<main/ >

해당 페이지의 메인 컨텐츠를 넣어주는 공간이다.
문서에서 한번만 사용해줘야한다.

<aside/ >

메인 태그와 관련된 내용이 아니라면?aside 태그에 넣어서 해결한다. 이를 통해 extra content임을 표현한다.

<footer/ >

Header 태그와 함께 부가적인 정보를 표기하는데 사용한다.

위의 태그들은 쓰임이 직관적이어서 적용하기 쉽다.

좀 더 세부적인 태그들로 가보자.

<article/ >

독립된 컨텐츠를 표현하기 위해 사용하는 태그이다.

태그내에 반드시 제목이 포함되어야 한다.

내용이 독립적이어야한다. → 블로그 글 등 하나의 독립적인 포스트. 스스로 독자적인 페이지일수도 있고 페이지 컨텐츠 중 하나도 등장할 수도 있다.

이전에 언급한대로 watchOS에 컨텐츠가 표시되는데 중요한 역할을 한다.

<section/ >

관심사의 분리 용도로 사용한다.

각 컨텐츠 내에서도 여러 관심사가 있을 수 있으므로 Article 내에 여러 개의 section으로 구성할 수도 있고, Section 내에 여러 개의 article이 있을 수도 있다.

역시 태그내에 제목요소가 포함되어야한다.

h1 - h6

해당 구획의 제목을 표현한다.

단계상 h1에서 h6으로 순차적으로 사용해야한다.

페이지 당 하나의 h1을 사용하는게 베스트이다.
(책의 제목이 두개일 수는 없다.)

글씨크기는 h 태그가 아닌 CSS로 설정해준다.

Table, th, tr, td

table 태그는 표를 만드는데 사용한다.

th 태그는 표의 제목을 의미.

tr 태그는 가로줄, td 태그는 하나의 셀을 의미한다.

정리

리액트에서 컴포넌트를 만들거나 빠르게 개발을 진행하려고 하면 div 태그와 p 태그만 사용하게 되는 경우가 많았다. 배포까지 진행한 프로젝트가 많이 없었기 때문에 HTML의 완성도에 대해서는 신경을 덜 쓴 것 같다. 프론트엔드 개발은 커뮤니케이션이 중요한 포지션이라고 생각한다. 페이지의 완성도를 위해 브라우저와도 잘 소통하도록 노력해야겠다.