[HTML] strong 태그 - 검색엔진 최적화(SEO) 태그

목 차

• HTML <strong> 태그란?
• 주요 특징
• 기본 사용법
• <strong> 태그와 <b> 태그의 비교
• <strong> 태그와 <em> 태그의 비교
• CSS를 사용한 <strong> 스타일 변경
• SEO(검색엔진 최적화)에서 <strong>의 역할
• <strong> 태그 사용 시 주의할 점

 

HTML <strong> 태그란?

<strong> 태그는 텍스트를 강하게 강조(strong emphasis)할 때 사용하는 HTML 요소입니다. 기본적으로 굵게(bold) 표시되며, 의미적으로 중요한 내용을 강조하는 데 사용됩니다.

 

---

 

주요 특징

• 시각적으로 굵게 표시됨 (하지만 단순한 <b> 태그와는 다름).
• 의미론적(semantic) 의미가 있음 → 검색엔진(SEO)과 접근성(스크린리더)에서 중요한 텍스트로 인식.
• 다른 강조 태그 (<em>, <b>, <i> 등)와 함께 사용할 수 있음.

 

---

 

기본 사용법

<p>이 문장은 <strong>중요한 부분</strong>을 강조합니다.</p>

출력 결과:

이 문장은 중요한 부분을 강조합니다.

텍스트가 굵게(bold) 표시되며, 의미적으로도 중요한 정보로 인식됨.

 

---

 

<strong> 태그와 <b> 태그의 비교

태그	의미	스타일
<strong>	강조(중요한 정보)	굵게 표시 (font-weight: bold;)
<b>	단순한 시각적 강조	굵게 표시 (font-weight: bold;)

SEO와 접근성 측면에서 <b> 보다 <strong>이 더 추천됩니다. <b> 태그는 단순한 시각적 강조(스타일링) 목적이기 때문입니다.

사용 예제:

<p><strong>이 문장은 중요합니다.</strong></p>
<p><b>이 문장은 단순히 굵게 표시됩니다.</b></p>

출력 결과:

이 문장은 중요합니다.

이 문장은 단순히 굵게 표시됩니다.

 

---

 

<strong> 태그와 <em> 태그의 비교

태그	의미	스타일
<strong>	강한 강조 (중요한 내용)	굵게 표시 (bold)
<em>	약한 강조 (강조하는 느낌)	기울임 표시 (italic)

사용 예제:

<p><strong>경고:</strong> 이 작업은 되돌릴 수 없습니다!</p>
<p><em>이 단어는 강조되어 있습니다.</em></p>

출력 결과:

경고: 이 작업은 되돌릴 수 없습니다!

이 단어는 강조되어 있습니다.

<strong>은 중요한 경고/강조, <em>은 부드러운 강조에 사용됨.

 

---

 

CSS를 사용한 <strong> 스타일 변경

기본적으로 <strong> 태그는 font-weight: bold; 스타일이 적용되지만, CSS로 추가 스타일링이 가능함.

사용 예제:

<style>
    strong {
        color: red;
    }
</style>

<p>이 문장에서 <strong>강조된 텍스트</strong>는 빨간색으로 표시됩니다.</p>

 

<strong> 태그에 강조 효과를 더 주기 위해 배경색을 추가하는 스타일링이 가능함.

사용 예제:

<style>
    strong {
        background-color: yellow;
        padding: 2px;
    }
</style>

<p>이 문장에서 <strong>강조된 부분</strong>은 노란색 배경이 적용됩니다.</p>

 

---

 

SEO(검색엔진 최적화)에서 <strong>의 역할

• <strong> 태그를 사용하면 검색 엔진이 중요한 키워드로 인식할 가능성이 높아짐.
• 검색 결과에서 강조되는 단어로 취급될 수 있음.

<p>우리의 제품은 <strong>고품질</strong>과 <strong>합리적인 가격</strong>을 보장합니다.</p>

"고품질"과 "합리적인 가격"이 검색엔진에서 중요한 키워드로 인식될 가능성 증가

 

---

 

<strong> 태그 사용 시 주의할 점

• 너무 남용하지 말 것 → 중요하지 않은 텍스트까지 <strong> 태그를 사용하면 의미가 약해질 수 있음.
• SEO 최적화 목적이라도 자연스럽게 사용 → 키워드 스팸처럼 보이면 검색 순위에 악영향을 줄 수도 있음.
• CSS로 강한 강조 효과 추가 가능 → <strong>만으로 충분하지 않을 때 배경색, 크기 조정 가능.

 

---

 

관련글

• [HTML] canvas 태그 (그래픽 이미지 그리기)
• [HTML] button 태그
• [HTML] br 태그 (줄바꿈)