brunch

브런치북 이야기로 다가가는 HTML 15화

라이킷 95 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 고코더 Mar 23. 2021

헤드라인을 담당하는 "<header> 태그"

시선을 잡아두게 하는 헤더 태그

헤드라인 카피

"내가 피아노 앞에 앉았을 때 그들은 나를 비웃었다. 하지만 내가 연주를 시작하자.."
They laughed when I sat down at the piano, but when I started to play

전설적인 카피라이터 "존 케이플스(John Caples)"가 미국 음악학교 광고하기 위해 만든 카피입니다. 그는 헤드라인을 만들 때 소비자가 충분히 이해할 수 있을 만큼 쉬운 문장을 구사해야 한다고 말하고는 했습니다. 그리고 모든 메시지에는 헤드라인이 있다고 말합니다. 영상의 경우 첫 시작이 헤드라인이고, 라디오에서 나오는 첫 몇 마디도 역시 헤드라인이라고 말하였습니다.

헤드라인은 기사의 내용의 요점을 짧게 요약하여 눈길을 사로잡는 역할을 합니다. 신문을 펼쳐 보면 큰 글씨의 짧은 구절의 기사가 눈에 먼저 들어옵니다. 바쁜 직장인들은 이 굵은 글씨체를 보고 이 신문을 살지 말지를 결정합니다. 인터넷 신문도 역시 마찬가지입니다. 마우스 클릭 만으로 언제든지 다른 기사로 건너갈 수 있고, 다른 신문 사이트로 이동이 가능하기 때문에 유저를 붙잡아 두기 위해서는 웹페이지에서도 헤드라인을 잘 뽑아야 합니다.

최초의 <header> 태그

<html>
<body>
<header> http://info.cern.ch </header> 
</body>
</html>

1989년 HTML로 만들어진 최초의 웹사이트를 접속하면 간단한 형식의 홈페이지가 여전히 존재하고 있습니다. 이 사이트의 소스를 살펴보면 재밌게도, 오늘 배우는 <header> 태그를 확인할 수 있습니다. 여기서 헷갈리지 말아야 할 점은 이전에 배웠던 헤드 <head> 태그와는 완전히 다른 기능을 제공합니다. 태그는 헤드라인처럼 해당 페이지의 성격을 나타내는 머리글을 다루는 영역입니다. 그 밖에도 회사명, 회사 로고, 메뉴, 검색창 등이 단골 주제입니다.

만약 HTML이 사람이라면 헤더에 담긴 정보는 얼굴 생김새입니다. 정확히는 알 수 없지만 어떤 인종인지 대략적인 나이와 출신을 알 수 있기 때문입니다. 웹페이지에서도 헤더는 첫인상을 주는 영역입니다. 사람들은 헤드라인에 적힌 정보만을 읽어보고 해당 콘텐츠를 소비할지 결정한다고 했습니다. 서핑하는 인터넷 유저들 역시도 이 헤더에 적힌 내용을 보고 좀 더 살펴볼지 판단할 것입니다.

...