지난 4편에서 집의 대문인 제목 태그(H1~H6)를 세우는 법을 배웠죠? 이제 튼튼한 뼈대를 잡았으니, 그 안을 채울 ‘본문’을 예쁘게 채워 넣을 차례입니다. 우리가 블로그에 글을 쓸 때 가장 많이 쓰게 될 주인공, 바로 [문단 태그(P)]입니다.
보통 초보자분들은 글을 쓰다가 "줄을 바꾸고 싶네?" 하면 무작정 엔터(Enter) 키를 연타하곤 합니다. 하지만 우리에게는 더 똑똑한 방법이 필요합니다. 오늘은 글을 읽기 좋게 나누는 문단 태그의 정석을 아주 쉽게 풀어드릴게요.
[문단 태그란 무엇인가요?]
<p>는 영어 단어 'Paragraph'의 첫 글자를 따온 것입니다. 우리말로 하면 바로 '문단'이죠.우리가 책을 읽을 때 내용이 끊이지 않고 한 페이지 가득 채워져 있으면 숨이 턱 막히지 않나요? 글을 주제별로 적당히 묶어서 나누어 놓은 덩어리를 문단이라고 하는데, HTML에서는 이 한 덩어리를
<p>와 </p>라는 봉투에 담아 관리합니다.[엔터(Enter) 키와 <p> 태그의 결정적 차이]
그래서 우리는 컴퓨터에게 명령을 내려야 합니다.
단순 줄 바꿈 (
<br>): "여기서 그냥 한 줄만 내려가!"문단 나누기 (
<p>): "여기서부터 여기까지는 하나의 이야기 덩어리야. 앞뒤로 여백을 좀 줘서 나누어줘!"
<p> 태그를 쓰면 브라우저가 알아서 문단과 문단 사이에 적당한 간격을 벌려줍니다. 덕분에 독자들은 "아, 여기서 이야기가 한 단락 끝났구나"라고 느끼며 편하게 글을 읽을 수 있게 됩니다.[왜 본문 전체를 <p>로 감싸야 할까요?]
구글 로봇은 아주 꼼꼼한 독자입니다. 로봇이 우리 블로그에 왔을 때 글이 <p> 태그 안에 잘 정리되어 있으면, "이 글은 문맥이 아주 잘 나누어져 있군! 독자들이 읽기 좋은 양질의 정보야"라고 판단합니다.
반대로 문단 태그 없이 글자들만 둥둥 떠다니면, 로봇은 어디가 문맥의 시작이고 끝인지 몰라 혼란에 빠집니다. 이것이 바로 승인이 늦어지는 보이지 않는 이유 중 하나가 되기도 하죠.
[실전 연습: 메모장에 문단 나누기]
저장하고 브라우저로 열어보셨나요? 여러분이 엔터를 치지 않았어도, 두 문장 사이가 아주 보기 좋게 벌어져 있을 겁니다. 이게 바로
<p> 태그의 마법입니다.[꿀팁: 가독성을 높이는 문단 구성법]
제가 블로그 글을 수천 개 써보면서 느낀 '황금 문단 법칙'을 공유합니다.
한 문단은 3~5줄을 넘기지 마세요. 스마트폰으로 글을 보는 사람들이 많기 때문에, 문단이 너무 길면 눈이 금방 피로해집니다. 내용이 길어질 것 같으면 과감하게
<p>태그를 새로 열어 문단을 나누세요.문맥이 바뀔 때만
<p>를 쓰세요. 단순히 한 줄 내리고 싶을 때는 지난번에 배운<br>을 쓰고, 완전히 새로운 이야기를 시작할 때<p>를 쓰는 것이 좋습니다.빈 문단을 만들지 마세요. 간격을 넓히고 싶어서 내용 없는
<p></p>를 여러 개 넣는 분들이 있는데, 이건 구글 로봇이 아주 싫어하는 행동입니다. 간격 조절은 나중에 CSS로 하는 것이 정석입니다.
[초보자가 자주 묻는 질문]
질문: "그냥 본문 전체를 커다란
<p>하나에 다 넣으면 안 되나요?"답변: 안 됩니다! 그러면 한 문단이 너무 길어져서 독자들이 읽다가 포기할 거예요. 주제가 바뀔 때마다 꼬박꼬박 닫아주고 다시 열어주는 습관을 들이세요.
핵심 요약
<p>태그는 글을 하나의 '문단 덩어리'로 묶어주는 역할을 합니다.문단 태그를 사용하면 문장 사이의 간격이 자동으로 조절되어 가독성이 좋아집니다.
구글 검색 로봇은 문단 구조가 명확한 글을 '품질 좋은 정보'로 인식합니다.
한 문단은 모바일 사용자를 배려해 짧게 유지하는 것이 좋습니다.
다음 편 예고
6편에서는 글 중간에 중요한 단어를 돋보이게 만드는 [강조 태그(Strong, Em) 활용법]을 배웁니다. 어떤 단어에 강조를 해야 구글이 좋아할지도 함께 알려드릴게요!
여러분은 평소 블로그 글을 쓸 때 한 문단을 몇 줄 정도로 쓰시나요? 너무 길게 쓰고 있지는 않았는지 한번 체크해 보세요!