맞춤 요소가 유효한 HTML5입니까? 같이 HTML5에서 맞춤

다음과 같이 HTML5에서 맞춤 태그가 유효한지 여부에 대한 확실한 답변을 찾을 수 없습니다.

<greeting>Hello!</greeting>

나는 어느 쪽이든 사양에서 아무것도 발견하지 못했다.

http://dev.w3.org/html5/spec/single-page.html

그리고 커스텀 태그는 W3C 유효성 검사기를 사용하여 유효성을 검사하지 않는 것 같습니다.

답변

사용자 정의 요소 사양은 크롬과 오페라에서 사용할 수있는, 그리고 제공되고 다른 브라우저 . 공식적인 방식으로 사용자 정의 요소를 등록하는 수단을 제공합니다.

사용자 정의 요소는 작성자가 정의 할 수있는 새로운 유형의 DOM 요소입니다. 상태 비 저장 및 임시 인 데코레이터 와 달리 사용자 정의 요소는 상태를 캡슐화하고 스크립트 인터페이스를 제공 할 수 있습니다.

사용자 지정 요소는 템플릿, HTML 가져 오기 및 Shadow DOM과 함께 Web Components 라는 더 큰 W3 사양의 일부입니다 .

웹 구성 요소를 사용하면 웹 응용 프로그램 작성자는 CSS만으로는 불가능한 수준의 시각적 풍부함과 상호 작용 성을 갖춘 위젯을 정의 할 수 있으며 오늘날 스크립트 라이브러리로는 구성 및 재사용이 용이하지 않습니다.

그러나이 훌륭한 기사 에서 맞춤 요소 v1에 대한 Google 개발자 기사 는 다음과 같습니다.

맞춤 요소의 이름은 대시 ( -)를 포함해야합니다 . 그래서 <x-tags>,<my-element> 그리고 <my-awesome-app>동안 모든 유효한 이름은이다 <tabs>와 <foo_bar>아니다. 이 요구 사항은 HTML 구문 분석기가 사용자 정의 요소를 일반 요소와 구별 할 수 있도록하기위한 것입니다. 또한 새로운 태그가 HTML에 추가 될 때 호환성을 보장합니다.

일부 자료

답변

가능하고 허용됩니다.

사용자 에이전트는 이해하지 못하는 요소와 속성을 의미 상 중립으로 취급해야합니다. DOM (DOM 프로세서의 경우)에 그대로두고 CSS (CSS 프로세서의 경우)에 따라 스타일을 지정하지만 의미는 유추하지 않습니다.

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

그러나 대화 형 기능을 추가하려면 IE의 7과 8을 수용 할 수 있도록 문서를 유효하지 않지만 여전히 완벽하게 작동시켜야합니다.

http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (내 블로그)을 참조하십시오.

답변

NB 아래의 답변은 2012 년에 쓰여졌을 때 정확했습니다. 그 이후로 상황이 조금 이동했습니다. HTML 스펙은 이제 두 가지 유형의 사용자 정의 요소 인 “자율 사용자 정의 요소”와 “사용자 정의 내장 요소”를 정의합니다. 전자는 문구 내용이 필요한 곳이면 어디든 갈 수 있습니다. 이는 신체 내부의 대부분의 장소이지만, 예를 들어 ul 또는 ol 요소의 하위 요소 또는 td, th 또는 caption 요소 이외의 테이블 요소에있는 것은 아닙니다. 후자는 확장하는 요소가 어디를 가든 갈 수 있습니다.

이는 실제로 요소의 컨텐츠 모델이 누적 된 결과입니다.

예를 들어 루트 요소는 요소 여야합니다 html.

html소자만을 포함 할 수있다 몸체 요소 뒤에 헤드 소자.

body요소 만 포함 할 수 있습니다 유량 콘텐츠 플로우는 콘텐츠 요소로서 정의된다 : a, abbr, 주소, 지역 (지도 요소의 후손 인 경우), 기사, 옆으로, 오디오, b, bdi, bdo, 블록 인용, br, 버튼, 캔버스, 인용, 코드, 명령, 데이터 목록, 델, 세부 사항 , dfn, div dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, 입력, ins, kbd, keygen, 레이블,지도, 마크, 수학, 메뉴, 미터, 탐색, noscript, 개체, ol, 출력, p, pre, 진행, q, 루비, s, samp, 스크립트, 섹션, 선택, 작은, 범위, 강한, 스타일 ( 범위가 지정된 속성이있는 경우), sub, sup, svg, table, textarea, time,u, ul, var, video, wbr 및 Text

등등.

컨텐츠 모델은 “사용자 정의 요소 / 태그에 필요한 요소를 원하는 요소에 넣을 수 있습니다”라고 말하지 않습니다.

답변

기본 사용자 정의 요소 및 속성

다음과 같은 경우 사용자 정의 요소 및 속성이 HTML에서 유효합니다.

  • 요소 이름은 소문자로 시작하고 x-
  • 속성 이름은 소문자로 시작하고 data-

예를 들어, <x-foo data-bar="gaz"/>또는<br data-bar="gaz"/> .

요소에 대한 일반적인 규칙은 x-foo;x-vendor-feature추천합니다.

개발자가 요소를 등록하는 데 필요한 모든 힘을 필요로하는 경우는 드물기 때문에 대부분의 경우를 처리합니다. 구문도 적절하고 안정적입니다. 보다 자세한 설명은 다음과 같습니다.

고급 사용자 정의 요소 및 속성

2014 년 현재, 사용자 정의 요소 및 속성을 등록하는 새롭고 개선 된 방법이 있습니다. IE 9 또는 Chrome / Firefox 20과 같은 이전 브라우저에서는 작동하지 않습니다. 그러나 표준 HTMLElement인터페이스 를 사용하고 충돌을 방지 x-*하며 data-*이름이 아닌 이름을 사용하고 브라우저가 존중할 사용자 정의 동작 및 구문을 정의 할 수 있습니다 . 아래 링크에 설명 된 것처럼 멋진 JavaScript가 필요합니다.

HTML5 Rocks-HTML
WebComponents.org 에서 새 요소 정의 -사용자 정의 요소 소개 W3C-
웹 구성 요소 : 사용자 정의 요소

기본 구문의 유효성에 대하여

data-*맞춤 속성 이름에 사용 하는 것은 한동안 완벽하게 유효했으며 이전 버전의 HTML에서도 작동합니다.

W3C-HTML5 : 확장 성

사용자 지정 (등록되지 않은) 요소 이름과 관련하여 W3C는 해당 요소 이름에 대해 강력히 권장하고 부적합한 것으로 간주합니다. 그러나 브라우저는이를 지원해야하며 x-*식별자는 향후 HTML 사양과 충돌하지 않습니다.x-vendor-feature 충돌하지 않으며 식별자는 다른 개발자와 충돌하지 않습니다. 사용자 정의 DTD를 사용하여 까다로운 브라우저에서 작업 할 수 있습니다.

다음은 공식 문서에서 발췌 한 내용입니다.

“적용 가능한 사양은 새로운 문서 내용 (예 : foobar 요소) […]을 정의 할 수 있습니다. 해당하는 적합한 HTML5 문서의 구문과 의미가 적용 가능한 사양을 사용하여 변경되지 않으면 해당 문서는 적합한 HTML5로 유지됩니다. 문서.”

“사용자 에이전트는 이해하지 못하는 요소와 속성을 의미 적으로 중립적 인 것으로 취급해야합니다. DOM (DOM 프로세서의 경우)에 그대로두고 CSS (CSS 프로세서의 경우)에 따라 스타일을 지정하지만 그 의미는 유추하지 않아야합니다.”

“사용자 에이전트는 부적합한 문서를 원하는대로 자유롭게 처리 할 수 ​​없습니다.이 사양에 설명 된 처리 모델은 입력 문서의 적합성에 관계없이 구현에 적용됩니다.”

“이 사양에서 정의하지 않은 HTML 요소에는 HTMLUnknownElement 인터페이스를 사용해야합니다.”

W3C-HTML5 : 문서 작성
WhatWG-HTML 표준 : DOM 요소

답변

나는 “유효한”이라는 단어가이 문맥에서 두 가지 다른 의미를 가질 수 있음을 지적하고 싶습니다.

  1. 사용자 정의 태그가있는 HTML 문서를 유효한 HTML5로 간주해야합니까?
    이에 대한 대답은 분명히 “아니오”입니다. 스펙 은 어떤 컨텍스트에서 어떤 태그가 유효한지 정확하게 나열합니다. 그렇기 때문에 HTML 유효성 검사기는 사용자 정의 태그가 있거나 잘못된 위치에 표준 태그가있는 문서 (예 : 머리글의 “img”태그)를 허용하지 않습니다.

  2. 사용자 정의 태그가있는 HTML 문서가 브라우저에서 명확하게 정의 된 표준 방식으로 구문 분석되고 렌더링됩니까?
    아마도 놀랍게도 그 대답은 “예”입니다. 문서가 기술적으로 유효한 HTML5로 간주되지 않더라도 HTML5 사양 은 그들은 사용자 정의 태그를 볼 때 어떻게해야 정확히 브라우저 : 즉, 사용자 정의 태그는 현물 등의 역할을 <span>– 그것은 아무 의미에 의해 아무것도하지 않습니다 기본값이지만 HTML로 스타일을 지정할 수 있으며 javascript로 액세스 할 수 있습니다.

답변

커스텀 HTML 요소는 파서로 커스텀 요소를 선언하고 등록 할 수있게 해주는 W3 표준입니다. W3 Web Components Custom Elements spec . 또한 Microsoft는 X-Tag 라고하는 라이브러리 (이전 Mozilla 개발자가 작성)를 지원하므로 웹 구성 요소를보다 쉽게 ​​사용할 수 있습니다.

답변

최신 페이지를 반영하여 업데이트 된 답변을 제공합니다.

맞춤 태그는

1) 대시가 포함되어 있습니다. 

<my-element>

2) 그들은 XML이 내장되어 있습니다 

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

이것은 HTML5 doctype을 사용한다고 가정합니다. <!doctype html>

지금 의미가 간단한 제한을 감안하면 유지하기 위해 최선을 다하는 HTML 마크 업 같은 태그를 폐쇄 중지하십시오 (유효 <img>및<hr> 당신은 아마 필요가없는 XHTML의 문서 타입을 사용하지 않는 한, 그것은 바보 잘못된).

HTML5가 구문 분석 규칙을 명확하게 정의한다고 가정하면, 호환 브라우저는 엄격하게 유효하지 않더라도 태그를 처리 할 수 ​​있습니다.