HTML 제목(Heading)은 어떻게 표현할까?

HTML 제목(Heading)
표제, 머리말이라고 말하고 있으며, 일반적으로 제목을 뜻한다. 표제는 <h1> ~ <h6> 태그로 정의되며, <h1> 가장 중요한 제목을 뜻하고, <6> 가장 중요하지 않는 머리글을 정의를 뜻한다.

예제

<!DOCTYPE html>
<html>
<body>

<h1>표제 1</h1>
<h2>표제 2</h2>
<h3>표제 3</h3>
<h4>표제 4</h4>
<h5>표제 5</h5>
<h6>표제 6</h6>

</body>
</html>

※<h>태그의 위아래로는 약간의 여백이 자동으로 삽입된다.

머리말 (Heading)의 중요성

검색 엔진(naver, google, daum, bing) 포털사이트에서는 머리말을 사용하여 웹페이지의 구조와 내용을 색인화하게 된다. 또한 사용자들은 종종 해당 제목으로 페이지를 훑어 보게 된다. 문서 구조를 표시하려면 표제를 사용하는 것이 중요하다.

<h1> 표제는 주요 제목에 사용되어야 하며, 그 다음 순의 중요도에 따라 <h2>, <h3> 등을 사용하는것이 좋다.

※HTML 문서의 제목에 해당하는 부분을 <big>태그나 <bold>태그를 사용하여 표현하지 않도록 한다.

사용자 임의 지정 표제 크기 변경

html 표제크기는 기본적으로 제공해주는 <h1> ~ <h6> 까지만 사용이 된다. 하지만 style CSS font-size 속성을 사용하게 되면 사용자가 원하는 크기의 제목을 지정하여 사용할 수 있다.

예제

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">사용자 임의지정 표제크기 1</h1>

<p>60px로 지정한 표제 크기 예시입니다. font-size 속성을 사용하게되면 얼마든지 원하는 크기만큼 조절가능합니다.</p>

</body>
</html>

HTML 수평(Horizontal) 태그 사용시 규칙

<hr> 태그는 html 페이지의 컨텐츠를 분리 또는 변경하기 위해서 사용되며, 이것은 수평선으로 표시된다. 일반적으로 제목과 제목 사이를 분리, 주제와 주제 사이를 분리할 때 유용하다.

예제

<!DOCTYPE html>
<html>
<body>

<h1>제목 1</h1>
<p>제목1에 해당되는 컨텐츠가 여기에 있다.</p>
<hr>

<h2>제목 2</h2>
<p>제목2의 A라는 컨텐츠가 여기에 있다.</p>
<hr>

<h2>제목 2</h2>
<p>제목2의 B라는 컨텐츠가 여기에 있다.</p>

</body>
</html>

HTML head 요소

html에서 <head> 요소는 메타데이터(Metadata)의 컨테이너이다. html 메타 데이터는 html 문서에 대한 데이터를 뜻한다. 메타데이터는 실제로 html 문서상에 화면상으로 표시되지 않는다. <head> 태그는 <html> 태그와 <body> 태그 사이에 입력하면 된다.

예제

<!DOCTYPE html>
<html>
<head>
  <title>IT Opening 첫 HTML 페이지</title>
  <meta charset="UTF-8">
</head>
<body>

<p>html 메타데이터 속성에 utf-8 케릭터셋을 설정한 상태이다.</p>
<p>메타데이터는 html 문서에 대해 간략히 소개한 내용을 적어준다.</p>

</body>
</html>

※일반적으로 메타데이터(Metadata)는 문서 제목, 문서 집한, 스타일, 스크립트 및 기타 메타 정보를 정의한다.

HTML 소스 보는 방법

크롬(Chrome) 브라우저

크롬 브라우저의 화면에서

[마우스 오른쪽 버튼 클릭 -> 페이지 소스 보기(V)]

인터넷 익스플로러(Internet Explorer) 브라우저

인터넷 익스플로러 브라우저의 화면에서

[마우스 오른쪽 버튼 클릭 -> 소스보기(V)]

HTML 소스 검사 방법

크롬(Chrome) 브라우저

크롬 브라우저의 화면에서

[마우스 오른쪽 버튼 클릭 -> 검사(N)]

인터넷 익스플로러(Internet Explorer) 브라우저

인터넷 익스플로러 브라우저의 화면에서

[마우스 오른쪽 버튼 클릭 -> 요소검사]

HTML 태그 참조

아래는 html 기본 태그 중 몇가지를 정리한 것이다. 이번 장에서 배운 html 태그를 정리한 것이니 참조하면 좋을것이다.

태그내용
<html>HTML 문서의 최상위 계열에 속함. 즉 root 이다.
<body>문서의 본문을 정의한다.
<head>모든 head 요소 (제목, 스크립트, 스타일, 메타 정보 등)에 대한 컨테이너이다.
<h1> ~ <h6>HTML 제목을 정의한다.
<hr>수평선이며, 컨텐츠를 분리하는 역할을 한다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다