HTML <bdo> 태그 – 올바른 이해와 사용 방법

`<bdo>` 태그의 정의 및 사용법

<bdo> 태그는
태그 내의 텍스트가 주변 텍스트의 읽기·쓰기 방향에서 명시적으로 재정의 되었음을 나타냅니다.

<bdo>는 "Bi-Directional Override(양방향 재정의)"의 약자로 사용된 것입니다.

이 태그의 dir 속성 설정으로 인해, 태그 내 텍스트의 읽기·쓰기 방향이 주변 텍스트와 반대로 바뀌었을 때 사용됩니다.

많은 언어에서 텍스트는 일반적으로 왼쪽에서 배치되어 오른쪽으로 읽고 쓰지만,
일부 언어(예: 아랍어, 히브리어 등)의 경우에는 반대로 오른쪽에 배치되어 왼쪽으로 읽고 씁니다.

예를 들어, 한국어 문장에서 아랍어를 함께 사용할 경우, 아랍어는 기본적인 텍스트 흐름과 반대 방향이 됩니다. 이때, 아랍어의 읽기·쓰기 방향을 명시적으로 재정의(Override)하려면 <bdo> 태그를 사용합니다. 다음의 예제로 살펴보겠습니다.

코드 부연설명
dir 속성은 텍스트의 읽고 쓰는 방향(direction)을 지정합니다. rtl 값은 오른쪽에서 왼쪽(right-to-left)으로 읽고 쓰게 지정합니다.

코드 부연설명
lang 속성은 요소 콘텐츠와 텍스트가 포함된 모든 요소 속성에 대한 기본 언어(language)를 지정합니다. 웹 접근성을 위한 스크린 리더나, 검색 엔진, 브라우저의 자동 번역 등에서 언어의 종류를 인식하는 정보를 제공합니다.

<bdo> 태그는 모든 전역 속성을 사용할 수 있지만, 그 중에서 dir 속성은 HTML의 의미론적 측면에서 특별한 의미를 가집니다.

이 태그에서는 dir 속성을 지정해야 하며,
주변 텍스트의 방향의 값이 ltr이면 rtl로 재정의해야 하고, 반대로 rtl이면 ltr로 재정의해야 합니다.
auto 값은 지정하면 안 됩니다.

참고로, 글로벌 속성인 dir은 텍스트의 방향을 지정하는 세 가지 키워드 값이 있습니다.

dir 속성의 값
`ltr`	왼쪽에서 오른쪽(left-to-right)으로 읽고 쓰게 지정합니다. 한국어, 영어를 포함한 대부분의 언어에서 사용합니다.
`rtl`	오른쪽에서 왼쪽(right-to-left)으로 읽고 쓰게 지정합니다. 아랍어, 히브리어 등의 언어에서 사용합니다.
`auto`	브라우저가 콘텐츠를 분석하여 적절한 방향을 자동으로 설정합니다. `<bdo>` 태그에서는 사용할 수 없습니다.