P

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

​

문단은 블록 레벨 요소이며, 자신의 닫는 태그(</p>) 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다.

​

브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리합니다.

첫 줄 들여쓰기 등 다른 구분 방법은 CSS를 통해 사용할 수 있습니다.

​

빈 <p> 요소를 사용해 문단 사이에 여백을 추가하면 스크린 리더 사용자에게 부정적인 경험을 줄 수 있습니다.

스크린 리더가 문단의 존재는 알려주겠지만, 더 읽을 내용이 없기 때문입니다.

따라서 스크린 리더 사용자가 혼란을 느낄 수 있습니다.

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

​

​

​

​

​

br

line-break 할 때 사용(enter 역할)

내용이 필요없는 빈요소이므로 여는 태그만 사용하면 됨

텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.

문단 사이에 여백을 두기 위한 용도로 <br>을 사용하지 마세요.

대신 <p> 요소로 감싼 후 CSS의 margin 속성으로 여백의 크기를 조절하세요.

br 예제

​

​

​

​

* 인용문 요소

​

blockquote

인용 블록 요소

안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다.

P태그 사용 시 blockquote 내에 p 태그 사용

(p태그 내에 blockquote사용하면 blockquote 전에 </p>가 되어있다고 인식되므로 안됨)

​

blockquote 사용

​

​

​

​

q

인라인 인용문 요소

둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다.

대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다.

<q>는 줄 바꿈이 없는 짧은 경우에 적합합니다.

긴 인용문은 <blockquote> 요소를 사용하세요.

P태그 내에 q태그 가능

​

q 태그 사용

​

​

> cite

blockquote, q 둘 다 사용 가능한 속성.
인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.
속성이므로 사용자 눈에는 보이지 않음. 브라우저만 알고 있는 정보

ex) <blockquote cite="https://developer.mozilla.org/">

​

​

​

pre

미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다.

텍스트는 보통 *고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다.

(*고정폭 : A와, I는 폭이 달라 여러개를 썼을 때 고정폭이 아니라면 I를 쓴 폭이 작을 수 밖에 없다.
고정폭을 쓰므로 어떤 문자든 폭이 일정하다.)

​

pre태그 사용. 밑은 pre와 p 비교

​

​

​

​

figure, figcaption

독립적인 콘텐츠를 표현합니다.

<figcaption> 요소를 사용해 설명을 붙일 수 있습니다.

blockquote랑 비슷하게 보임

​

​

​

​

​

hr

빈요소이므로 <hr>혹은 <hr/>으로 사용

야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.

보통 CSS로 스타일링을 함.

​

​

​

​

​

​

​

참고 사이트 : MDN Web docs, 제로베이스