HTML 텍스트 관련 태그-1 (제목, 문단, 줄바꿈, 인용문)

텍스트 없는 웹페이지가 없을 정도로, 텍스트는 웹 페이지에서 비중을 많이 차지하는 부분입니다. 텍스트 구성 및 웹 표준화를 위한 올바른 텍스트 사용 태그에 대해 공부한 내용을 정리해보겠습니다.

 

 

HTML 태그 정리표 보러가기

HTML 태그 정리표 HTML 주요 태그들 정리

 

<h1> ~ <h6> 제목을 담당하는 태그

heading의 약어 h를 사용하며, 문서 및 각 문장들의 제목을 지정하는 태그입니다. h뒤의 숫자가 작을수록 텍스트 크기는 커집니다.

h1태그는 한 문서에서 되도록 이면 한 번만 사용하는 것이 좋으며 책의 제목 같은 개념이라고 생각하시면 됩니다. h2부터 숫자가 높아질수록 대분류 중분류 소분류와 같은 개념으로 이해하시면 됩니다. heading 태그를 사용할 때 주의해야 할 부분은 낮은 숫자에서 순차적으로 사용해야 되는 부분입니다.

즉 h3태그를 h2보다 먼저 사용하면 안 된다는 뜻으로 <h2>를 중분류 <h3>를 소분류라고 가정했을 때 소분류를 먼저 나열하고 중분류를 나열한다면 순서에 맞지 않는 태그 사용으로 잘못된 사용입니다.

 

heading태그-올바른-사용-잘못된사용-예시

 

 

 

텍스트 문단 구성 <p> 태그 , 줄 바꿈 <br> 태그

<p> 태그는 글 작성 시 문단을 구성할 때 사용합니다. 문단이 끝나기 전에 줄 바꿈이 필요한 경우 텍스트 에디터에서 엔터키를 눌러서 줄 바꿈을 해도 웹 페이지상에서는 줄 바꿈이 일어나지 않고, 그대로 문장이 이어지는 것을 볼 수 있습니다. 이럴 때 <br> 태그를 사용하면 <p> 태그 안에서도 줄 바꿈을 할 수 있습니다.

한 문장이 종료되고, 다음 문장을 이어갈 때 <br> 태그를 사용해서 줄 바꿈을 하기보다는 <p> 태그를 닫고 새로운 <p> 태그로 사용하는 것이 좋습니다.

 

 

 

인용문을 작성할 때 사용하는 <blockquote> 및 <cite> 태그

웹사이트에서 다른 사이트의 내용을 참조하여 작성하거나 인용하여 사용할 때가 있습니다. 그냥 퍼와서 사용하는 거는 문제가 됩니다만, 인용된 내용을 표시할 때, 단순히 텍스트로 표시하면 HTML 표준에 맞지 않을뿐더러, 인식할 방법이 없습니다. 이때 인용문을 작성할 때, <blockquote> 태그를 사용하면, 브라우저 인식에서도 해당 문장은 인용문이라 인식하며 디스플레이 방식도 약간 바뀌게 됩니다. 일반적으로 CSS 스타일링이 들어가지 않은 인용문은 들여 쓰기가 되어 표시됩니다.

<blockquote>로 인용문을 작성했다면, 해당 인용문 및 저작물의 출처를 나타내고 싶을때는 <cite>태그를 사용하여야 합니다.

아래는 티스토리에서 제공하는 스타일링이 들어간 인용문입니다.

HTML <blockquote> 요소
는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여 쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 
사용 일람을 참고하세요) 인용문의 출처 URL은 cite 특성으로, 출처 텍스트는 <cite> 요소로 제공할 수 있습니다.
- MDN 참조- 

<blockquote>
HTML <blockquote> 요소
는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여 쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 
사용 일람을 참고하세요) 인용문의 출처 URL은 cite 특성으로, 출처 텍스트는 <cite> 요소로 제공할 수 있습니다.
</blockquote>
- <cite><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">MDN</a></cite> 참조-

 

 

 

최종 정리

태그	설명
<h1> ~ <h6>	문서 및 단락 제목 지정<h1>은 문서에서 한번만 사용하는 것을 권장
<p>	텍스트 단락 입력
<br>	줄 위치 변경
<blockquote>	인용문 작성할 때 사용
<cite>	인용문 및 저작물의 출처