웹 개발 기술을 향상시키는 11가지 특이한 HTML 태그

 <p>
  This product is <s>out-of-stock</s> currently available at a discounted
  price!
</p> 

앞서 언급한 해당 제품의 재고 수준 변경 표시는 해당 텍스트 표현을 가로지르는 선으로 표시되며, 이는 업데이트된 재고 상태 정보를 상징하는 역할을 합니다.

시간

시간 HTML 요소는 콘텐츠 내에서 날짜와 시간에 관한 의미적으로 풍부한 정보를 전달하기 위한 유용한 도구입니다.

‘date-time’ 속성을 활용하면 기계가 읽을 수 있는 날짜 또는 시간 표현을 지정할 수 있으므로 웹 브라우저, 검색 엔진 알고리즘 및 스크린 리더 소프트웨어에서 쉽게 이해할 수 있습니다.

 <p>
  The Declaration of Independence was signed on
  <time datetime="1776-07-04">July 4, 1776</time>.
</p> 

` ` HTML 요소를 활용하면 콘텐츠를 보다 체계적으로 구성하고 스크린 리더와 같은 보조 기술을 사용하는 사용자를 포함하여 더 많은 사용자의 접근성을 향상시킬 수 있습니다.

웹사이트 레이아웃 내에서 다국어 콘텐츠를 처리하는 것은 때때로 복잡할 수 있으며, 특히 개별 구성 요소에 다양한 형식이 필요한 경우 더욱 그렇습니다.

` ` HTML 요소를 활용하는 이 접근 방식은 다양한 언어적 요구에 따라 스타일이나 형식을 지정해야 하는 콘텐츠의 특정 부분을 대상으로 하여 최적의 프레젠테이션과 웹 표준 준수를 가능하게 합니다.

 <p>
  <bdi>5,000</bdi> people attended the conference.
</p> 

태그는 5,000이라는 숫자 값을 포함합니다. 이를 통해 주변 텍스트에 존재하는 언어적 변형이나 문체적 뉘앙스로 인해 그림이 흐트러지는 것을 방지할 수 있습니다.

<루비>, <알티>, <알피>

문자 위나 아래에 후리가나 또는 루비 주석과 같은 발음 단서를 사용하는 동아시아 타이포그래피에서는 , , HTML 요소가 관련됩니다.

 <p>
  I'm learning
  <ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p> 

요소는 漢(한자) 문자를 포함하고 요소는 かん(칸) 발음을 포함합니다. 또한 요소는 괄호 표시와 함께 루비 주석을 처리할 수 없는 브라우저를 대체하는 역할을 합니다.

HTML 요소는 레이아웃의 무결성을 방해할 위험이 있는 긴 단어가 있을 때 유용한 도구로 사용됩니다. 이 기호 마커는 브라우저가 긴 단어에 줄 바꿈을 도입할 수 있는 잠재적 지점을 표시하여 콘텐츠를 더 읽기 쉽고 체계적으로 표시할 수 있도록 합니다.

 <p>
  This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a?query=string.
</p> 

앞서 언급한 URL에는 wbr 요소가 포함되어 있어 브라우저가 주변 텍스트의 시각적 표시를 유지하면서 필요한 경우 두 줄로 분할할 수 있습니다.

<아래 텍스트> 및 <위 텍스트>

과학 또는 수학 표기법을 사용할 때는 태그를 아래 첨자 텍스트에, 태그를 위 첨자 텍스트에 사용할 수 있으며, 둘 다 공식 문서 및 학술 출판물에서 일반적으로 사용됩니다.

 <p>
  The chemical formula for water is H<sub>2</sub>O,
  and the Pythagorean theorem is
  a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
</p> 

_{HTML 태그의 활용은 H2O 엔티티 내의 숫자 값 “2”를 위첨자로 표시하는 반면, ^{태그는 피타고라스 정리에 표시되는 지수를 나타냅니다.}}

하드 드라이브 사용률, 평점 또는 학업 성적과 같이 사전 정의된 스펙트럼에 속하는 스칼라 값을 표현해야 하는 경우 요소는 시각적으로 매력적이고 쉽게 이해할 수 있는 방식으로 이 정보를 렌더링하는 데 적합한 선택입니다.

‘값’, ‘최소’, ‘최대’ 속성을 사용하여 주어진 측정값의 현재 값, 가능한 최저값, 가능한 최고값을 각각 지정할 수 있습니다.

 <meter value="75" min="0" max="100">75%</meter> 

요소는 이 예에서 75%에 해당하는 테스트 결과를 나타냅니다.

`

 <dialog open>
  <p>This is a dialog box!</p>
  <button>Close</button>
</dialog>