span

설명

의미 없는 인라인 컨테이너로, 스타일링이나 속성 적용을 위해 사용 - 단순히 묶어서 이 부분만 속성 다르게 지정할 때 - 단어, 구, 또는 작은 텍스트 등 짧은 텍스트 조각을 감쌀 때도 쓰임. (태그 등)

Primary

Primary

content category

phrasing

flow

요약 <span> 태그의 역할 예시 <span> vs 다른 시멘틱 태그

요약

<span>은 의미 없는 인라인 컨테이너로, 스타일링이나 속성 적용을 위해서만 사용됩니다.

phrasing content의 일부로, 텍스트처럼 작동하며 다른 인라인 요소와 섞여 사용됩니다.

적합한 시멘틱 태그가 있을 때는 <span> 대신 그 태그를 사용하는 것이 더 좋습니다.

`<span>` 태그의 역할

범용 인라인 컨테이너

<span>은 어떤 의미나 역할을 부여하지 않는 태그입니다. 단순히 그룹화해서 스타일을 적용하거나 속성을 공유하기 위해 사용됩니다.

예를 들어, 텍스트의 일부분에만 특정한 색을 입히거나 폰트를 바꾸고 싶을 때 유용합니다.


<p>Here is a <span class="highlight">highlighted text</span>.</p>

의미를 부여하지 않음

<span> 자체로는 아무 의미도 가지지 않습니다. 단순히 "그룹화"만 제공하며, 의미나 역할이 있다면 적절한 시멘틱 태그를 대신 사용하는 것이 더 좋습니다.

예시

특정 속성을 그룹화해야 할 때: 예를 들어, 다국어 텍스트의 언어 속성을 부여할 때.

español 만 다른 언어이므로 이걸 나타내줌.


<p>This word is <span lang="es">español</span>.</p>

`<span>` vs 다른 시멘틱 태그

<span>은 시멘틱(의미적) 의미가 없는 태그이므로, 가능하면 적절한 시멘틱 태그(<em>, <strong>, <mark>, 등)를 먼저 고려해야 합니다.


<!-- Bad -->
<p>This is <span style="font-weight: bold;">important</span>.</p>

<!-- Good -->
<p>This is <strong>important</strong>.</p>