HTML 'blockquote' 태그, 다른 글을 인용할 때 쓰는 코드

HTML 카테고리에 쓰는 두 번째 글이다.

HTML 독학에 효율적인 방법 (feat. 생활코딩)

HTML을 독학으로 공부하고 싶은 사람들을 위해서 그 방법을 안내하는 글입니다.

이전에는 HTML이라는 언어를 생활코딩이라는 유튜브 채널을 통해 독학하는 방법을 알려줬다.

그리고 앞으로 이 블로그의 HTML 카테고리에는 생활코딩에서는 알려주지 않은 태그, 혹은 알려줬었던 태그에 대해 더 자세히 설명하는 글을 쓸 예정이다.

오늘 다룰 HTML 태그는 생활코딩의 HTML 수업에서는 나오지 않았던 태그인데, 블로그를 운영하는 사람에게는 거의 필수적이라고 해도 과언이 아닌 블록쿼트^blockquote 태그다.

blockquote 태그

<blockquote> 태그는 다른 사람의 글이나 외부 출처의 글을 인용할 때 사용하는 태그다.

블록쿼트^blockquote는 block과 quote, 두 단어가 합쳐진 태그로, 단어의 뜻 그대로 인용 구역이라는 뜻이다.

이 태그는 인용된 콘텐츠가 내가 작성한 글이 아니라는 것을 검색 엔진에게 명확히 알려주는 역할을 한다.

blockquote 태그의 사용 방법

<blockquote cite="인용하는 웹사이트 URL">
인용할 문구
<br>
<cite>인용한 웹사이트 이름</cite>
</blockquote>

이렇게 사용한다.

<blockquote> 태그의 cite 속성은 필수 사항은 아니다.

인용할 원본 문서가 웹상에 있는 다른 글이라면 URL을 지정하고, 웹상에 있는 글이 아닌 책의 내용을 인용하는 거라면 cite 속성을 넣지 않아도 된다.

참고로 cite는 site의 오타가 아니다. cite가 맞다.

<cite> 태그는 인용하는 자료의 제목이나 출처(예: 책 제목, 웹사이트 이름, 논문 제목)를 명시할 때 사용한다.

이 태그는 <blockquote> 태그 내부에 함께 사용한다.

blockquote 태그를 사용하는 이유

다른 사람의 글을 인용할 때 <blockquote> 코드를 사용하는 이유는 명확한 구조, 검색 엔진 최적화(SEO), 그리고 접근성 향상 때문이다.

단순히 텍스트를 굵게 하거나 기울이는 것보다 훨씬 많은 장점이 있다.

1. 의미론적 명확성

<blockquote> 태그는 검색 엔진과 방문자 모두에게 해당 내용이 인용된 텍스트라는 것을 알려준다.

검색 엔진 로봇이 이 태그를 인식하여 해당 내용이 원본 글이 아닌 외부 출처에서 가져온 것임을 파악한다. 이렇게 하면 중복 콘텐츠로 인식될 위험을 줄여주고, 원본 저작자를 존중하는 의미도 있다.

그리고 시각적으로 들여쓰기나 다른 스타일이 적용되어, 일반 텍스트와 구분된다.

이를 통해 방문자는 글의 흐름을 방해받지 않고 인용문을 쉽게 식별할 수 있다.

2. 검색 엔진 최적화 (SEO)

구글과 같은 검색 엔진은 의미론적 HTML 태그를 중요하게 생각한다.

<blockquote>는 인용문이라는 것을 로봇에게 전달하고, cite 속성을 통해 원본 출처를 명시적으로 밝힐 수 있다. 이렇게 하면 다음과 같은 장점들이 있다.

중복 콘텐츠 회피: <blockquote>를 사용하지 않고 인용문을 복사하여 붙여넣으면, 검색 엔진이 이를 중복된 내용으로 판단하여 블로그의 검색 순위를 낮출 수 있다.

<blockquote>는 이 위험을 줄여준다.

신뢰도 향상: 인용 출처를 명확히 밝히면 블로그 글의 신뢰도가 높아져 검색 엔진이 해당 글을 더 가치 있다고 평가할 수 있다.

3. 접근성 향상

시각 장애가 있는 사용자가 화면 읽기 프로그램(스크린 리더)을 사용할 때, <blockquote> 태그는 "인용문 시작"과 같은 정보를 음성으로 알려준다.

이런 방식으로 일반 텍스트와 인용문을 명확히 구분해서 콘텐츠 이해를 돕는다.

단순한 스타일링(<i>나 <b> 태그)으로는 이런 의미를 전달할 수 없다.

♬ Nat King Cole - 'Tis Autumn (1949) (작곡 Henry Nemo)

Old Father Time checked, so there'd be no doubt
Called on the north wind to come on out
Then cupped his hands so proudly to shout
La-di-da, di-da-di-dum, 'tis Autumn

The trees say they're tired, they've born too much fruit
Charmed all the wayside, there's no dispute
Now shedding leaves, they don't give a hoot
La-di-da, di-da-di-dum, 'tis Autumn

Then the birds got together
To chirp about the weather, mmm
After makin' their decision
In birdie-like precision
Turned about and made a bee-line to the south

My holding you close really is no crime
Ask the birds, the trees, and Old Father Time
It's just to help the mercury climb
La-di-da, di-da-di-dum, 'tis Autumn

It's just to help the mercury climb
La-di-da, di-la-di-dum, 'tis Autumn

9월이다.

가을과 어울리는 곡과 함께 가사를 가져와봤다.

지금 이 가사를 감싸고 있는 태그가 <blockquote> 태그다.

가사는 어디서 가져왔는지 명확한 출처가 없기 때문에 출처는 쓰지 못했지만, 이런 식으로 사용하면 된다.

내가 쓴 글과 디자인이 확실하게 달라져서 글을 읽는 사람에게도 이 부분은 인용된 글이라는 걸 쉽게 알려줄 수 있다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.