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

StackOverflow https://stackoverflow.com/questions/209428

  •  03-07-2019
  •  | 
  •  

문제

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- 접두사 속성). 편집 : 사용자 정의 속성 사용에 대한 더 나은 예가있을 것입니다. 예를 들어, 표준 속성에 아날로그가없는 사용자 정의 응용 프로그램 (예 : 클래스 이름 또는 ID로 표현할 수없는 것을 기반으로 이벤트 핸들러에 대한 사용자 정의)이 사용하는 데이터.

다른 팁

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

사용자 정의 속성은 항상 유효한 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에 직렬화하고 페이지의 헤더 섹션에서 뱉어냅니다).

Well in this case, the optimal solution is 

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

and using title attribute.

Sometimes I break the spec if I really need it. But rarely, and only for good reason.

EDIT: Not sure why the -1, but I was pointing out that sometimes you think you need to break spec, when you don't.

Why not declaring the popup_title attribute in a custom DTD ? This solves the problem with validation. I do this with every non-standard elements, attributes and values and thank this validation shows me only real problems with my code. This makes also any browser errors less possible with such HTML.

You could nest hidden input elements INSIDE the anchor element

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

Then you can easily pull the data out by

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

My solution in the end was to hide additional data in the id tag separated by some sort of delimiter (one underscore is a space, two is the end of that arg), the second arg there is an id:

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

Ugly, and it assumes you're not already using the id tag for something else, but it is compliant across every browser.

My personal feeling in your example is that the span route is more appropriate, as it meets the standards of the XHTML specification. However, i can see an argment for custom attributes, but I think they add a level of confusion that isn't needed.

I've been racking my brain over this as well. I like the readability of non-standard attributes, but I don't like that it will break standard. The hidden span example is compliant, but it is not very readable. What about this:

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

Here the code is very readable, because of JSON's key/value pair notation. You can tell that this is meta data that belongs link just by looking at it. The only flaw I can see beside hijacking the "rel" attribute is that this would get messy for complex objects. I really like that idea of "data-" prefixed attributes mentioned above. Do any current browsers support this?

Here is something else to think about. How much impact does not compliant code have on SEO?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top