HTML <blockquote> 태그 – 올바른 이해와 사용 방법

`<blockquote>` 태그의 정의 및 사용법

<blockquote> 태그는
다른 출처에서 인용한 블록 형식으로 표시되는 여러 줄로 된 인용문 부분을 나타냅니다.

HTML

<h3>blockquote 태그</h3>
<p>다음은 위키백과에서 인용한 내용입니다.</p>
<blockquote>
    월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해
    사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
    간단히 웹(the Web)이라 부르는 경우가 많다.
    이 용어는 인터넷과 동의어로 쓰이는 경우가 많으나 엄격히 말해 서로 다른 개념이다.
    웹은 전자 메일과 같이 인터넷 상에서 동작하는 하나의 서비스일 뿐이다.
    그러나 1993년 이래로 웹은 인터넷 구조의 절대적 위치를 차지하고 있다.
</blockquote>

브라우저에서 실제 표시된 모습을 보면 주로 들여쓰기를 한 것으로 그려집니다. 대부분의 브라우저에서 표시될 때 <blockquote> 태그에 사방으로 CSS의 margin 값을 적용합니다.

<blockquote> 태그는 다음과 같이 사용해야 합니다.

<blockquote> 태그 내부에는 다른 출처에서 인용한 원문을 포함해야 합니다. 이 텍스트는 원래 출처에서 가져온 내용이어야 합니다.
<blockquote> 태그는 블록 레벨 요소로 간주되며, 주로 단락, 문단 또는 다른 블록 레벨 요소 내에 사용됩니다. 여러 줄의 텍스트를 포함할 수 있습니다. 또한 <p> 태그 등의 플로우 콘텐츠가 포함될 수 있습니다.
<blockquote>태그는 선택 사항인 cite 속성을 사용하여 인용문의 출처를 URL로 지정할 수 있습니다. URL은 유효한 형식이어야 합니다.

`<blockquote>` 태그의 `cite` 속성 사용법

cite 속성은
인용된 정보에 대한 원본 문서 또는 메시지를 지정하는 URL입니다.

HTML cite 속성 - 올바른 이해와 사용 방법

<blockquote> 태그에 cite 속성이 반드시 있어야 하는 것은 아닙니다.
<blockquote> 태그에서 인용하는 인용문 자체가 충분히 명확하다면 cite 속성을 사용하지 않아도 됩니다. 그러나, cite 속성을 사용하면 <blockquote> 태그에서 인용하는 인용문의 출처를 명시적으로 제공하고, 정보의 신뢰성을 높일 수 있습니다. 웹 페이지의 저작자, 웹 개발자, 검색 엔진 등이 이 정보를 활용할 수 있습니다.

다음의 예제를 참고하세요.

HTML

<blockquote cite="https://ko.wikipedia.org/wiki/Romeo_and_Juliet">
    <p>
        셰익스피어의 로미오와 줄리엣은 아서 브룩의 서사시 로미오와 줄리엣의 비극을 바탕으로 한 것이다.
        아서 브룩의 서사시는 1562년 출간되었다.
        셰익스피어는 아서 브룩의 서사시에서 줄거리를 가져왔다.
        그러나 여러 등장 인물과 세부적인 이야기들은 셰익스피어의 독창적인 창작이다.
    </p>
    <footer>
        <cite>위키피디아</cite>
    </footer>
</blockquote>

HTML <footer> 태그

HTML <cite> 태그