span과 label 태그 사이의 렌더링 차이는 무엇입니까?

Question

그래서 span 태그와 label 태그의 기능상의 차이점을 이해합니다 ... 그러나 태그 사이에 렌더링의 차이가 있으며 이것이 무엇인지 알 수없는 것처럼 보입니다. 누구라도 span과 label의 렌더링 차이를 알고 있습니까? 감사합니다.

Answer 1

기본 렌더링 스타일 (일부 브라우저에서는 레이블이 굵게 표시되기도 함)과는 달리 중요한 것은 양식 필드 (입력, 선택 등)와 연결된 레이블이 해당 필드의 LABEL입니다. 그러므로 그것은 "for"속성입니다. 그것 이외에는 사용해서는 안됩니다. 이는 화면 판독기가이 링크가 존재할 것으로 예상 할 때 액세스 가능성과 관련하여 특히 중요합니다.

스팬은 유사한 스타일을 적용하려는 텍스트 그룹입니다. 기본적으로 스팬에는 스타일이 적용되지 않습니다.

추 신 : Grayskull의 진노로 인해 레이블 탭을 사용하여 텍스트를 굵게 표시하거나 그와 비슷한 것으로 만들 수 있습니다. 나를 따라 반복 : "입력란 없음, 레이블 없음".

PPS : 죄송합니다. 다른 사람들의 마크 업과 관련하여 가장 큰 고민 거리 중 하나입니다.

Answer 2

IE, Firefox, Opera 또는 Chrome의 기본 스타일 시트와 렌더링 차이를 볼 수 없습니다. 브라우저가 다르게 렌더링 할 수도 있지만 상당한 차이는 없을 것입니다.

레이블의 주된 장점은 다른 양식 컨트롤 (봉쇄 또는 for 속성을 통해)과 연결할 수 있다는 것입니다. 이것은 접근성의 이점을 가질 수 있습니다. 주목할만한 것은 전형적인 그래픽 기반 브라우저에서 라벨을 클릭하여 관련 컨트롤을 집중시킬 수 있습니다. 체크 박스/라디오의 경우에는 맞 춥니 다. 그렇지 않으면 적중 횟수가 적기 때문에 편리합니다. 이것은 설정된 OS 양식 위젯 동작을 재현합니다.