Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML에서 ```html 과 태그의 차이점 완벽 정리

굵은 글씨, 두 가지 HTML 태그

타이포그래피에서 볼드체(boldface)는 가장 강한 형태의 강조로 여겨집니다. 현대 HTML에는 대부분의 브라우저에서 기본적으로 텍스트에 굵은 글꼴 두께를 적용하는 두 가지 요소가 있습니다.

<strong> 태그와 <b> 태그는 다음과 같이 사용합니다.

<p>strong 태그는 텍스트를 <strong>강조</strong>하는 데 사용됩니다.</p>

<p>b 태그는 텍스트를 <b>강조</b>하는 데 사용됩니다.</p>

현대 HTML(HTML5)에서는 <strong>과 <b> 모두 시맨틱하면서도 유효한 요소입니다. 두 태그 모두 최신 브라우저에서 동일한 볼드체 스타일로 렌더링되지만, 그 의미와 용도는 전혀 다릅니다.

그렇다면 strong과 b의 차이는 무엇이며, 어떤 상황에 어떤 것을 사용해야 할까요?

  • <strong> 요소는 경고문처럼 중요도가 높은 콘텐츠에 사용됩니다.
  • <b> 요소는 중요성을 암시하지 않고 단순히 주목을 끌기 위한 목적으로 사용됩니다.

<b> 태그 사용 예시

스페인어 단어 <b>idioma</b>는 “언어”를 의미하며, 그리스어에서 유래했습니다.

위 예제에서 필자가 idioma라는 단어를 강조한 이유는 그 단어가 특별히 중요해서가 아니라, 주변 텍스트와 구분되도록 만들고 싶은 외국어 단어이기 때문입니다. 이는 의미 전달을 위해 반드시 필요한 작업이라기보다 스타일적인 결정에 가깝습니다.

따라서 특별한 시맨틱 의미 없이 단순히 시선을 끌고 싶다면, 과거(HTML5 이전)에는 <b>를 사용하는 것이 올바른 선택이었습니다. 다만 오늘날에는 화면 표현을 위해 HTML이 아닌 CSS를 사용하는 것이 원칙이기 때문에, 필자는 <b>를 사용하지 않습니다.

<strong> 태그 사용 예시

2020년에는 <strong>보안</strong>과 <strong>성능</strong>이 SEO에 매우 중요합니다.

위 예제에서 보안과 성능을 강하게 강조한 이유는, 이 두 주제가 웹사이트의 SEO(그리고 UX)에 실질적으로 매우 중요하기 때문입니다.

CSS로 시각적 차이 만들기

기본적으로 <strong>과 <b>는 대부분의 브라우저에서 동일한 볼드체로 표시되기 때문에 많은 혼란을 일으킵니다. 용도가 다른 도구인데 왜 겉모습까지 똑같이 만들어 놓았을까요?

필자도 여러분에게 동감입니다. 꽤 짜증 나는 부분이죠.

그래서 브라우저 기본값을 재정의해 두 태그에 서로 다른 스타일을 적용하는 것이 좋습니다.

<strong>과 <b>를 시각적으로 구분하는 좋은 방법은, CSS로 <strong> 요소에 500~900 사이의 font-weight 값(사용하는 폰트 패밀리에 따라 조절)을 지정하는 것입니다.

strong {
  font-weight: 700;
}

그리고 <b>에는 전혀 다른 스타일을 적용합니다. 예를 들면 다음과 같습니다.

b {
  font-weight: 400;
  color: green;
}

위 코드는 스타일 추천이라기보다는, 브라우저에서 렌더링된 페이지를 볼 때 어떤 태그를 사용했는지 쉽게 구분할 수 있도록 돕는 예시입니다.

마크다운(Markdown)을 사용하는 경우

Browserling 같은 HTML to Markdown 변환기로 <b>나 <strong>을 변환해 보면, 둘 다 동일한 ** ** 문법으로 변환되는 것을 확인할 수 있습니다. 그리고 이 문법은 브라우저에서 다시 <strong>으로 렌더링됩니다.

그렇다면 이건 어떻게 된 일일까요?

솔직히 필자도 확실하지 않습니다. 마크다운 문법만으로 <b>를 브라우저에 렌더링하는 방법을 소개하는 가이드를 찾지 못했습니다.

하지만 걱정하지 않아도 됩니다. 마크다운 파일 안에는 HTML 문법을 직접 작성할 수 있습니다(구버전을 사용하지 않는 한). 따라서 <strong> 대신 <b>를 꼭 사용해야 한다면 다음과 같이 작성하면 됩니다.

마크다운 파일 안에 있는 한 줄의 텍스트로, 자동으로 p 태그로 감싸져 렌더링됩니다

실제로 이 튜토리얼도 마크다운으로 작성되었습니다. 지금 이 텍스트를 <b> 요소로 강조해 보겠습니다. 이 문단을 드래그해 선택한 뒤 “검사(Inspect)”를 클릭하면, 실제로 <b> 요소가 사용된 것을 확인할 수 있습니다.

어떤 것을 사용하느냐가 정말 중요할까?

생사가 걸린 문제는 아닙니다. 그렇지 않았다면 최신 브라우저들이 <b>와 <strong>을 동일한 볼드체로 렌더링하지 않았을 테니까요.

하지만 시맨틱 관점에서는 분명한 차이가 존재하며, 이것이 바로 이 글에서 전달하고자 하는 핵심 메시지입니다. 따라서 시맨틱 마크업을 매우 중요하게 평가하는 회사의 면접을 앞두고 있다면, 이 차이를 반드시 숙지해 두어야 합니다.

요약

  • <b>: 특정 텍스트에 주목을 끌기 위해 사용합니다.
  • <strong>: 중요한 텍스트임을 나타낼 때 사용합니다.
  • 판단이 서지 않는다면 <strong>을 사용하세요.

좋은 경험 법칙은 강조 자체를 남용하지 않는 것입니다. 너무 많은 것을 강조하려 들면 강조의 힘이 오히려 사라집니다. 모든 것을 강조하면 결국 아무것도 강조하지 않는 것과 같습니다(범용 마케팅 랜딩 페이지 사이트들, 지금 당신 얘기입니다).