HTML5에서 자신 만의 HTML 태그를 만드는 방법이 있습니까?

나는 다음과 같은 것을 만들고 싶다.

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

HTML5로 할 수 있습니까? 나는 그것을 할 수 있다는 것을 안다.

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

그러나 그것은 훨씬 덜 읽기 쉽습니다 :(

HTML5는 아니지만 브라우저에서 맞춤 태그를 사용할 수 있습니다 ( 맞춤 요소가 유효한 HTML5인가요? 및 HTML5 사양 참조 ).

라는 사용자 정의 태그 요소를 사용한다고 가정 해 보겠습니다 <stack>. 수행해야 할 작업은 다음과 같습니다.

1 단계

CSS 스타일 시트에서 속성을 정규화합니다 (css 재설정을 생각해보세요)-예 :

 stack{display:block;margin:0;padding:0;border:0; ... }

2 단계

이전 버전의 Internet Explorer에서 작동하려면이 스크립트를 헤드에 추가해야합니다 (이전 버전의 IE에서 작동해야하는 경우 중요합니다!).

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

그런 다음 사용자 정의 태그를 자유롭게 사용할 수 있습니다.

<stack>Overflow</stack>

속성도 자유롭게 설정하십시오 ...

<stack id="st2" class="nice"> hello </stack>

이 답변에 대해 잘 모르겠습니다. 방금 읽은 것처럼 "사용자 정의 태그는 항상 HTML에서 허용되었습니다."

http://www.crockford.com/html/

여기서 요점은 HTML이 SGML을 기반으로한다는 것입니다. 문서 유형 및 스키마가있는 XML과 달리, 브라우저가 태그를 한두 개 알지 못하더라도 HTML은 유효하지 않습니다. <marquee>를 생각 해보세요. 이것은 공식 표준이 아닙니다. 그래서 그것을 사용하는 동안 당신의 HTML 페이지는 "공식적으로 비 승인"되었지만 페이지도 깨지지 않았습니다.

그 다음에는 Netscape에 특화된 <keygen>이 있는데, HTML4에서 잊혀져 다시 발견되어 이제 HTML5에 지정되었습니다. 또한 모든 HTML5 태그에서 허용되는 data-XyZzz = "..."와 같은 사용자 정의 태그 속성도 있습니다.

따라서 사용자 지정 지정되지 않은 전체 마크 업 샐러드를 직접 만들어서는 안되지만 HTML에 사용자 지정 태그를 사용하는 것이 정확히 금지 된 것은 아닙니다. 그러나 + xml Content-Type과 함께 보내거나 SVG 또는 MathML과 같은 다른 XML 네임 스페이스를 포함하지 않는 한 그렇습니다. 이는 SGML 제한 HTML에만 적용됩니다.

Michael이 의견에서 제안했듯이 원하는 작업은 가능하지만 명명법이 잘못되었습니다. "HTML 5에 태그를 추가"하는 것이 아니라 고유 한 태그로 새 XML 문서 유형을 만드는 것입니다.

지난 직장에서 일부 프로젝트를 위해이 작업을 수행했습니다. 몇 가지 실용적인 조언 :

1. "HTML 5에 추가"를 원한다고하면 서버 측에서 많은 작업을 수행하지 않고도 최신 브라우저에서 페이지가 올바르게 표시되기를 원한다는 것을 의미합니다. 이는 <? xml-stylesheet type = "text / xsl"href = "menu.xsl"?>과 같이 xml 파일 맨 위에 "스타일 시트 처리 지침"을 삽입하여 수행 할 수 있습니다. "menu.xsl"을 사용자 정의 태그를 HTML로 변환하기 위해 작성한 XSL 스타일 시트의 경로로 바꾸십시오.

2. 주의 사항 : 파일은 XML 헤더 <xml version = "1.0">이 포함 된 올바른 형식의 XML 문서 여야합니다. XML은 일치하지 않는 태그와 같은 것에 대해 HTML보다 까다 롭습니다. 또한 HTML과 달리 태그는 대소 문자를 구분합니다. 또한 웹 서버가 적절한 MIME 유형 "application / xml"을 사용하여 파일을 전송하고 있는지 확인해야합니다. 종종 웹 서버는 파일 확장자가 ".xml"인 경우이를 자동으로 수행하도록 구성되지만 확인합니다.

3. 큰주의 사항 : 마지막으로, 제가 설명했듯이 브라우저의 자동 XSL 변환을 사용하는 것은 디버깅 및 제어 권한이 많은 제한된 응용 프로그램에만 가장 적합합니다. 지난 직장에서 최대 수십 명만 액세스 할 수있는 간단한 인트라넷을 설정하는 데 성공적으로 사용했습니다. 모든 브라우저가 XSL을 지원하는 것은 아니며 완벽하게 호환되는 구현이없는 브라우저도 있습니다. 따라서 페이지를 "야생"으로 공개하려면 모든 페이지를 서버 측에서 HTML로 변환하는 것이 가장 좋습니다. 이는 명령 줄 도구 또는 많은 XML 편집기의 단추를 사용하여 수행 할 수 있습니다.

HTML로 자신의 태그 이름을 만드는 것은 불가능하거나 유효하지 않습니다. 이것이 바로 XML, SGML 및 기타 일반 마크 업 언어의 목적입니다.

당신이 아마도 원하는 것은

<div id="menu">
    <div id="lunch">
        <span class="dish">aaa</span>
        <span class="dish">bbb</span>
    </div>
    <div id="dinner">
        <span class="dish">ccc</span>
    </div>
</div>

또는 대신 <div/>과 <span/>같은 <ul/>및 <li/>.

모양과 기능을 제대로하려면 CSS와 자바 스크립트를 연결하면됩니다.

사용자 지정 요소에 두 단어로 된 태그 만 사용하는 의미가 있음을 이전 답변에 추가하고 싶습니다. 표준화해서는 안됩니다.

예를 들어, 태그를 사용하려는 <icon>당신이하지처럼 할 수 있기 때문에 <img>, 당신은 마음에 들지 <i>도 ...

글쎄, 당신이 유일한 사람이 아니라는 것을 명심하십시오. 아마도 미래에는 w3c 및 / 또는 브라우저가이 태그를 지정 / 구현할 것입니다.

현재 브라우저는이 태그에 대해 기본 스타일을 구현할 것이며 웹 사이트의 디자인이 깨질 수 있습니다.

그래서 나는 (이 예에 따라)을 사용하는 것이 좋습니다 <img-icon>.

사실 태그 <menu>는 잘 정의되어 있습니다. 즉, 그렇게 사용되지 않고 정의되어 있습니다. 다음 <menuitem>과 같이 작동하는 것을 포함해야합니다 <li>.

사용자 정의 태그는 최소한 "class = ..."대신 사용하는 한 Safari, Chrome, Opera 및 Firefox에서 사용할 수 있습니다.

CSS의 녹색 {색상 : 녹색} 작동

<green>This is some text.</green>

메타 데이터를 삽입하려면 HTML microdata를 사용해 볼 수 있지만 클래스 이름을 사용하는 것보다 훨씬 더 장황합니다.

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

앞서 설명한대로 XSL 스타일 시트를 작성하는 것 외에도 Firefox 또는 다른 본격적인 XML 브라우저 (예 : Internet Explorer가 아님)가 사용되는 것이 확실한 경우에는 다른 접근 방식이 있습니다. XSL 변환을 건너 뛰고 XML 형식을 직접 지정하는 방법을 브라우저에 알려주는 완전한 CSS 스타일 시트를 작성하십시오. 여기서 장점은 많은 사람들이 어렵고 직관적이지 않은 언어라고 생각하는 XSL을 배울 필요가 없다는 것입니다. 단점은 CSS가 블록 노드, 인라인 등을 포함하여 스타일을 완전히 지정해야한다는 것입니다. 일반적으로 CSS를 작성할 때 브라우저가 <em>을 "인식"한다고 가정 할 수 있습니다. 인라인 노드이지만 <dish>로 무엇을해야할지 알 수 없습니다.

마지막으로 이것을 시도한 지 몇 년이 지났지 만 IE (적어도 몇 버전 이전)는 CSS 스타일 시트를 XML 문서에 직접 적용하는 것을 거부했습니다.

HTML의 요점은 언어에 포함 된 태그가 합의 된 의미를 가지고 있다는 것입니다. 즉, 기본 스타일 지정, 링크를 클릭 할 수있게 만들거나 클릭 할 때 양식을 제출하는 등 전 세계 모든 사람이 사용하고 결정할 수 있습니다. <input type="submit"> .

당신과 같이 만들어진 태그는 인간에게는 좋지만 (우리는 영어를 배울 수 있고 따라서 당신의 태그가 무엇을 의미하는지 알거나 적어도 추측 할 수 있기 때문에) 기계에는 좋지 않습니다.

이것은 HTML 사양의 옵션이 아닙니다. :)

<div>요소와 클래스로 원하는 것을 할 수 있습니다. 정확히 무엇을 추구 하는지 잘 모르겠습니다.하지만 아니요, 자신 만의 태그를 만드는 것은 옵션이 아닙니다.

Nick이 말했듯이 사용자 정의 태그는 어떤 버전의 HTML에서도 지원되지 않습니다.

그러나 HTML에서 이러한 마크 업을 사용하면 오류가 발생하지 않습니다.

목록을 만들고 싶은 것 같습니다. 정렬되지 않은 목록 <ul>을 사용하여 rool 요소를 만들고 <li>아래 항목에 태그를 사용할 수 있습니다.

그것이 당신이 원하는 것이 아니라면, 당신이 원하는 것을 정확히 지정하십시오. 그러면 우리는 답을 찾을 수 있습니다.

HTML 5 데이터 속성을 통해 사용자 정의 속성을 추가 할 수 있습니다. 예 : HTML 5에 유효한 메시지입니다. 자세한 내용은 http://ejohn.org/blog/html-5-data-attributes/ 를 참조 하십시오.

Polymer 또는 X-tag를 사용하면 고유 한 html 태그를 만들 수 있습니다. 기본 브라우저의 "shadow DOM"을 기반으로합니다.

사용자 정의 CSS 스타일링을 수행하면 배경색을 빨간색으로 만드는 태그가 생성됩니다.

redback {background-color:red;}

 

<redback>This is red</redback>

경우에 따라 태그 이름을 직접 만드는 것이 제대로 작동하는 것처럼 보일 수 있습니다.
그러나 이것은 브라우저의 오류 처리 루틴 일뿐입니다. 문제는 브라우저마다 오류 처리 루틴이 다르다는 것입니다!

이 예를 참조하십시오.
첫 번째 줄이 만들어 낸 요소를 포함 what하고 ever, 그들은 서로 다른 브라우저에서 다르게 취급받을. 텍스트는 IE11 및 Edge에서 빨간색으로 표시되지만 다른 브라우저에서는 검은 색으로 표시됩니다.
비교를 위해 두 번째 줄은 유효한 HTML 요소 만 포함한다는 점을 제외하면 비슷하므로 모든 브라우저에서 동일하게 보입니다.

body {color:black; background:white;} /* reset */

what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}

<p><what></what> <ever>test</ever></p>

<p><code></code> <span>test</span></p>

구성 요소의 또 다른 문제는 미래가 어떻게 될지 알 수 없다는 것입니다. 당신 같은 태그 이름으로 몇 년 전에 웹 사이트를 만든 경우 picture, dialog, details, slot, template등을 기대하는 것은 스팬처럼 행동하는, 당신은 지금 문제가 있습니다!

이것을 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyExample</title>
  <style>
    bloodred {color: red;}
  </style>
</head>
<body>
  <bloodred>
    this is BLOODRED (not to scare you)
  </bloodred>
</body>
<script>
  var btn = document.createElement("BLOODRED")
</script>
</html>

사용자 정의 HTML 태그를 만들고 인스턴스화하는 방법에 대한 기사를 찾았습니다. 프로세스를 단순화하고 누구나 즉시 이해하고 활용할 수있는 용어로 세분화합니다.하지만 여기에 포함 된 코드 샘플이 모든 브라우저에서 유효한지 완전히 확신 할 수 없으므로주의하고 철저하게 테스트하십시오. 그럼에도 불구하고 시작하기위한 주제에 대한 훌륭한 소개입니다.

사용자 정의 요소 : HTML에서 새 요소 정의