HTML5에서 자신 만의 HTML 태그를 만드는 방법이 있습니까? 다음과 같은 것을 만들고 싶다. <menu>

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

<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>