[HTML] blockquote 태그 알아보기

 

 마크업 프로페셔널로 거듭나기 

tobyyun 님의 마크업 개발 레벨 테스트 질문을 통해 마크업 역량을 키워보자 ψ(｀∇´)ψ

 

 

마크업 개발 레벨 테스트 질문

 

 

 

---

 

 

질문

 

blockquote 태그는 어떤 용도로 사용해야 할까요?

 

 

---

 

답

 

blockquote는 block과 quote라는 영단어 두 개를 합성한 합성어로 만들어진 태그다. quote는 인용문이라는 뜻으로 다른 문서의 글이나 다른 사람의 말을 가져와 사용하는 것을 인용이라고 한다. 

일반적으로 태그에서는 i 태그와 같은 텍스트를 강조하는 방법을 사용하거나 문장 부호(따옴표 등)을 사용해서 인용문구를 표시하고는 한다.

 

그렇다면 다른 방법 대신 blockquote를 사용하는 이유는 무엇인지 알아보자.

 

 

 

 

 

1. Blockquote 란?

 

HTML에서 blockquote는 길이가 긴 문장을 인용할 때 사용하는 태그다. 브라우저 DOM(HTMLQuoteElement)은 blockquote로 감싸진 태그를 보면 태그 내부의 텍스트의 길이가 긴 문장을 인용하는 형태임을 알아챌 수 있다.

따라서 해당 텍스트를 들여쓰기 하고 각 브라우저 혹은 텍스트 편집기에 설정된 인용문 레이아웃으로 바꿔 화면에 출력한다.

그러나 HTML5 부터 blockquote는 다른 출처로부터 인용된 블록 요소를 정의할 때 사용되도록 의미가 변경되었다.

 

내부 텍스트의 출처가 있다면 cite 속성을 사용한다.

또한 길이가 길지 않은 한 줄 정도의 텍스트를 인용하는 경우에는 blockquote 대신 <q> 태그를 사용하며 <q> 태그는 인라인 속성을 지닌다.

 

 

 

<blockquote>: 인용 블록 요소 - HTML: Hypertext Markup Language | MDN

 

HTMLQuoteElement - Web APIs | MDN

 

 

사용법

 

 

<blockquote cite="https://www.lipsum.com/">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam, 
  quis nostrud exercitation ullamco laboris nisi 
  ut aliquip ex ea commodo consequat.</p>
</blockquote>

 

 

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

 

 

 

 

2. Blockquote는 왜 사용할까?

 

문서를 작성할 때 텍스트의 구조를 올바르게 적용하고 접근성을 높이기 위해서 세분화된 시멘틱 태그를 사용하는 것이 HTML5의 기본 성향이다.

이 HTML에서 인용문 중 긴 문장 한 블럭을 표시하기 위해 blockquote를 사용하며, HTML5에 들어서는 출처가 있는 다른 문장을 내 문서 안에 적용하기 위해 사용한다.

인라인 요소가 아닌 블럭 요소로 적용하기 때문에 가독성 좋게 다른 문단과 분리되어 표시된다.

 

그러나 blockquote를 사용하면 문단 내에서 들여쓰기가 자동으로 된다는 점을 이용하여 인용이 아닌 문단에도 blockquote를 적용하면 문서 구조에 혼란이 생길 수 있다. 

들여쓰기가 필요한 경우 문서를 블럭 요소로 문단 나누기 한 후 CSS의 text-indent를 활용하면 된다.

 

 

<blockquote>, <q>, <cite> 올바르게 사용하기