HTML 텍스트 태그로 글 제목(h 태그), 문단 구성(p 태그), 줄바꿈(br)과 인용문(blockquote) 사용해보기

제목을 나타내는 h 태그

h-태그-올바른사용-잘못된사용


문서의 제목을 지정할 때 사용하는 h 태그는 h1부터 h6까지 있습니다. 숫자 가 커질수록 하위 개념의 제목으로 생각하시면 됩니다.

h1의 경우에는 특별하게 한 html 파일에서 한 번만 사용하는 것이 좋습니다. 책의 제목과 같은 개념으로 생각하시면 될 것 같습니다.

h 태그를 사용할 때, 유의해야 할 점은 h 태그 뒤에 붙는 숫자의 사용을 순차적으로 사용해야 합니다.

예를 들어 h4 태그를 사용하고 그 뒤에 h3 태그를 사용하면 안 된다는 뜻으로 문장으로 풀이하게 되면 소분류를 먼저 나열하고 그 밑에 중분류를 선언하는 모양이 되게 되니 내림차순으로 사용하여 문단을 구성해야 합니다.

h 태그 사용 예시

<h1>책제목</h1>
<h2>목차-1</h2>
<h3>목차-1 하위주제-1</h3>
<h3>목차-1 하위주제-2</h3>
<h2>목차-2</h2>
<h3>목차-2 하위주제-1</h3>
<h4>목차-2 하위주제-1 의 문단</h4>
<h3>목차-2 하위주제-2</h3>


텍스트 문단 p태그와 줄바꿈 br태그

웹페이지 문서에서 한문단 한문단을 구성할 때 p 태그를 사용하면 됩니다.

이때 줄바꿈을 위해 엔터키를 입력해도 문서상에서는 줄바꿈이 일어나지 않습니다.

이럴 때는 p 태그를 닫고 다시 새로운 p 태그를 선언하거나 줄바꿈을 해주는 br 태그를 p 태그 사이에 넣어 줄바꿈을 넣어 주어야 합니다.

p 태그, br 태그 사용 예시

<p>구글 블로거를 사용하여 HTML 관련 포스팅을 하고 있습니다.<br>오늘은 HTML 텍스트 관련 태그에 대해서 정리하고 있었습니다.</p>

p 태그, br 태그 예시 결과

구글 블로거를 사용하여 HTML 관련 포스팅을 하고 있습니다.
오늘은 HTML 텍스트 관련 태그에 대해서 정리하고 있었습니다.


인용문 blockquote태그와 인용문 출처를 적는 cite태그

작성하는 웹페이지에 타 사이트의 내용을 인용하여 사용할 때 인용하는 문장에는 blockquote 태그를 사용하면 됩니다. 일반 문단과 달리 들여 쓰기가 기본적으로 되어 표현됩니다.

blockquote 태그를 사용하면 브라우저가 인용문으로 인식하게 되어 브라우저상에서 일반 문단과는 다른 스타일로 표현됩니다. cite 태그는 출처의 URL을 적어서 사용하시면 됩니다.


blockquote 태그, cite 태그 사용 예시

<blockquote cite="https://namu.wiki/w/HTML">
  <p>프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다. 보면 알겠지만 애초에 이름 HTML의 ML이 마크업 언어라는 뜻이다. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.
  </p>
</blockquote>

blockquote 태그, cite 태그 예시 결과

프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다. 보면 알겠지만 애초에 이름 HTML의 ML이 마크업 언어라는 뜻이다. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.