html p br 태그 차이 및 각 태그가 서로 우위인 경우 예제

html <p> vs <br> 태그 차이

<p> 태그는 문단을 정의합니다. <br> 태그는 줄바꿈을 정의합니다. 의미적으로 한 단락이라면 <p> 태그 사이에 기입해야 합니다. 의미적으로는 하나 이지만, 가독성을 위해서 줄바꿈을 할 경우 <br> 태그를 사용합니다.

html <p>

<p> 태그는 문단을 정의합니다. </p> 태그로 닫힌 부분까지가 하나의 문단입니다. </p> 태그로 끝난 부분에는 자동으로 여백이 생성됩니다.

<p> 태그 안에서는 키보드 Enter 와 Space 로 생성한 줄바꿈과 띄어쓰기가 적용되지 않습니다.

<p>원자란 화학반응으로 더 쪼갤 수 없는 단위를 말합니다.</p>
<p>atomos
(원자의 고대 그리스어)의
tomos       는 쪼갤 수 있다는 뜻이고, a는 부정을
나타냅니다.</p>

예제 ▷

html <br>

<br> 태그는 단순 줄바꿈 기능을 합니다.

아버지가
<br>
방에 들어가신다.
<br>
아버지
<br>
가방에 들어가신다.

예제 ▷

<p> 태그가 더 유리한 경우

아래 예시는 세 줄의 문장이 모두 다른 뜻입니다. 따라서 세 개의 단락으로 구성되야 할 것입니다. 사람눈에는 <br> 태그로 나누면 단락이 구분됩니다.

주식이란 주주가 주식회사에 출자한 일정지분을 나타내는 증권을 말합니다.
<br>
미역국이란 미역을 넣고 끓이는 국입니다.
<br>
야구란 9명으로 구성된 두 팀이 방망이와 공을 사용해 겨루는 구기 종목입니다.

예제 ▷

하지만 검색엔진은 <br> 태그는 단순히 미적 효과를 위한 줄바꿈으로 인식하기 때문에 아래의 세 가지 문장을 모두 하나의 단락으로 인식합니다.

주식이란 주주가 주식회사에 출자한 일정지분을 나타내는 증권을 말합니다. 미역국이란 미역을 넣고 끓이는 국입니다. 야구란 9명으로 구성된 두 팀이 방망이와 공을 사용해 겨루는 구기 종목입니다.

따라서 모든 웹사이트의 단락이 <br> 태그로 단락이 구분되어 있다면, 해당 문서는 주제를 쉽게 찾을 수 없는 복잡한 문서가 될 것이고 SEO 수치가 낮아질 것입니다.

이런 경우 세 가지 모두 <p> 태그 사이에 넣는 것이 더 효율적입니다. 사람 눈에는 똑같은 세 단락이지만, 검색엔진에는 <p> 태그가 더 좋습니다.

<p>주식이란 주주가 주식회사에 출자한 일정지분을 나타내는 증권을 말합니다.</p>
<p>미역국이란 미역을 넣고 끓이는 국입니다.</p>
<p>야구란 9명으로 구성된 두 팀이 방망이와 공을 사용해 겨루는 구기 종목입니다.</p>

예제 ▷

<br> 태그가 더 유리한 경우

시와 같은 특수 형식 텍스트

시의 경우 줄바꿈이 일어나도 내용은 하나의 단락입니다. 따라서 각 줄은 서로 내용이 연관되어 있으므로 <br> 태그로 사람 눈에만 가독성을 높이도록 셋팅하는 것이 검색엔진 최적화에 도움이 됩니다.

<p>
사월은 가장 잔인한 달
<br>
죽은 땅에서 라익락을 피워내고
<br>
기억과 욕망을 뒤섞으며
<br>
봄비로 잠든 뿌리를 뒤흔든다
</p>

예제 ▷

시/컴퓨터 코드를 삽입할 때 : <pre>

컴퓨터 코드 처럼 공백(space)과 줄바꿈(Enter)이 필요하지만 서로 같은 내용일 경우 <p> 태그로 줄바꿈을 생성하는 것이 가장 비효율적일 것입니다. <br> 태그는 줄바꿈 마다 매번 작성해야 되는 단점이 있습니다.

대신 <pre> 태그라는 편리한 태그가 있습니다. <pre> 태그를 사용하면 시나 컴퓨터 코드와 같은 공백과 줄바꿈이 많은 문서를 작성할 때 효율적입니다.

<pre>하지만 드라군이 출동한다면 어떻게 될까?
드
라
군
!</pre>

예제 ▷

프로그래밍 언어 가독성

아래는 자바스크립트로 작성된 간단한 프로그램입니다. x, y, z 에 입력된 값(var)을 각각 출력(document.write)하라는 의미입니다.

var x="아버지가";
var y="방에";
var z="들어가신다.";
document.write(x, "<br>");
document.write(y, "<br>");
document.write(z, "<br>");

예제 ▷

이 프로그램의 목적은 "아버지가방에들어가신다." 라는 문장을 출력합니다.

이 문장은 하나의 의미이므로 만약 HTML 태그로 표현한다면 하나의 문장을 모두 <p> 태그에 넣어야 할 것입니다.

<p>아버지가방에들어가신다.</p>

하지만 누군가에 이 코드를 자세하게 설명하기 위해서 즉 가독성을 늘리기 위해서 일부로 강제 줄바꿈이 필요한 상황입니다.

이 때 줄바꿈을 위해서 <br> 코드를 사용한 경우와 <p> 코드를 사용한 경우에 사람이 체감하는 가독성의 차이는 거의 없습니다.

아래 예시는 사람 눈에는 가독성이 좋습니다.

var x="아버지가";
var y="방에";
var z="들어가신다.";
document.write(x, "<p>");
document.write(y, "<p>");
document.write(z, "<p>");

예제 ▷

하지만 검색엔진이 이해할 때에는 <p> 태그로 줄바꿈 되어 있는 요소는 각각의 줄을 다른 내용으로 인식합니다.

<p> 태그는 사람의 가독성의 욕구는 만족시켜 주지만, 검색엔진의 의미론적 단위에는 부적합합니다.

<br> 태그로 작성된 줄바꿈은 마찬가지로 가독성이 좋습니다.

var x="아버지가";
var y="방에";
var z="들어가신다.";
document.write(x, "<br>");
document.write(y, "<br>");
document.write(z, "<br>");

예제 ▷