소제목 및 제목을위한 HTML

이 기사에서는 웹 제목 구조의 자막 및 대형 제목에 대한 최고의 HTML 쓰기 방법에 대해 설명합니다. 저자는 다양한 솔루션을 열거하고 각각의 의미 및 접근성 문제를 분석합니다.

이 기사는 먼저 일반적인 실수를 소개합니다.<h3></h3> 둥지<h2></h2> 즉, 하위 타이틀이 맨 위에 있고 큰 제목은 맨 아래에 있습니다. 저자는 시각적 크기가 의미 적 계층을 나타내지 않기 때문에이 접근법이 의미론을 위반한다고 믿는다. 이 구조를 사용하면 보조 기술 (예 : 스크린 리더)이 컨텐츠 구조를 이해하고 접근성에 영향을 미치기가 어렵습니다.

다음으로 저자는 몇 가지 대안을 제안합니다.

계획 1 : 반전<h2></h2> 그리고<h3></h3> 주문하다. 자막을 설정하십시오<h2></h2> , 제목을 다음으로 설정하십시오<h3></h3> . 저자는 자막이 의미 적으로 더 중요하다면이 접근법이 더 합리적이라고 생각합니다.

해결책 2 : 하나를 사용하십시오<h2></h2> 그리고 하나

. 자막을 넣으십시오

매체, 제목을 사용하십시오<h3></h3> . 이것은 시각적으로 실현 가능하지만 자막은 화면 리더 사용자가 무시할 수 있습니다.

해결책 3 : 사용<hgroup></hgroup> 요소. 저자는 사용하려고했습니다<hgroup></hgroup> 제목과 자막을 포장하고 CSS를 통해 시각적 순서를 제어하십시오. 그러나 저자는이 접근법이 스크린 리더 사용자에게 충분히 친숙하지 않을 수 있다고 지적합니다.

해결책 4 : 단일 사용<h2></h2> 및 사용<strong></strong> 자막을 표시하십시오. 이것은 CSS에 의해 의미 적으로 더 간결하고 제어됩니다<strong></strong> , 스타일은 시각적 구별을 달성합니다. 저자는 서브 헤드와 대형 타이틀 사이의 콜론과 같은 구두점 마크를 사용하여 더 의미 적으로 일관성을 달성 할 것을 권장합니다.

해결책 5 : ARIA 역할 role="doc-subtitle" 사용하십시오. 저자는 자막을 나타 내기 위해 ARIA 역할 role="doc-subtitle" 소개합니다. 브라우저는 전반적으로 다양한 정도 에서이 역할을 지원하지만 실행 가능한 솔루션입니다.

마지막으로 저자는 또한 사용과 같은 몇 가지 권장되는 관행에 대해 논의했습니다.<label></label> 이러한 방법이 접근성 및 컨텐츠 찾기 가능성에 영향을 미치기 때문에 시각 효과를 달성하기위한 요소 또는 의사 요소.

이 기사는 다양한 방법의 장점과 단점을 요약하고 있으며, 가장 적절한 솔루션은 실제 상황에 따라 의미와 접근성 우선 순위에 따라 선택되어야 함을 시사합니다. 저자는 HTML 요소를 선택할 때 시각 효과를 고려하지 않고 의미론에 집중해야한다고 강조합니다.

위 내용은 소제목 및 제목을위한 HTML의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!