HTML <p>: 문단 요소

HTML <p> 요소는 문단을 나타냅니다. 시각적 매체의 문단은 보통 주변 블록과 여백 또는 첫 줄 들여쓰리고 구분한 텍스트 블록으로 나타내지만, HTML의 문단은 이미지나 양식 등 서로 관련있는 콘텐츠의 그룹을 뜻합니다.

<p>게코는 작은 야행성 도마뱀입니다. 호주를 제외한 모든 대륙에서 발견할 수 있습니다.</p>
<p>일부 종은 집 주변에 살면서 인공 조명에 이끌린 곤충을 사냥합니다.</p>

특성

전역 특성만 포함합니다.

접근성 고려사항

콘텐츠를 문단으로 나누면 페이지의 접근성을 높일 수 있습니다. 스크린 리더 등 보조 기술은 다음 문단으로 넘어갈 수 있는 단축키 등을 제공하므로, 시각적 사용자가 문단 사이 여백을 사용해 빠르게 탐색하는 것과 같은 효과를 낼 수 있습니다.

문단 사이에 여백을 놓기 위한 용도로 빈 <p> 요소를 사용하면 스크린 리더 사용자가 불편을 느낍니다. 스크린 리더가 문단의 존재는 표현하지만 안의 내용은 (아무것도 없기에) 말하지 않기 때문입니다. 그러면 스크린 리더 사용자는 무슨 상황인지 파악하기 전까진 혼란을 느낄 수밖에 없습니다.

여분의 공간이 필요하다면 margin 등 CSS 속성을 통해 적용하세요.

p {
  margin-bottom: 2em; // 문단 아래 여백을 늘림
}

명세

HTML Living Standard

브라우저 호환성