Step 3. 텍스트를 진하게! <strong> 태그
HTML에서 텍스트를 강조하고 싶을 때 가장 먼저 떠오르는 태그가 바로 <strong>입니다. 단순히 진하게 보이기만 하는 게 아니라, 웹 브라우저와 검색엔진, 심지어 화면낭독기에게도 “이 부분은 중요해!”라고 알려주는 태그입니다.
1. 기본 문법
<p>이건 일반 문장이고 <strong>이건 강조된 문장</strong>입니다.</p>렌더링 예시
이건 일반 문장이고 이건 강조된 문장입니다.
2. 의미 기반 마크업
<strong>은 단순한 굵은 글씨가 아닙니다. 의미 있는 강조입니다. 화면낭독기는 이 부분을 다른 어조로 읽어주고, 검색엔진도 중요하게 인식합니다. 단순히 눈에 띄게 하려는 목적이라면 font-weight와 같은 CSS를 쓰는 것이 맞고, 내용상 중요한 부분이라면 <strong>을 써야 합니다.
3. <strong> vs <b> 태그 비교
| 태그 | 시각 효과 | 의미 | 추천 상황 |
|---|---|---|---|
| <b> | 굵게 | 없음 | 스타일만 줄 때 |
| <strong> | 굵게 | 중요 강조 | 의미 강조, 접근성 고려 시 |
4. 실무 예시
지금 단 3일간! 모든 상품 무료배송 혜택을 드립니다.
5. 전체 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML strong 태그 예제</title>
</head>
<body>
<p>이건 일반 문장이고 <strong>이건 강조된 문장</strong>입니다.</p>
<p><b>이건 그냥 굵은 글씨</b>입니다. 의미는 없어요.</p>
</body>
</html>렌더링 예시
이건 일반 문장이고 이건 강조된 문장입니다.
이건 그냥 굵은 글씨입니다. 의미는 없어요.
6. 마무리 요약
- <strong>은 중요함을 강조하는 의미 태그
- 단순한 굵기 표현은 <b> 또는 CSS
- 접근성, 검색엔진 최적화 측면에서도 strong 사용 권장
강조는 단지 굵게 보이는 걸 넘어서 의미를 담는 작업입니다.
초보자일수록 태그 하나하나에 의미를 담는 습관을 들이면 웹 마크업 실력은 자연스럽게 올라갑니다.