HTML&CSS
|
2019. 7. 20. 23:13
[HTML] <h> 태그로 제목 표시하기
<h> 태그로 제목 표시하기
<h> 태그는 문서의 제목을 표시할 때 사용하는 태그로 h는 Heading을 의미하며, 제목의 크기별로 <h1> ~ <h6> 까지 사용이 가능합니다.
헷갈릴 수 있는데 <h1> 태그가 가장 큰 제목을 표시할 때 사용되며, <h6>가 가장 소제목을 표시할 때 사용됩니다. 즉 태그의 숫자가 커질수록 제목 글자의 크기는 작아집니다.
추가적으로 <h> 태그가 제목에 사용된다고 해서 단 한번만 사용해야 되는것은 아니며, 문서 안에서 여러번 사용 가능합니다. 단 문서의 가장 큰 제목에 쓰이는 <h1>의 경우 한 번만 사용하도록 되어있습니다.
예제
<h> 태그가 어떤식으로 보여지는지 보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h태그</title>
</head>
<body>
<h1>이것은 제목입니다.</h1>
<h2>이것은 제목입니다.</h2>
<h3>이것은 제목입니다.</h3>
<h4>이것은 제목입니다.</h4>
<h5>이것은 제목입니다.</h5>
<h6>이것은 제목입니다.</h6>
</body>
</html>
예제 - https://github.com/dololak/html_css/blob/master/example/tag_h.html
실행결과
크롬에서 실행된 결과입니다.
Internet Explorer에서 실행된 결과입니다.
브라우저별로 실행했을때 각 제목 레벨별 글자 크기가 다를 수 있는데, <h> 태그라고 하여 style을 수정하면 안된다는것은 없으니 원하는 글꼴 크기나 스타일을 적용하여 사용할 수 있습니다.
의문점. 제목 표현시 그냥 글꼴을 크게 하면 되는것 아닌지?
물론 <h> 태그가 아닌 <p> 태그 등을 사용하고 글자 크기와 굵기를 진하게 조절하여 사용해도 되지만 웹표준은 제목에 <h> 태그를 사용할것을 권고합니다.
'HTML&CSS' 카테고리의 다른 글
| [HTML] form 태그에서 button 태그 사용시 submit 과 함께 새로고침 되는것 막는 방법 (0) | 2019.11.28 |
|---|---|
| [HTML] <label> 태그란? (0) | 2019.07.23 |
도로락
WriterIT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그