7) HTML 요소 - 제목, 단락

제목 태그

제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그입니다.

태그 이름은 heading을 줄여서 h로 쓰며, 제목의 레벨에 따라서 <h1>~<h6>까지 있습니다.

보통 <h1>은 해당 페이지를 대표하는 큰 제목으로 주로 사용되며, 숫자가 올라갈수록 조금 더 낮은 수준의 소제목을 나타내게 됩니다.

하지만 현재 웹 페이지의 내용은 제목과 본문 식의 문서 형태보다는 주로 이미지나 그림처럼 시각적인 형태로 표현되고 있어서 제목 태그를 <h6>까지 쓰는 경우는 거의 없습니다.

<h1>역사</h1>
<h2>개발</h2>
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안
... 이하 생략
<h2>최초 규격</h2>
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로..
... 이하 생략

 

예시 글에서는 역사가 가장 큰 제목이기 때문에 <h1>를 사용했고,

개발과 최초 규격에는 그보다 아래 단계인 <h2>를 사용했습니다.

 

제목 태그를 사용하면, 일반 텍스트보다 더 강조되는 스타일이 적용되는데

이는 브라우저가 기본적으로 제목 태그에 제공하는 스타일입니다.

제목이라는 의미에 맞게 기본적으로 좀 더 굵고 크게 표현이 됩니다.

 

단락 태그

단락(paragraph) 태그는 paragraph를 줄여서 p로 씁니다.

제목 태그에 이어 본문에 해당하는 내용을 단락 태그를 이용해 작성해보겠습니다.

<h1>역사</h1>
<h2>개발</h2>
<p>
    1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안
    ... 이하 생략
</p>
<h2>최초 규격</h2>
<p>
    HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로..
    ... 이하 생략
</p>

 

화면에는 별다른 변화는 없지만, 이전보다 훨씬 의미에 맞게 잘 짜인 마크업 구조라고 볼 수 있습니다. 

 

 

개행

 

<p>를 사용해서 단락으로 구분하면 자연스럽게 개행이 됩니다.

이처럼 <p>를 이용하면 태그 자체에서 자연스럽게 개행이 되지만, <p> 내부에서 강제로 개행을

하기 위해서는 <br>을 이용해야 합니다.