heading 태그는 제목 태그로써 html5 웹문서의 내용들의 제목을 나타낸다. 웹 문서의 내용은 다양한 글내용인 컨텐츠로 구성되어 있다. 이들 컨텐츠들을 구분하고 정의하는 역할을 하는 것이 heading 태그이다. 이것은 h숫자 형태로 사용되며 숫자가 커질수록 제목 크기는 작아진다.
html5 제목 표시 태그 사용
heading tag
html 태그에서 문서의 제목을 나타내는 것은 heading 태그를 이용한다.
웹문서의 내용은 컨텐츠라 불리기도 하는데 이 컨텐츠들의 제목이라 보면 된다.
위키백과나 구글의 고객센터 부분을 보면 잘 알 수 있다.
heading 태그는 h1 부터 h6까지 사용되며 숫자가 커질수록 글자의 크기는 작아진다.
h1 ~ h6 heading 태그
문서의 제목 태그로 잘 알려져 있는 것이 heading 태그이다.
h1 부터 h6 까지 사용되는데 숫자가 커질수록 제목글자 크기는 작아진다.
문서 내에 존재하는 컨텐츠들을 대표하는 제목으로 생각해도 된다.
다른 의미로 숫자가 작을수록 대제목으로 표시하기도 한다.
즉 숫자가 커질수록 점차 소제목의 개념이 적용된다.
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>샘플 코드
위의 heading 태그를 이용하여 html5 문서를 만들어 본다.
어렵지 않다.
기본적인 웹문서에서 body 태그 내에 위의 코드를 적용만 할 것이다.
html 의 기본 구성에 대한 내용은 이전 포스팅을 참고해 본다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<!-- 제목 -->
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
<!-- // -->
</body>
<!-- // -->
</html>
<!-- // -->위의 코드는 html5 기본문서를 그대로 사용하였고 body 태그안에 그대로 작성하였다.
heading 태그에 대해 정리해 본다.
숫자가 작아질수록 제목 글자 크기는 커지며, 대제목에 가깝다.
숫자가 커질수록 제목 글자 크기는 작아지며, 소제목에 가깝다.
결과 화면을 보자.
'programming > web' 카테고리의 다른 글
| html5 링크 a 사용 웹페이지 연결 및 이동 (0) | 2022.02.12 |
|---|---|
| html5 문단 태그 p 사용 컨텐츠 내용 표시 paragraphs tag (0) | 2022.02.10 |
| doctype html 의미 html5 웹문서 선언 (0) | 2022.02.06 |
| HTML 기본 문서 살펴보기 (0) | 2022.02.04 |
| html 이란 홈페이지 만들기 위한 마크업 언어 (0) | 2022.02.03 |
댓글