HTML 태그의 비표준 속성. 좋은 것? 나쁜 일? 당신의 생각?

HTML (또는 XHTML 만?)은 태그의 비표준 속성과 관련하여 상대적으로 엄격합니다. 사양의 일부가 아닌 경우 코드는 비준수 코드로 간주됩니다.

그러나 비표준 속성은 메타 데이터를 Javascript로 전달하는 데 상당히 유용 할 수 있습니다. 예를 들어 링크가 팝업을 표시한다고 가정하면 속성에 팝업 이름을 설정할 수 있습니다.

<a href="#null" class="popup" title="See the Popup!" 
   popup_title="Title for My Popup">click me</a>

또는 스팬과 같은 숨겨진 요소에 팝업 제목을 저장할 수 있습니다.

<style>
    .popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
    click me
    <span class="title">Title for My Popup</span>
</a>

그러나 나는 어느 것이 선호되는 방법인지에 대해 찢어졌습니다. 첫 번째 방법은 더 간결하며 검색 엔진과 스크린 리더를 많이 사용하지 않는 것 같습니다. 반대로 두 번째 옵션을 사용하면 많은 양의 데이터를 더 쉽게 저장할 수 있으므로 더 다양하게 사용할 수 있습니다. 또한 표준을 준수합니다.

이 커뮤니티의 생각이 궁금합니다. 이런 상황을 어떻게 처리합니까? 첫 번째 방법의 단순성이 잠재적 인 단점을 능가합니까 (있을 경우)?

저는 제안 된 HTML 5 솔루션 ( data-접두사가 붙은 속성) 의 열렬한 팬입니다 . 편집 : 사용자 지정 속성 사용에 대한 더 나은 예가있을 수 있다고 덧붙입니다. 예를 들어, 표준 속성에 아날로그가없는 사용자 지정 응용 프로그램에서 사용할 데이터 (예 : className 또는 id로 표현할 수없는 항목을 기반으로 한 이벤트 처리기에 대한 사용자 지정).

사용자 정의 속성은 클라이언트 측에 추가 데이터를 전달하는 편리한 방법을 제공합니다. Dojo Toolkit은이 작업을 정기적으로 수행하며 다음과 같이 지적되었습니다 ( Debunking Dojo Toolkit Myths ).

사용자 정의 속성은 항상 유효한 HTML이었으며 DTD에 대해 테스트 할 때 유효성을 검사하지 않습니다. [...] HTML 사양은 인식되지 않은 속성은 사용자 에이전트의 HTML 렌더링 엔진에서 무시해야한다고 명시하고 있으며 Dojo는 선택적으로이를 활용하여 개발 용이성을 향상시킵니다.

또 다른 옵션은 Javascript에서 다음과 같이 정의하는 것입니다.

<script type="text/javascript">
var link_titles = {link1: "Title 1", link2: "Title 2"};
</script>

그런 다음 링크에이 해시 테이블의 ID에 해당하는 ID가 있다고 가정하여 나중에 Javascript 코드에서 사용할 수 있습니다.

비표준 속성이나보기 흉한 숨겨진 스팬이라는 다른 두 가지 방법의 단점이 없습니다.

단점은 예제처럼 간단한 일에 약간의 과잉 일 수 있다는 것입니다. 그러나 전달할 데이터가 더 많은 더 복잡한 시나리오의 경우 좋은 선택입니다. 특히 데이터가 JSON으로 전달된다는 점을 고려하면 복잡한 객체를 쉽게 전달할 수 있습니다.

또한 데이터를 서식과 별도로 유지하므로 유지 관리에 도움이됩니다.

다음과 같은 것을 가질 수도 있습니다 (다른 방법으로는 실제로 할 수 없습니다).

var poi_types = {1: "City", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

<a id="poi-2" href="/poi/2/">Hatsune</a>

그리고 아마도 서버 측 프로그래밍 언어를 사용하기 때문에이 해시 테이블은 동적으로 생성하기가 쉽지 않습니다 (JSON으로 직렬화하고 페이지의 헤더 섹션에 뱉어 냄).

이 경우 최적의 솔루션은

<a href="#" alt="" title="Title of My Pop-up">click</a>

제목 속성을 사용합니다.

정말 필요한 경우 때때로 사양을 위반합니다. 그러나 드물게 좋은 이유가 있습니다.

편집 : 왜 -1인지 확실하지 않지만 때로는 사양을 깨뜨릴 필요가 있다고 생각하지만 그렇지 않을 때 지적했습니다.

커스텀 DTD에서 popup_title 속성을 선언하지 않는 이유는 무엇입니까? 이것은 검증 문제를 해결합니다. 모든 비표준 요소, 속성 및 값에 대해이 작업을 수행하고이 유효성 검사가 내 코드에 대한 실제 문제 만 보여 주어 감사합니다. 이것은 또한 그러한 HTML에서 브라우저 오류를 덜 가능하게합니다.

앵커 요소 안에 숨겨진 입력 요소를 중첩 할 수 있습니다.

<a id="anchor_id">
  <input type="hidden" class="articleid" value="5">
  Link text here
</a>

그런 다음 쉽게 데이터를 가져올 수 있습니다.

$('#anchor_id .articleid').val()

결국 내 해결책은 일종의 구분 기호로 구분 된 id 태그에 추가 데이터를 숨기는 것이 었습니다 (하나의 밑줄은 공백이고 두 개는 해당 인수의 끝입니다). 두 번째 인수에는 ID가 있습니다.

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a>

추악하고 이미 다른 것을 위해 id 태그를 사용하고 있지 않다고 가정하지만 모든 브라우저에서 호환됩니다.

귀하의 예에서 개인적인 느낌은 XHTML 사양의 표준을 충족하므로 스팬 경로가 더 적절하다는 것입니다. 그러나 사용자 정의 속성에 대한 인수를 볼 수 있지만 필요하지 않은 수준의 혼란을 추가한다고 생각합니다.

나는 이것에 대해서도 내 머리를 긁어 모으고있다. 나는 비표준 속성의 가독성을 좋아하지만 표준을 깨뜨리는 것을 좋아하지 않습니다. 숨겨진 스팬 예제는 규정을 준수하지만 읽기 어렵습니다. 이것에 대해 :

<a href="#" alt="" title="" rel="{popup_title:'Title of My Pop-up'}">click</a>

여기 코드는 JSON의 키 / 값 쌍 표기법으로 인해 매우 읽기 쉽습니다. 보기 만해도 이것이 링크에 속하는 메타 데이터임을 알 수 있습니다. "rel"속성을 가로채는 것 외에 내가 볼 수있는 유일한 결점은 이것이 복잡한 개체에 대해 지저분해질 것이라는 점입니다. 위에서 언급 한 "data-"접두어 속성에 대한 아이디어가 정말 마음에 듭니다. 현재 브라우저에서이를 지원합니까?

여기에 다른 생각이 있습니다. 규정을 준수하지 않는 코드는 SEO에 얼마나 많은 영향을 미칩니 까?