치춘짱베리굿나이스

Semantic하게 HTML 작성해보기 본문

ClientSide/html css

Semantic하게 HTML 작성해보기

치춘 2022. 12. 2. 03:40

Semantic하게~

개요

Semantic?

사전적으로는 ‘의미론적인, 의미의’ 라는 뜻이다

그렇다면 Semantic HTML 이라는 건 의미론적 HTML 이라는 뜻이 되겠다

단어만 보면 괜히 어렵고 뭔 말인지 모르겠고 그렇다

의미론적 HTML?

이런 페이지를 HTML로 한번 구성해 보자

 

<body>
    <div>
        <span>페이지 제목</span>
        <button>로그아웃</button>
    </div>
    <div>
        <span>소제목</span>
        <span>본문 본문 본문</span>
        <div>
            <div>리스트1</div>
            <div>리스트2</div>
            <div>리스트3</div>
        </div>
    </div>
    <div>
        <span>copyright by chichoon</span>
    </div>
</body>

박스는 div로, 문자열은 span으로 처리하다 보면 위와 같은 문서가 나올 것이다

완전 div 투성이다! 물론 div로 모든 코드를 구성할 수는 있지만, 내용물을 보기 전까진 각각이 무슨 역할을 하는지 알기도 힘들다

글자가 들어가는 곳도 전부 span으로 처리해 놓았다? 제목, 소제목, 본문 전부 span이다

 

코드만 보고 위의 이미지와 같은 결과물을 예상할 수 있을까? HTML 요소들이 위에서 아래로 배치된다는 점만 기억하면 어떤 형태인지 짐작은 가지만, 만약 스타일이 가미된다면?

어떤 요소는 왼쪽에 배치되고, 어떤 요소는 오른쪽에 배치될 텐데, 태그만 보고 요소를 짐작할 수 있을까? 물론 클래스나 id, 리액트에서의 컴포넌트명 등을 보면 구분이 가능하겠지만, html 태그만으로는 파악이 힘들어진다

 

<body>
    <header>
        <h1>페이지 제목</h1>
        <button>로그아웃</button>
    </header>
    <main>
        <h2>소제목</h2>
        <p>본문 본문 본문</p>
        <ul>
            <li>리스트1</li>
            <li>리스트2</li>
            <li>리스트3</li>
        </ul>
    </main>
    <footer>
        <small>copyright by chichoon</small>
    </footer>
</body>

아까와 비슷한 레이아웃을 가진 HTML 문서이다

여기서 header, main, footer 등의 태그들은 div와 똑같은 일을 하지만, 이름만 다르다

태그 이름만으로도 이 태그 트리가 무슨 역할을 하는지 개략적으로 파악 가능해졌다! 어느 요소가 헤더의 역할을 하고, 어느 요소가 최하단 푸터에 들어가는지, 어떤 것이 리스트인지, 큰 제목과 소제목은 각각 무엇인지 HTML 태그만으로 알 수 있다

고작 이름만 바뀌었을 뿐인데, 가독성이 훨씬 나아진 것을 볼 수 있다

 

결국 Semantic HTML이란? ‘의미론적 HTML’ 이라는 뜻처럼, 의미를 가진 HTML 태그들을 사용하여 페이지를 구성하는 것이다

물론 div와 span으로 HTML 파일을 도배해도 컴퓨터는 잘 해석하여 페이지를 띄워주지만, 사람이 보기에는 썩 좋지 못한 코드이므로 이를 컴퓨터도, 사람도 읽기 쉬운 형태로 만드는 것이 Semantic HTML의 주 목표라고 할 수 있겠다

왜 씨맨틱하게 HTML을 짜야 함?

SEO (Search Engine Optimization)

가장 대표적이고 잘 와닿는 이유로는 SEO가 있다

SEO는 검색엔진 최적화 라는 뜻으로, 검색 엔진이 내 사이트를 더 잘 식별하고, 내 사이트가 중요한 정보를 담고 있다고 판단하게끔 최적화해주는 것이다

 

쉽게 말해, 검색 엔진 최적화가 잘 되어 있을 경우 검색 엔진 (구글, 네이버 등) 최상단에 내 사이트를 노출시킬 수 있다

블로그 작성자는 광고를 더 많은 사람들에게 노출시킬 수 있기 때문에 수익을 올릴 수 있고, 여타 서비스 개발자라면 자신의 서비스를 검색 엔진 상위권에 노출시킴으로써 무료와 다름없이 서비스 홍보를 할 수 있다

그 말인즉슨 SEO는 수익으로 이어진다는 것!!! 근데 필자는 광고를 안 달았기 때문에 해당 없다… (ㅋ)

 

시맨틱한 HTML 문서가 검색 엔진 최적화로 이어지는 이유는, 검색 엔진이 웹 사이트를 크롤링하는 과정에서 시맨틱 태그들이 크롤링 봇의 빠른 데이터 식별을 돕기 때문이다

div, div, div, … 로 도배가 되어 있는 웹 사이트를 크롤링할 때는, 수많은 div들 중 어떤 div가 중요한 내용을 담고 있고 어떤 div가 덜 중요한 정보 (광고, 사이드바 등등…) 인지 알아채기가 힘들다

시맨틱한 태그 사용으로 검색 엔진에게도 ‘여기에 너가 원하는 중요한 정보들이 들어있고, 이건 덜 중요하니까 가중치를 낮게 부여해도 상관없어’ 라고 알려주는 것이다

접근성

또 다른 중대한 이유로는 접근성의 개선인데, 접근성이라 함은 장애를 가진 사용자나 미디어 취약 계층 등, 어떠한 제한 사항을 가진 이용자라도 불편 없이 서비스를 이용할 수 있는 정도를 뜻한다

접근성이 높을 수록 제한이 있는 사용자들도 쉽게 서비스를 이용할 수 있고 제약사항에 따른 불편함이 적으며, 접근성이 낮을 수록 미디어 취약 계층이 서비스를 사용하기 어려워진다

많은 사람들이 서비스를 이용하게끔 하는 것이 서비스 제공자의 궁극적인 목적인 만큼, 접근성을 높이는 것 또한 웹 디자인에서 매우 중요한 요소 중 하나라고 할 수 있겠다?

가독성 향상

스타일시트를 읽지 않고 HTML 문서 (또는 React의 렌더링 부분) 만 보고도 어떤 요소가 어떤 역할을 하는지 쉽게 파악할 수 있다

div만으로 도배되어 있는 문서는 어떤 노드가 어떤 역할을 하는지 명확하지 않은 한편, header나 nav 등은 이름에서부터 자신이 어떠한 내용을 담고 있는지 명시하고 있다

시맨틱 태그를 용도에 맞게 적재적소에 사용하면, 문서 전체의 가독성이 올라가며 이는 곧 협업의 용이성으로 이어진다

대표적인 시맨틱 태그 예시

HTML5부터 여러가지 시맨틱 태그들을 기본 제공한다

아래의 예시보다 훨씬 많은 시맨틱 태그들이 있으나, 보편적이고 의미가 명확한 것들 위주로 서술한다

훨씬 많은 태그들은 https://developer.mozilla.org/ko/docs/Web/HTML/Element MDN 문서를 참고하자

header

<header>
    <h1>제 블로그에 오신 것을 환영합니다</h1>
</header>

페이지에서의 헤더를 나타내는 태그이다

헤더라 함은 보통 페이지 제목을 보여주거나, 로고 및 제작자 등 상징적인 이미지를 띄워주는 부분이다

비단 문서의 최상단 뿐만 아니라, 특정 영역 (후술할 section 태그로 구성되는 영역) 의 도입부를 장식하는 데에 사용되기도 한다

그렇다는 것은, 한 페이지에서 여러 header 태그를 사용하는 것이 마냥 나쁜 것은 아니다

main

<main>
    <p>문서의 중심 주제, 또는 주요 기능이 들어가는 영역이며, 하나의 문서에서 2개 이상의 `main` 태그를 넣는 것은 문서에 복수 개의 주제를 담고 있다는 의미가 되므로 지양해야 한다. 또한 다른 의미를 가진 시맨틱 태그들인 `header`, `footer`, `nav`, `aside` 등의 자손 태그가 될 수 없다</p>
</main>

페이지의 본문을 표현한다

이 문서의 가장 중요한 내용물이 이 곳에 들어간다

문서의 중심 주제, 또는 주요 기능이 들어가는 영역이며, 하나의 문서에서 2개 이상의 main 태그를 넣는 것은 문서에 복수 개의 주제를 담고 있다는 의미가 되므로 지양해야 한다

또한 다른 의미를 가진 시맨틱 태그들인 header, footer, nav, aside 등의 자손 태그가 될 수 없다

접근성 측면에서, main 태그는 보조 도구들이 문서의 가장 중요한 내용을 빠르게 찾아낼 수 있도록 도와준다

footer

<footer>
    <span>Copyright by Me!!!</span>
</footer>

페이지 하단의 푸터 관련 태그이다

페이지의 제작자, 저작권 관련 표기 (copyright), 회사 정보나 관련 링크 등을 담는 영역이다

header와 마찬가지로, 문서 뿐만 아니라 특정 구획의 푸터를 정의할 때에도 쓰일 수 있으며, 한 문서에 여러 개의 footer 태그가 사용되어도 상관없다

 

Github의 예시처럼 페이지의 저작권 및 회사와 관련된 문서의 링크를 담거나, 네이버처럼 사이트 내비게이션 링크와 채용 정보 링크 등을 넣기도 한다

nav

<nav>
    <ul>
        <li>
            <a href='/details'>상세 페이지</a>
        </li>
        <li>
            <a href='/mypage'>회원정보</a>
        </li>
    </ul>
</nav>

내비게이션 바 등, 다른 페이지로 이동할 수 있는 내비게이션 링크들을 담은 구획이다

모든 사이트맵 링크를 담을 필요는 없으며, 비중에 따라 적절히 footer 태그 안에 나눠 담기도 한다 (대개 서비스에서 중요한 링크를 nav 태그에 담고, 비중이 낮은 - 채용공고, 저작권, 이용약관 등 - 링크들을 footer에 담는다)

접근성 측면에서, 보조 기구를 사용할 경우 내비게이션 접근을 용이하게 하거나 이 부분을 건너뛰고 중요한 내용을 바로 읽어들일 수 있게 도와준다

대개 여러 링크가 포함된 리스트를 출력하기 때문에, ul / ol 태그와 li 태그를 조합하여 같이 사용하곤 한다

 

처음에 nav 태그의 의미를 확장하여 이해한 탓에 프로젝트에서 해당 컴포넌트를 nav로 구현하였으나, 웹 사이트 탐색을 위한 어떠한 링크도 담고 있지 않다는 점에서 nav가 부적절하게 사용되었다는 지적을 받고 div로 회귀하였다

이러한 경우, 오히려 환경설정, 마이페이지, 로그아웃 링크를 담고 있는 상단 구획이 nav 태그에 좀 더 잘 어울린다고 볼 수 있겠다

section

<section>
    <h2>nav 태그</h2>
    <p>nav 태그는 이러쿵 저러쿵 어쩌구 저쩌구이다</p>
</section>
<section>
    <h2>section 태그</h2>
    <p>section 태그는 요로코롬 구획을 나눌 때 사용된다</p>
</section>

문서 내에서 영역을 나눌 때 사용되는 태그이다

보통 h2 ~ h6 태그를 자식 요소로 같이 사용하여 영역의 제목을 표기한다 (하지만 항상 같이 쓸 필요는 없다)

nav 태그나 header 태그 등 별개의 시맨틱 태그 내에서 구획을 나눌 때에도 사용할 수 있다

 

특정 주제를 명확하게 표현하는 태그는 존재하지 않지만, 하나의 영역으로 묶어주고 싶을 때 사용한다

문서의 서두 (header) 나 다른 페이지로 향하는 링크를 담은 영역 (nav) 등 영역을 표현할 수 있는 태그가 존재할 경우, section 사용을 지양하고 해당 태그를 사용하라는 뜻이다

또한 영역이 나타내는 주제가 없음에도 불구하고 단순 스타일 적용 용도로 쓰는 것도 부적절하다 (이럴 때는 div를 사용하자)

article

<article>
    <h2>북극곰의 생태</h2>
    <p>북극곰은 콜라를 좋아한다</p>
</article>

어떠한 독립적인 내용을 적기 위해 사용하는 태그이다

문서 전체에서 해당 내용만 분리해도 독자가 이해할 수 있을 정도로 독립적인 내용이어야 한다

보통 신문 기사나 게시판에 있는 게시글 등이 article 태그를 이용하며, h2 ~ h6 태그를 이용하여 제목을 표현하는 경우가 많다

section과 상당히 유사하지만, section은 영역을 나누는 데 사용되는 한편 article은 그보다 좀 더 명확한 주제를 표현할 때 사용된다고 생각하면 좋을 듯 하다

h1 ~ h6

<h1>이것은 대빵 큰 제목이다</h1>
<h2>이것은 소제목이고</h2>
<h3>이것은 소제목의 소제목이다</h3>
<h4>이것은 아주 작은 소제목이다</h4>
<h5>이것은 아주 작은 소제목의 소제목이다</h5>
<h6>이것은 아주 작고 더이상 쪼갤 수 없을 정도의 소제목이다</h6>

문서, 또는 구획의 제목을 표현하기 위해 사용하는 태그이다

h1 태그는 문서 전체를 아우르는 제목을 가지도록 단 하나만 사용하는 것이 적절하며, h2 ~ h6은 몇 개가 되든 상관없지만 h2 하위에 h5를 쓰는 등 단계를 건너뛰는 것은 좋지 않은 예시이다

또한 단순히 글자 크기 스타일링을 위해 사용하는 것도 지양하자 (이런 경우, span 등의 태그로 감싼 뒤 font-size 속성을 통해 스타일링하는 것이 좋다)

 

위의 예시에서 SCOPA (이 프로젝트의 이름 = 웹 사이트의 이름) 는 h1, 유저의 닉네임 (earlybird) 은 h2, 해당 유저의 프로필 관련 요소 제목 (# 저는 이런 분야에~, # 저는 이런 요구사항이~) 은 h3으로 표현하였다

세부적으로 들어가면, 작업 형태나 작업 선호 시간대 등 하위 프로필의 제목은 h4로 표현할 수도 있을 것이다

aside

<main>
    <p>SCOPA는 코드를 통해 소통하고 팀원을 구할 수 있는 웹 서비스이다</p>
</main>
<aside>
    <a href='https://github.com/boostcampwm-2022/web25-SCOPA'>
        <span>SCOPA 추라이 추라이</span>
    </a>
</aside>

문서의 본문을 이해하는 데에 반드시 필요한 내용은 아니지만, 있으면 좋은 정보를 담는 태그이다

예를 들면, 김장김치 관련 게시글에서 절인 배추를 할인하는 링크를 담고 있다던지…

위의 MDN 공식 문서 페이지에서는 aside 페이지의 목차를 담고 있다

dl, dt, dd

<dl>
    <dt>SCOPA</dt>
    <dd>SCOPA stands for Searching COde PArtener.</dd>
</dl>

어떠한 용어의 정의 (definition) 를 표현하기 위한 태그로, 세 개가 같이 사용된다

dl은 한 개 이상의 dt - dd 쌍을 포함하는 목록 (definition list) 이다

dt는 설명하고자 하는 용어의 이름 (또는 제목 - definition term) 을 담으며, dd는 해당 용어의 자세한 설명 (definition description) 을 담는다

들여쓰기 스타일링 용도로 사용하는 것은 부적절하며, 가급적 dt와 dd가 쌍을 이룰 때 (= 어떠한 용어와 그에 대한 정의가 쌍을 이룰 때) 사용하는 것이 좋다

figure, figcaption

<figure>
    <img src='/logo.png' alt='scopa logo' />
    <figcaption>SCOPA Logo</figcaption>
</figure>

문서에서 설명을 보충하는 데에 사용되는 예제 (이미지, 부연 설명, 코드 등) 와 그 설명을 적을 때 사용된다

문서의 주제와 직접적으로 관련은 있지만, 부록 등으로 빼도 상관 없는 요소들을 담으면 좋다

figure 내의 요소는 figure 상단 또는 하단에 figcaption 태그를 통해 부연설명을 담을 수 있다

div와 span 적절히 사용하기

div와 span

div의 뜻은 document division = 영역을 나눠주는 블록 요소이다

span의 뜻은 spanning = ~를 포괄하다 라는 의미로, 여러 컨텐츠를 한 영역에 담기 위한 요소이다

div와 span은 아무런 의미도 갖지 않은 컨테이너 역할의 태그이며, div는 블록 요소, span은 인라인 요소라는 차이점이 있다

그 말인 즉슨, div 는 아무런 의미도 담고 있지 않으므로 div를 다른 적절한 태그로 대체할 수 있을 정도로 의미가 명확할 경우 가급적 다른 태그로 대체하는 것이 좋다

예를 들어, 문서의 서두를 표현하는 영역일 경우 header 라는 태그가 존재함에도 불구하고 div를 사용하는 것은 의미론적인 HTML에 부합하지 않는다

div는 블록 요소, span은 인라인 요소입니다

div에 display: inline; 속성을 부여하는 것은 span을 쓰는 것과 다를 바가 없고, span에 display: block; 속성을 부여하면 div를 쓰는 것과 다를 바가 없다

둘이 같은 용도 (의미가 없는 단순 스타일링) 로 사용되긴 하지만, 기본적으로 적용되는 스타일에서도 알 수 있듯 그 목적은 다르기 때문에 상황에 맞춰 사용하는 것이 중요하다

의미적으로 대체할 수 있으면 최대한 대체하기

<div onClick={handleClickDiv}>클릭 가능합니다~~</div>

물론 div에도 onClick 이벤트를 걸 수 있지만, div에는 아무런 의미가 없다

 

<button onClick={handleClickButton}>클릭 가능합니다~~</button>

이럴 때는 이름에서부터 ‘저는 사용자가 클릭할 수 있는 태그에요’ 를 내포하고 있는 button 태그를 사용하자

 

<p>
    이 문장에서 중요한 부분은 <span>이곳</span>이다
    그리고 당신이 검색한 단어는 <span>이것</span>이다
</p>

문장을 강조할 때에도 span으로 도배하는 것보다,

 

<p>
    이 문장에서 중요한 부분은 <strong>이곳</strong>이다
    그리고 당신이 검색한 단어는 <mark>이것</mark>이다
</p>

다른 태그를 적절히 사용하면 어떤 단어를 왜 강조했는지 조금 더 의미가 명확해진다

주의사항: 스타일링 목적으로 대체하지 말자

<section>
    <h1>엄청 큰 글씨로 출력하고 싶은 문장</h1>
    <h6>이건 조그맣게 <strong>쓰고 싶어서</strong> 썼음</h6>
    <article>
        본문은 <mark>대충 이런 내용</mark>인데
        아무튼 그럼
        <button>회색 바탕 이쁘다 히히</button>
    </article>
</section>

뭐든지 과하면 독이 되듯이, 시맨틱 태그들을 너무 남발하는 것은 좋지 않다

특히 strong이나 mark 등의 태그를 명확한 강조 목적이 아닌 단순 스타일링에 사용하거나, 제목과는 전혀 관련없는 문구의 폰트 크기 조정을 위해 h1 ~ h6 태그를 사용하는 등은 시맨틱 태그의 남용에 해당한다

태그를 사용할 때는 해당 태그가 내포하는 의미와 태그가 담고 있는 내용물의 의미가 유사할 때 적절히 사용하고, 의미가 없는 단순 스타일링 목적이라면 div와 span을 섞어 사용한다

여담

의미론적 태그들을 사용하면 코드 리뷰를 할 때나 컴포넌트의 관심사를 결정할 때 확실히 도움이 되지만, 언제나 남용하게 될 까봐 경계하게 된다

당장 어제만 해도 nav 태그를 잘못 사용해서 코드 리뷰를 받고 정정했었는데, 이전 프로젝트에서도 섣불리 시맨틱 태그를 적용해서 의미와는 전혀 다른 동작을 하게끔 만든 게 있지는 않을까 약간 걱정되기도 한다 (ㅋㅋ)

이번 포스팅을 작성하면서 현재 진행중인 프로젝트를 예제로 많이 들었는데, div로 뒤덮인 과거 프로젝트를 리팩토링할 때에도 요긴히 사용하면 좋을 듯 하다

참고자료

https://stackoverflow.com/questions/30879707/why-is-a-div-called-a-div-why-is-a-span-called-a-span

https://stackoverflow.com/questions/2961889/is-there-a-semantic-difference-spans-and-divs

https://eunsukimme.github.io/html/2019/12/18/Semantic-Web/

http://web-accessibility.carnegiemuseums.org/foundations/semantic/

저작자표시

'ClientSide > html css' 카테고리의 다른 글

white-space, word-break  (0) 2023.06.18
[토막상식] CSS에서 형제 클래스는 우선순위가 동일하다  (0) 2023.06.16
HTML vs XML  (0) 2022.10.05
가상선택자 ::before, ::after  (0) 2022.05.09
CSS 선택자  (0) 2022.05.09
'ClientSide/html css' Related Articles more
Comments