몰랐던 HTML p 태그에 대한 사실

Docusaurus 문서블로그를 만들고 있는데, 빌드 설정 성능 최적화를 하다가, 아래와 같은 오류를 찾을 수 있었다.

즉, 직역해보면 실제로 <p> 태그를 연 적이 없는데 닫힌다는 의미이다.

실제로 내 프로젝트에서는 열리고 닫히는 태그는 모두 코드 에디터가 확인해서 오류가 없던 상황이었다.

도대체 무슨 일일까?

원인

나는 몰랐던 사실인데, <p> 태그 안에 블록 레벨 요소(예: <div>, <table>, <h1>-<h6> 등)가 포함되면 브라우저는 자동으로 <p> 태그를 닫는다.

이로 인해 실제로 닫는 태그가 있더라도 HTML 파서는 이미 닫힌 것으로 간주하여 “No p element in scope but a p end tag seen” 오류가 발생할 수 있다.

해결 방법

1. <p> 태그를 <div>로 대체하기

2. 블록 레벨 요소를 <p> 태그 밖으로 이동하기

3. 인라인 요소만 <p> 태그 내부에 사용하기

예시

잘못된 코드:

<p>
  <div>내용</div>
</p>

올바른 코드:

<div>
  <p>내용</p>
</div>

이 문제는 MDX나 마크다운 컴파일 과정에서도 발생할 수 있다.

따라서, 문서 작성 시 블록 레벨 요소를 사용할 땐 <p> 태그를 조심히 사용하도록 하자.