단어를 강조 표시하기 위해 HTML 페이지에서 비표준 태그를 사용해야합니까?

특정 사용자 정의 목적으로 HTML 페이지에서 비표준 태그를 사용하는 것이 좋은 습관인지 합법적인지 알고 싶습니다.

예를 들면 다음과 같습니다.

Lorem ipsum의 dolor는 amet, conditetur adipiscing elit에 앉습니다. Nullam consequat, felis는 amet suscipit laoreet, nisi arcu accumsan arcu, vel pulvinar odio magna suscipit mi를 앉습니다.

"Condites adipiscing elit"을 중요하게 강조하고 "nisi arcu accumsan arcu"를 강조 표시합니다.

그래서 HTML에서 나는 다음을 넣을 것입니다 :

Lorem ipsum dolor는 amet, <중요한> conditesdidiscing elit </ 중요한>입니다. Nullam consequat, felis는 amet suscipit laoreet, <highlighted> nisi arcu accumsan arcu </ highlighted>, vel pulvinar odio magna suscipit mi를 앉아있다.

그리고 CSS에서 :

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

그러나 이들은 유효한 HTML 태그가 아니기 때문에 괜찮습니까?

아니요, 이것은 좋은 습관이 아닙니다. 이미 의미적이고 의미있는 태그 ( <em>이 경우 아마도) 를 사용하고 디자인 요구 사항을 달성하기 위해 CSS 스타일을 적용해야합니다.

귀하의 질문이 " 좋은 습관 인지 또는 법적인 것인지"물었습니다 .

첫째, 그것은 일종의 합법적입니다 -적어도 견딜 수 있습니다. 브라우저는 항상 이해하지 못하는 태그를 처리하도록 프로그래밍되어 있습니다. 이 HTML 코드 :

Some <b>bold</b> and some <slanted>italic</slanted>.

이것은 모든 단일 브라우저처럼 보입니다 :

일부 굵은 일부 기울임.

또한 대부분의 브라우저에서는 CSS에서 해당 요소의 스타일을 지정할 수 있습니다. 따라서 다음 CSS 정의를 추가하면

slanted { font-style: italic; }

대부분의 브라우저는 이제 다음과 같이 렌더링됩니다.

일부 굵은 일부 기울임 .

실제로 : 직접 사용해보십시오 . 또한, 이는 웹 개발자가 새로운 HTML5 태그를 이전 브라우저에서 올바르게 표시하기 위해 사용하는 트릭입니다.

그러나 그것은 완전한 그림이 아닙니다. 정답은 아니오 입니다. 좋은 습관이 아닙니다 . " 대부분의 브라우저" 라는 문구가 사용 된 것을 눈치 채 셨을 것 입니다. 불행히도 IE9 이전의 모든 Internet Explorer 버전에서는이 동작을 구현하지 못했습니다. IE8 및 이전 버전에서 위 코드는 여전히 다음과 같습니다.

일부 굵은 일부 기울임.

Dive Into HTML5 에는 문제에 대한 자세한 설명이 있으며 여기에서 해결 방법에 대한 세부 정보를 찾을 수 있습니다. 그러나이 해결 방법에는 JavaScript가 필요하므로 순수한 HTML 솔루션이 아니며 모든 시나리오에서 작동하지 않습니다.

짧은 대답 : 표준 HTML 요소 에만 충실하고 CSS에서 원하는대로 스타일을 지정하십시오.

<important/>특정 이유로 의미를 유지해야하는 경우 XSL을 사용하여 사용자 정의 태그를 유효한 HTML로 변환 할 수 있습니다. 이 주제에 대한 자세한 내용은 여기를 참조하십시오.

http://www.w3.org/Style/XSL/WhatIsXSL.html

http://www.4guysfromrolla.com/webtech/081300-2.shtml

http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

http://www.siteexperts.com/tips/xml/ts01/page5.asp

http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-using-xsl.html

여전히 <important/>최종 HTML 출력을 가질 수는 없지만 다음과 같이 자동으로 변환 할 수 있습니다 <span class="important"....

자신 만의 맞춤 태그를 만들지 말아야하는 이유를 설명하는 몇 가지 답변이 있습니다. 틀림없이, 그들은 모두 틀렸다.

WHATWG의 커스텀 태그 분석은 인식 가능하고 표준을 준수하며 (인식되지 않은 태그의 처리가 잘 정의되어 있기 때문에) 일반 div 스타일링보다 더 액세스 가능하다는 결론을 내립니다.

<x-accordion> </ x-accordion>은 모든 기계적 의미에서 <div class = "accordion"> </ div>보다 나쁘지 않습니다. "x-accordion"(또는 구성 요소 모델 지원)에 대한 정의가 없으면 둘 다 동일한 것을 의미하며 둘 다 동일한 방식으로 스타일을 지정할 수 있습니다. 하나는 HTMLUnknownElement이고 다른 하나는 HTMLDivElement이며 API 표면은 동일합니다.

OP 가하지 않은해야 할 일은 모든 사용자 정의 태그 앞에 규칙마다 'x-'를 붙이는 것입니다. 이는이 태그가 문서의 로컬 위치에 있음을 나타내며 향후 사양 요소와의 충돌을 피합니다.

일부 인기있는 브라우저는 표준 호환 방식으로 사용자 정의 태그를 처리하지 않기 때문에 사용하지 않아야한다고 주장합니다. 그러나 비 호환 브라우저의 동작은 자체 문제이며 비의 미적 마크 업을 작성하도록 강요하지 않는 것이 좋습니다. 이 문제에 대한 Javascript 및 비 Javascript 솔루션이 있으며, 특별히 지원하려는 비 호환 브라우저에만 적용해야합니다.

이미 언급 한 태그의 의미 적 의미를 명확하게 다루는 태그 (<mark>)에 태그가 있으면 기존 태그를 사용하는 것이 좋습니다.

사용자 정의 CSS를 사용 <em />하여 <strong />표시 방법을 변경할 수 있습니다 .

강력 함, 강한 중요성을 나타냅니다.

강조, 강조 강조를 나타냅니다.

실제로 는 강조 표시를 위해 새 태그를 사용할 필요 가 없습니다 . 기울임 꼴 을 기본 (CSS 이외) 렌더링으로 선호 하거나 굵게 표시 를 기본으로 사용 하려는 경우 em또는 i태그 를 사용할 수 있습니다 . 어떤 이유로, 당신은 정상, 즉 텍스트, 아니 강조, 사용과 같은 기본 렌더링을 선호하는 경우 . 각각의 경우, 속성을 사용하여이 사용법을 마크 업에 대한 다른 사용법과 구별 할 수 있습니다.strongbspanclass

HTML 사양 및 (HTML5) 초안은 이러한 요소의 의미와 관련하여 명확하지 않지만 큰 두통을 유발할 필요는 없습니다.

아니요, XHTML의 다른 네임 스페이스에서 새 태그를 추가 할 수 있지만 지정되지 않은 HTML 태그를 처리하지 않는 것이 좋습니다.

글쎄, 당신이 그것을 혐의로 체포되지 않을 것이 합법적입니다. 그러나 W3C의 암살자가 당신의 문 앞에 나타나면 놀라지 마십시오.

첫째, 다른 개발자들은 자신이 무엇을 의미하는지 알지 못합니다. 의 경우 <important>와 <highlight>같지만, 예를 들어,와 같은 것을 사용 <set>하면 수학 집합을 참조한다는 것을 알 수 있지만 코드를 읽는 다른 사람이 다른 것으로 잘못 판단 할 수 있습니다. 거기에 답을 제시하지 않으면 많은 혼란이 생길 ​​수 있습니다.

둘째, W3C가 <important>요소가 좋은 아이디어라고 결정 하지만 다음과 같이 긴급한 통지를 의미한다고 생각하면 어떻게 될까요?

<important>This site is going to be down for maintenance 2/29/2012.</important>

그럼 당신은 망했다. 브라우저와 동료 개발자는 다소 혼란 스러울 것입니다. 그들은 아마 당신이 미쳤을 때까지 정규 표현식으로 코드를 파싱하도록 강요 할 것입니다. 그리고 우리는 그것이 어떻게 나오는지 알고 있습니다.

셋째, IE <9를 사용하면 약간의 해킹없이 알 수없는 요소의 스타일을 지정할 수 없습니다. 큰 것은 아니지만 성가시다.

마지막으로,이 경우에, <important>그리고 <highlight>이미 존재! <strong>그리고 <mark>당신이 찾고있는 것입니다. HTML5 사양 에 따르면

강한 요소는 내용에 대한 중요성을 나타냅니다.

과

마크 요소는 참조 목적으로 표시되거나 강조 표시된 하나의 문서에서 일련의 텍스트를 나타냅니다 ...

"참조 목적"으로 사용하지 않으면 <span>클래스가있는 것이 좋습니다.

http://www.w3.org/TR/html5/elements.html

이것은 개정판 1.5612입니다.

작성자는이 사양 또는 기타 해당 사양에서 허용하지 않는 요소, 속성 또는 속성 값을 사용해서는 안됩니다. 그렇게하면 나중에 언어를 확장하기가 훨씬 어려워집니다.

다른 사람들의 의견을 무시합니다.

다음 두 가지 중요한 이유로 좋은 습관이 아닙니다.

첫째, 어떤 시점에서 표준위원회가 <important>귀하의 사용을 방해 하는 태그를 포함하기로 결정할 수도 있습니다. 물론, 시간이 좀 걸릴 수 있습니다.하지만 나중에는 시간을 낭비 할 가능성이 있습니다.

둘째, (이것이 진짜 이유입니다.) 코드를 상속받은 프로그래머는 비표준 방식으로 끊임없이 "wtf"라고 말하면서 그 모든 것을 잡아 당기거나 또는 가능하다면 완전히 혼란스러워 할 것입니다 좌절하고 그만 두었습니다.

잘 지내세요. 당신은 결코 모른다, 당신은 언젠가 그들 중 하나를 구직하게 될지도 모른다.

아니요. HTML 태그를 만들 수 없습니다. 현재 모든 주요 브라우저에서이를 구현해야합니다. 현재 브라우저가 인식 할 수없는 태그를 발견하면 모든 태그를 무시하므로 브라우저에서 새 브라우저를 만들지 않는 한 태그는 의미가 없으며 심지어 브라우저에서만 작동합니다.

유스 케이스를 w3c에 제출하려고 시도 할 수는 있지만 어디에서나 얻을 수는 없을 것입니다.

아니요, 다른 모든 답변에서 제공하는 모든 이유로 좋은 습관이 아닙니다. 그 요점을 되풀이하는 대신, 나는 그 대답에서 보지 못한 옵션을 제시하고 싶습니다!

시맨틱 의미가 목표와 일치하는 기존 태그가없는 경우 data-*HTML 5 스펙에서 CSS와 새 속성 의 조합을 사용할 수 있습니다 . 물론 이것은 선택한 대부분의 태그에서 작동합니다.

예:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

이것은 완벽한 솔루션은 아니지만 data-*속성에 대해 의미 론적으로 정의 된 의미가 없기 때문에 적어도 data-type속성 의 의미를 알고있는 사람들에게 추가 정보를 제공 할 수 있습니다 .