HTML 문단 요소(<p>)는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML의 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.

문단은 블록 레벨 요소이며, 자신의 닫는 태그(</p>) 이전에 다른 블록 레벨 태그를 만나면 자동으로 닫힙니다. 아래의 "태그 생략" 항목을 참고하세요.

콘텐츠 카테고리 플로우 콘텐츠, 뚜렷한 콘텐츠
가능한 콘텐츠 구문 콘텐츠
태그 생략 시작 태그는 필수입니다. 닫는 태그는 <p> 요소의 바로 뒤에 <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul>, <p> 요소가 위치하는 경우 또는, 부모 태그의 콘텐츠가 더 존재하지 않고 부모가 <a> 요소가 아닐 때 생략할 수 있습니다.
가능한 부모 플로우 콘텐츠를 허용하는 모든 요소
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLParagraphElement

속성

이 요소는 전역 속성만 포함합니다.

예제

HTML

<p>첫 번째 문단입니다.
  첫 번째 문단입니다.
  첫 번째 문단입니다.
  첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.
  두 번째 문단입니다.
  두 번째 문단입니다.
  두 번째 문단입니다.</p>

결과

문단 꾸미기

브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리합니다. 첫 줄 들여쓰기 등 다른 구분 방법은 CSS를 통해 사용할 수 있습니다.

HTML

<p>독자 입장에선 문단 사이를 여백으로 구분하는게 제일 읽기 쉽지만,
첫 줄 들여쓰기로도 구분할 수 있습니다. 들여쓰기는 보통 인쇄매체에서
공간과 종이를 아끼기 위해 사용합니다.</p>

<p>학교 과제나 초안 등 나중에 편집할 글은 여백과 들여쓰기 둘 다 사용합니다.
그러나 완성한 글에 둘 다 사용하는건 불필요하고 초보적으로 여겨집니다.</p>

<p>아주 오래된 글에서는 문단을 특수기호 ¶, <i>필크로</i>(단락 기호)로
구분했습니다. 그러나 답답하고 읽기 힘들어 지금은 사용하지 않습니다.</p>

<p>얼마나 읽기 힘들까요? 직접 알아보세요.
  <button data-toggle-text="안돼! 다시 돌려놔요!">단락 기호 써보기</button>
</p>

CSS

p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
   text-indent: 0;
   display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}

JavaScript

document.querySelector('button').addEventListener('click', function (event) {
  document.querySelectorAll('p').forEach(function (paragraph) {
    paragraph.classList.toggle('pilcrow');
  });
  var newButtonText = event.target.dataset.toggleText;
  var oldText = event.target.innerText;
  event.target.innerText = newButtonText;
  event.target.dataset.toggleText = oldText;
});

결과

접근성 고려사항

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

빈 <p> 요소를 사용해 두 문단에 여백을 추가하는건 스크린 리더 사용자에게 부정적인 경험을 줄 수 있습니다. 스크린 리더가 문단의 존재는 알려주고서 그 내용은, 사실 아무 내용도 없기 때문에, 읽지 않을 것이기 때문입니다. 스크린 리더 사용자는 혼란스러울 수 있습니다.

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

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

명세

명세 상태 주석
HTML Living Standard
The definition of '<p>' in that specification.
Living Standard  
HTML5
The definition of '<p>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<p>' in that specification.
Recommendation  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
pChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, azunyan3
최종 변경자: alattalatta,