<p>
    빛의 삼원색은
    <span style="color: red;">빨강</span>,
    <span style="color: green;">초록</span>,
    <span style="color: blue;">파랑</span>으로
    구성되어 있습니다.
</p>
브라우저에서 실제 표시된 모습
<p>이 문장에는 <span id="targetSpan" style="background-color: gold;">특정 부분</span>이 있습니다.</p>
<button type="button" id="targetSpanBtn">텍스트 변경하기</button>

<script>
  // JavaScript를 사용하여 버튼을 클릭하면 특정 span 요소의 텍스트를 변경합니다.
  const btn = document.getElementById('targetSpanBtn');

  btn.addEventListener("click", () => {
    const targetSpan = document.getElementById('targetSpan');
    targetSpan.innerText = '변경된 텍스트';
  });
</script>
브라우저에서 실제 표시된 모습 버튼을 클릭하면 실제 자바스크립트가 적용된 것을 확인할 수 있습니다.
<p>제목은 "<span lang="fr">Le Bon Usage</span>"입니다.</p>
<button type="button" id="toggle-button">
    <span class="toggle-button-text">펼쳐보기</span>
    <span aria-hidden="true" class="toggle-button-arrow"></span>  
</button>
#toggle-button {
    padding: 0.5em 1em;
    background: none;
    border: 1px solid #777;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.toggle-button-text {
    margin-right: 1em;
}
.toggle-button-arrow { /* 오직 시각적 스타일을 위한 장식용 태그 */
    display: inline-flex;
    width: 0.7em;
    height: 0.7em;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotateZ(-45deg) translateY(-0.3em);
}
브라우저에서 실제 표시된 모습
span 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<span> 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.