제목(Headings)과 단락(paragraphs)
제목(Headings)과 단락(paragraphs)
우리가 소설, 신문, 대학교 전공 서적, 잡지 등 어떤 것을 읽든 간에, 구조화된 텍스트의 대부분은 제목과 단락으로 이루어져 있어요.
콘텐츠가 잘 구조화되어 있으면 글을 읽기가 훨씬 쉽고 즐겁죠!
HTML에서는 각각의 단락을 항상 <p> 요소로 감싸주어야 합니다. 바로 이렇게요:
<p>나는 단락입니다, 오 그래요 나는 단락이에요.</p>그리고 각각의 제목은 제목(heading) 요소로 감싸주어야 해요:
<h1>나는 이 이야기의 제목입니다.</h1>HTML에는 총 6개의 제목 요소가 있어요. 바로 h1, h2, h3, h4, h5, h6 입니다. 각각의 요소는 문서 내에서 서로 다른 수준(level)의 콘텐츠를 나타내요. <h1>은 메인 제목을, <h2>는 부제목(subheadings)을, <h3>는 부-부제목을 의미하는 식이죠.
💡 강사님의 꿀팁!
실무에서는 보통<h1>부터<h3>정도까지만 가장 많이 씁니다.<h4>밑으로는 뎁스(depth)가 너무 깊어져서 문서 구조가 오히려 복잡해지기 때문에 잘 쓰지 않아요!
구조적 계층 구현하기 (Implementing structural hierarchy)
예를 들어, 어떤 이야기책이 있다고 해볼게요. <h1> 요소는 책 전체의 제목을, <h2> 요소는 각 챕터의 제목을, <h3> 요소는 챕터 안의 소제목들을 나타낼 수 있습니다:
<h1>엄청난 지루함 (The Crushing Bore)</h1>
<p>작성자: 크리스 밀스 (Chris Mills)</p>
<h2>제 1장: 어두운 밤</h2>
<p>
어두운 밤이었다. 어딘가에서 부엉이가 울었다. 비가 세차게 내리고...
</p>
<h2>제 2장: 영원한 침묵</h2>
<p>우리 주인공은 그림자 같은 형체를 향해 속삭이는 것조차 할 수 없었다...</p>
<h3>유령이 말하다</h3>
<p>
몇 시간이 더 지났을 때, 갑자기 유령이 벌떡 일어나 소리쳤다.
"제발 내 영혼에 자비를 베풀어 주시오!"
</p>계층 구조만 말이 된다면, 각각의 요소가 무엇을 나타내게 할지는 개발자인 여러분의 자유입니다. 하지만 이런 구조를 짤 때 반드시 명심해야 할 몇 가지 모범 사례(Best Practices)가 있습니다.
- 가급적이면 페이지당 하나의
<h1>만 사용하는 것이 좋습니다. 이것이 최상위 제목이며, 문서의 모든 내용은 이 계층 아래에 위치하게 됩니다. - 계층 구조에서 제목을 올바른 순서대로 사용해야 해요. 부제목에
<h3>를 쓰고, 그 밑에 나오는 하위 제목에<h2>를 쓰는 식으로 순서를 뒤죽박죽으로 만들면 안 됩니다. 논리적으로 맞지 않고 이상한 결과를 초래할 수 있거든요. - 사용할 수 있는 6개의 제목 레벨 중에서, 꼭 필요한 경우가 아니라면 페이지당 3개 레벨을 넘지 않도록 하는 것이 좋습니다. 제목 계층이 너무 깊어지면 문서가 방대해지고 탐색하기 어려워져요. 그럴 때는 내용을 여러 페이지로 나누는 것을 권장합니다.
💡 강사님의 꿀팁!
계층 구조를 건너뛰지 않는 것은 정말 기본 중의 기본입니다! 프론트엔드 기술 면접을 준비하실 때나 실무 코드 리뷰를 받을 때, "글씨가 커 보여서<h2>대신<h4>를 썼습니다"라고 답변하는 것은 절대 금물입니다. 시각적인 크기는 CSS로 조절해야지, HTML 태그의 의미론을 망치면 안 돼요! 이런 꼼꼼함이 훌륭한 엔지니어의 자질이랍니다.
구조가 왜 필요할까요? (Why do we need structure?)
이 질문에 답하기 위해 text-start.html 파일(맛있는 후무스 레시피)을 한번 살펴볼게요. 이 문서의 본문(body) 안에는 여러 가지 콘텐츠가 들어있어요. 현재는 아무런 마크업도 되어 있지 않고, 그저 엔터키를 쳐서 줄바꿈만 해둔 상태죠.
하지만 이 문서를 브라우저에서 열어보면, 텍스트가 거대한 한 덩어리로 뭉쳐서 보일 거예요!
콘텐츠에 구조를 부여하는 요소(element)가 없기 때문에, 브라우저는 어디가 제목이고 어디가 단락인지 전혀 알지 못해서 생기는 현상입니다.
더 나아가, 구조가 반드시 필요한 이유는 다음과 같습니다:
- 웹 페이지를 보는 사용자들은 관련된 내용을 찾기 위해 화면을 빠르게 훑어보는(scan) 경향이 있으며, 보통 제목 위주로 먼저 읽습니다. (우리는 보통 웹 페이지에 아주 짧은 시간만 머무릅니다.) 만약 몇 초 안에 유용한 정보를 찾지 못하면 답답함을 느끼고 다른 곳으로 가버리겠죠.
- 페이지를 색인(인덱싱)하는 검색 엔진은 페이지의 검색 순위를 결정할 때 제목의 내용을 아주 중요한 키워드로 간주합니다. 제목이 없다면 SEO(검색 엔진 최적화) 측면에서 최악의 결과를 낳게 됩니다.
- 심각한 시각 장애를 가진 분들은 웹 페이지를 눈으로 읽지 않고 귀로 '듣습니다'. 이때 스크린 리더(screen reader)라는 소프트웨어를 사용하죠. 스크린 리더는 텍스트 내용에 빠르게 접근할 수 있는 여러 기능을 제공하는데, 그중 하나가 바로 제목들을 소리 내어 읽어서 문서의 개요를 알려주는 기능입니다. 이를 통해 사용자는 필요한 정보를 빠르게 찾을 수 있죠. 만약 제목이 없다면, 사용자는 문서 전체를 처음부터 끝까지 무작정 다 들어야만 합니다.
- 콘텐츠에 CSS로 스타일을 입히거나 JavaScript로 재미있는 동작을 추가하려면, 해당 콘텐츠를 감싸고 있는 요소가 있어야 해요. 그래야 CSS와 JavaScript가 대상을 명확히 타겟팅할 수 있거든요.
이러한 이유들 때문에, 우리는 콘텐츠에 반드시 '구조적인 마크업'을 해주어야 합니다.
💡 강사님의 꿀팁!
면접관이 "왜 시맨틱 HTML과 적절한 태그 구조를 사용해야 하나요?"라고 묻는다면, 바로 위에 나온 1) 사용자 경험(빠른 훑어보기), 2) SEO, 3) 웹 접근성(스크린 리더), 4) CSS/JS의 선택자 활용(DOM 조작) 이 네 가지 키워드를 잘 버무려서 대답해 보세요. 아주 모범적인 답변이 될 거예요!
콘텐츠에 구조 부여하기 (Giving content structure)
자, 이제 백문이 불여일견! 직접 코딩 챌린지를 풀면서 HTML 제목과 단락을 사용하는 연습을 해봅시다.
- 원본 페이지의 실습 환경(MDN Playground)에서 작업하시거나, 코드를 직접 복사해서 실습해 보세요.
- 콘텐츠 시작 부분에 있는 적절한 텍스트를
<h1>요소로 감싸서 메인 제목으로 만들어보세요. <h2>요소로 감싸서 두 번째 레벨의 제목(부제목)으로 만들어야 할 두 가지 대상이 있습니다.- 남은 문장들은
<p>요소로 감싸서 단락으로 만들어보세요. 각각의<p>요소는<h2>요소 바로 아래에 위치해야 합니다.
실습용 원본 텍스트는 다음과 같습니다:
Favorite body parts The brain Lovely shape and color. Also does thinkin' stuff.
The feet Knobbly and ugly, but useful for getting about.만약 막히신다면, 아래에 있는 정답을 확인해 보세요.
완성된 HTML 코드는 다음과 같아야 합니다:
<h1>가장 좋아하는 신체 부위 (Favorite body parts)</h1>
<h2>뇌 (The brain)</h2>
<p>사랑스러운 모양과 색깔. 게다가 생각하는 일도 하죠. (Lovely shape and color. Also does thinkin' stuff.)</p>
<h2>발 (The feet)</h2>
<p>울퉁불퉁하고 못생겼지만, 돌아다니는 데 아주 유용해요. (Knobbly and ugly, but useful for getting about.)</p>시맨틱(의미론)이 왜 필요할까요? (Why do we need semantics?)
'시맨틱(Semantics, 의미론)'이라는 개념은 우리 주변 어디에나 존재합니다. 우리는 과거의 경험을 바탕으로 일상 사물의 기능이 무엇인지 파악하죠. 무언가를 보면 그것의 기능이 무엇일지 기대하게 됩니다. 예를 들어, 우리는 빨간색 신호등을 보면 "멈춤"을 의미하고, 초록색 신호등을 보면 "가시오"를 의미한다고 기대합니다. 만약 잘못된 의미(semantics)가 적용되어 있다면 상황은 순식간에 혼란스러워질 겁니다. (초록색이 멈춤인 나라가 있을까요? 제발 없길 바랍니다!)
이와 마찬가지로, 우리는 콘텐츠에 올바른 의미, 기능, 외형을 부여할 수 있도록 올바른 요소(element)를 사용해야 합니다. 이런 맥락에서 볼 때 <h1> 요소 역시 시맨틱 요소입니다. 이 요소는 자신이 감싸고 있는 텍스트에게 "이 페이지의 최상위 제목"이라는 역할(또는 의미)을 부여해 주거든요.
<h1>이것은 최상위 제목입니다.</h1>기본적으로 브라우저는 이 텍스트가 제목처럼 보이도록 큰 폰트 크기를 적용합니다. (물론 CSS를 사용하면 여러분이 원하는 어떤 모습으로든 바꿀 수 있어요.) 하지만 더 중요한 것은, 이 요소가 가진 의미론적 가치(semantic value)가 앞서 언급한 검색 엔진이나 스크린 리더 등 다양한 곳에서 소중하게 활용된다는 점입니다.
반면에, 완전히 다른 요소를 사용해서 겉보기에만 최상위 제목처럼 보이게 만들 수도 있습니다. 다음 코드를 보시죠:
<span style="font-size: 32px; margin: 21px 0; display: block;">
이것은 최상위 제목일까요?
</span>이것은 <span> 요소입니다. <span>은 아무런 의미(semantics)를 가지고 있지 않아요. 단순히 텍스트에 CSS를 적용하거나 JavaScript로 무언가를 조작하고 싶을 때, 내용에 별다른 의미를 추가하지 않고 묶어주는 용도로만 사용합니다.
위 코드에서는 CSS를 적용해서 겉보기에는 최상위 제목처럼 보이게 만들었습니다. 하지만 이 요소에는 '의미론적 가치'가 전혀 없기 때문에, 위에서 설명했던 검색 엔진 최적화나 접근성 향상 같은 혜택은 절대 받을 수 없습니다. 결론적으로, 목적에 맞는 적절한 HTML 요소를 사용하는 것이 가장 좋은 방법입니다.
