HTML5 강조 태그 사용법

1. 강조 태그란?

강조 태그는 HTML 문서에서 특정 텍스트를 강조하거나 강조하는 데 사용되는 태그입니다. 주요 강조 태그로는 strong과 em이 있습니다. 이 태그들은 시맨틱한 의미를 가지며, 스크린 리더와 같은 보조 기술에서도 중요한 역할을 합니다.

2. 기본 구조

<p>
    <strong>중요한 내용</strong>은 굵게 표시됩니다.
    <em>강조하고 싶은 내용</em>은 기울임꼴로 표시됩니다.
</p>

<p>
    <strong><em>굵고 기울어진 텍스트</em></strong>도 가능합니다.
</p>

3. 자주 사용되는 속성

4. 실제 사용 예제

<article class="product-description">
    <h2>신제품 출시 안내</h2>
    
    <p>
        <strong>주의사항:</strong> 이 제품은 18세 이상 사용자만 사용할 수 있습니다.
    </p>
    
    <p>
        <em>한정판</em> 제품이므로 재고가 소진되면 구매가 불가능합니다.
    </p>
    
    <p>
        <strong><em>특별 할인</em></strong> 기간은 3월 15일까지입니다.
    </p>
    
    <div class="features">
        <h3>주요 특징</h3>
        <ul>
            <li><strong>고성능</strong> 프로세서 탑재</li>
            <li><em>경량화</em>된 디자인</li>
            <li><strong><em>방수</em></strong> 기능 지원</li>
        </ul>
    </div>
</article>

5. 스타일링 예제

<style>
    /* 기본 강조 스타일 */
    strong {
        font-weight: 700;
        color: #d32f2f;
    }

    em {
        font-style: italic;
        color: #1976d2;
    }

    /* 특별한 강조 스타일 */
    .warning strong {
        color: #f44336;
        border-bottom: 2px solid #f44336;
    }

    .highlight em {
        background-color: #fff9c4;
        padding: 0 4px;
        border-radius: 2px;
    }

    /* 제품 설명 스타일 */
    .product-description strong {
        font-size: 1.1em;
    }

    .product-description em {
        font-weight: 500;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        strong, em {
            font-size: 0.95em;
        }
    }
</style>

6. 성능 최적화 팁

• 강조 태그의 중첩을 최소화합니다.
• CSS로 스타일링을 처리합니다.
• 접근성을 고려한 마크업을 사용합니다.
• 검색 엔진 최적화를 고려합니다.
• 불필요한 강조는 피합니다.

7. 검증 및 테스트

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

• W3C 마크업 검증 서비스 사용
• 스크린 리더 테스트
• 다양한 브라우저에서 테스트
• 접근성 검사 도구 사용
• 검색 엔진 최적화 도구 사용