지난 6편에서 우리는 <strong>과 <em> 태그로 글의 핵심을 짚어보는 법을 배웠습니다. 이제 글자가 눈에 띄게 강조되었으니, 그다음으로 고민할 것은 ‘가독성’입니다. 정보성 블로그를 운영할 때, 주르륵 나열된 긴 글은 독자들을 지치게 만듭니다. 이때 필요한 구원투수가 바로 [리스트 태그]입니다.
오늘은 복잡한 정보를 한눈에 쏙 들어오게 정리하는 마법, 리스트 만들기를 정복해 보겠습니다.
[리스트 태그가 왜 필요한가요?]
정보성 블로그에는 항상 '순서'나 '종류'가 등장합니다. 예를 들어 "3가지 방법", "제가 추천하는 5가지 노트북" 같은 내용들이죠. 이때 줄글로 길게 적는 것보다, 리스트 태그를 써서 목록으로 보여주면 독자는 단 1초 만에 내용을 파악할 수 있습니다.
구글 검색 로봇은 리스트 태그를 보면 "아, 이 글은 정보를 체계적으로 정리해 둔 문서구나!"라고 판단하며, 검색 결과 상위에 올려줄 확률이 훨씬 높아집니다.
[리스트의 양대 산맥: OL과 UL]
HTML에서 리스트는 크게 두 가지 종류가 있습니다. 기억하기 아주 쉽습니다.
UL (Unordered List - 순서 없는 목록)
불렛 포인트(점)를 사용하는 목록입니다. 순서가 중요하지 않을 때 씁니다.
<ul>로 전체를 감싸고, 각각의 항목은<li>로 묶습니다.
OL (Ordered List - 순서 있는 목록)
숫자가 자동으로 붙는 목록입니다. 1, 2, 3 순서가 중요할 때 씁니다.
<ol>로 전체를 감싸고, 각 항목은 마찬가지로<li>로 묶습니다.
[실전 연습: 메모장에 리스트 만들기]
자, 바로 메모장을 켜서 따라 해 보세요. 리스트는 반드시 <li> 태그를 <ul>이나 <ol> 안쪽에 넣어야 작동한다는 점을 기억하세요.
<h3>준비물</h3>
<ul>
<li>구글 계정</li>
<li>나만의 전문적인 주제</li>
<li>꾸준한 1일 1포스팅</li>
</ul>
<h3>승인까지의 3단계</h3>
<ol>
<li>블로그 계정 개설하기</li>
<li>정보성 글 15개 작성하기</li>
<li>신청 버튼 누르기</li>
</ol>
이렇게 작성하고 브라우저로 확인해보면, 위에 것은 점(불렛)으로, 아래 것은 1, 2, 3 숫자로 깔끔하게 정리되어 나타날 겁니다. 직접 해보면 정말 별거 아니죠?
[이코노트허브의 경험담: 리스트 태그를 쓰기 전과 후]
예전에 저는 리스트 태그를 몰라서 그냥 줄바꿈(<br>)으로 목록 모양을 만들었습니다. "점(·) 찍고 엔터 치면 되지!"라고 생각했거든요. 그런데 나중에 보니 모바일에서 보면 줄이 엉망으로 꺾이고, 글자 간격도 제멋대로였습니다. 무엇보다 구글 로봇이 제가 만든 목록을 '리스트'로 인식하지 못하더군요.
리스트 태그를 쓴 뒤로는 가독성이 좋아져서 독자들의 체류 시간이 늘었고, 자연스럽게 구글 검색 노출도 잘 되기 시작했습니다. 태그 하나로 글의 품격이 달라진 셈이죠.
[초보자를 위한 주의사항]
<li>는 반드시<ul>이나<ol>안에 있어야 합니다. 밖에서 혼자 돌아다니면 브라우저가 당황합니다.너무 길게 쓰지 마세요. 리스트는 핵심을 짧게 요약하는 용도입니다. 항목 안에 문단을 통째로 집어넣기보다는, 짧은 구 단위로 적는 것이 좋습니다.
순서가 중요하다면 무조건
<ol>을 쓰세요. "방법", "단계", "순서"라는 단어가 글에 포함되어 있다면ol이 정답입니다.
핵심 요약
<ul>은 순서 없는 목록(점),<ol>은 순서 있는 목록(숫자)을 만듭니다.모든 리스트 항목은
<li>태그로 묶어야 합니다.리스트 태그는 가독성을 높여 독자의 체류 시간을 늘리고, 구글 로봇이 글을 체계적으로 이해하도록 돕습니다.
순서가 중요한 정보라면 반드시
<ol>을 활용해 검색 엔진에 정보를 명확히 전달하세요.
다음 편 예고: 8편에서는 드디어 웹페이지에 사진을 넣는 [이미지 태그(Img)와 속성값]을 배웁니다. 이제 단순히 글자만 있는 블로그에서 탈출할 시간입니다!
오늘 배운 리스트 태그를 이용해, 여러분이 블로그에 쓰고 싶은 '목록형 포스팅' 주제는 무엇인가요? (예: 내가 좋아하는 음식 5가지, 블로그 운영 필수 툴 등) 댓글로 알려주세요!