5장: 단락, 목록, 링크 다루기
단락의 구조와 활용법
웹페이지에서 글의 흐름과 의미를 명확히 드러내기 위해서는 단락 구분이 중요합니다. HTML에서는 <p>
태그가 바로 그 역할을 맡습니다. <p>
로 감싼 구간은 하나의 문단으로 인식되어 위아래에 기본 여백이 적용되고, 브라우저가 내용의 구획을 자연스럽게 드러냅니다. 어떤 긴 글도, 각 문단을 <p>
로 감싸면 즉시 읽기 좋은 구조로 바뀌며, 정보의 명확한 경계가 생깁니다.
줄을 바꾸고 싶을 때는 <br>
을 사용합니다. 이는 문단 내에서의 강제 줄 바꿈을 위한 태그로, 새로운 단락이 아닌 한 줄만 내릴 때 유용합니다. 시와 같이 행마다 줄 내림이 필요한 콘텐츠나, 주소 정보 등을 작성할 때 빛을 발합니다. 하지만 문단의 논리적 구분에는 반드시 <p>
를 사용하는 것이 시멘틱 웹과 접근성을 위해 바람직합니다.
리스트로 정보 정리하기
관련된 항목을 묶어 보여주고 싶을 때는 HTML의 리스트 태그가 유용합니다. 리스트에는 순서가 필요한 경우와 그렇지 않은 경우, 두 가지가 있습니다. <ol>
은 순서 있는 목록(ordered list), <ul>
은 순서 없는 목록(unordered list)를 만듭니다. 각각의 리스트 항목은 <li>
로 감싸 사용합니다. 예를 들어 일정한 절차나 단계, 번호를 부여할 때엔 <ol>
, 간단한 정보 나열에는 <ul>
을 선택합니다.
더불어, 정의형 목록(<dl>
)은 용어와 그 설명을 짝지어 보여줄 때 적합합니다. 이러한 리스트 태그들은 웹 문서의 가독성과 구조적 의미를 크게 높이며, 필요한 정보만 빠르게 파악하게 돕습니다.
링크, 웹을 연결하는 힘
웹의 진짜 마법은 바로 하이퍼링크에서 시작됩니다. HTML에서 <a>
(anchor) 태그는 다른 문서나 웹사이트, 혹은 같은 페이지 내의 위치로 이동할 수 있게 해줍니다. 필수 속성인 href
에 목적지 주소를 적어주면, 사용자들은 마우스 클릭 한 번으로 새로운 정보를 탐색할 수 있게 됩니다. 또한, target
속성으로 새 창에서 열지 같은 동작 방식을 조정할 수 있습니다. 링크는 단순한 이동 이상의 의미를 가지며, 정보를 유기적으로 연결해 웹의 입체적인 구조를 만들어냅니다.
활용 예시와 실용적인 팁
문단, 리스트, 링크는 웹사이트 설계에서 기본이자 핵심입니다. 각 태그를 적절한 상황에 맞게 활용하면 사용자 경험이 확연히 달라집니다. 여러 문단을 명확하게 분리해 읽기 쉽게 정돈하고, 리스트로 정보를 요약해 나열하며, 링크로 새로운 세상과 자유롭게 연결해보세요. HTML의 이 세 가지 요소만 제대로 익혀도, 누구나 깔끔하고 의미 있는 웹페이지를 만들 수 있습니다.