HTML5 제목 태그 사용법

1. 제목 태그란?

제목 태그(h1~h6)는 HTML 문서에서 제목과 부제목을 정의하는 태그입니다. h1이 가장 중요한 제목이고, h6가 가장 낮은 수준의 제목입니다. 문서의 구조를 명확하게 하고 검색 엔진 최적화(SEO)에 중요한 역할을 합니다.

2. 기본 구조

제목 태그의 기본 사용법

<h1>웹사이트의 주요 제목</h1>

<h2>섹션 제목</h2>
<p>섹션 내용...</p>

<h3>하위 섹션 제목</h3>
<p>하위 섹션 내용...</p>

<h4>더 작은 제목</h4>
<p>내용...</p>

<h5>작은 제목</h5>
<p>내용...</p>

<h6>가장 작은 제목</h6>
<p>내용...</p>

3. 자주 사용되는 속성

속성 설명 예시
class CSS 클래스 지정 <h1 class="main-title">
id 고유 식별자 <h2 id="section1">
style 인라인 스타일 <h3 style="color: blue;">

4. 실제 사용 예제

<article class="blog-post">
    <header>
        <h1>웹 개발의 기초</h1>
        <p class="post-meta">작성자: 홍길동 | 2024년 3월 15일</p>
    </header>

    <section>
        <h2>HTML이란?</h2>
        <p>HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.</p>

        <h3>HTML의 기본 구조</h3>
        <p>HTML 문서는 DOCTYPE 선언, html, head, body 태그로 구성됩니다.</p>

        <h4>DOCTYPE 선언</h4>
        <p>DOCTYPE 선언은 HTML 문서의 버전을 지정합니다.</p>
    </section>

    <section>
        <h2>CSS란?</h2>
        <p>CSS는 웹 페이지의 스타일을 정의하는 언어입니다.</p>

        <h3>CSS의 기본 문법</h3>
        <p>CSS는 선택자와 선언부로 구성됩니다.</p>
    </section>
</article>

실제 브라우저에서 보여지는 모습:

웹 개발의 기초

작성자: 홍길동 | 2024년 3월 15일

HTML이란?

HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.

HTML의 기본 구조

HTML 문서는 DOCTYPE 선언, html, head, body 태그로 구성됩니다.

DOCTYPE 선언

DOCTYPE 선언은 HTML 문서의 버전을 지정합니다.

CSS란?

CSS는 웹 페이지의 스타일을 정의하는 언어입니다.

CSS의 기본 문법

CSS는 선택자와 선언부로 구성됩니다.

💡 주의사항

5. 스타일링 예제

<style>
    /* 기본 제목 스타일 */
    h1 {
        font-size: 2.5em;
        margin-bottom: 1em;
        color: #333;
        border-bottom: 2px solid #333;
        padding-bottom: 0.5em;
    }

    h2 {
        font-size: 2em;
        margin: 1.5em 0 1em;
        color: #444;
    }

    h3 {
        font-size: 1.5em;
        margin: 1.2em 0 0.8em;
        color: #555;
    }

    h4 {
        font-size: 1.2em;
        margin: 1em 0 0.6em;
        color: #666;
    }

    h5 {
        font-size: 1.1em;
        margin: 0.8em 0 0.4em;
        color: #777;
    }

    h6 {
        font-size: 1em;
        margin: 0.6em 0 0.3em;
        color: #888;
    }

    /* 블로그 포스트 제목 스타일 */
    .blog-post h1 {
        font-family: 'Noto Serif KR', serif;
        line-height: 1.2;
    }

    .post-meta {
        color: #666;
        font-size: 0.9em;
        margin-top: -1em;
        margin-bottom: 2em;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        h1 { font-size: 2em; }
        h2 { font-size: 1.8em; }
        h3 { font-size: 1.4em; }
        h4 { font-size: 1.1em; }
        h5 { font-size: 1em; }
        h6 { font-size: 0.9em; }
    }
</style>

6. 성능 최적화 팁

7. 검증 및 테스트

제목 태그가 올바르게 사용되었는지 확인하는 방법: