<span> 대신 아이콘에 <i> 태그를 사용해야합니까? [닫은]

Facebook의 출처를 살펴본 결과 <i>태그를 사용하여 아이콘을 표시합니다.

또한 오늘 저는 트위터의 부트 스트랩을 조사했습니다. 또한 <i>태그를 사용 하여 아이콘을 표시합니다.

그러나,

로부터 HTML5 사양 :

I 요소는 대체 음성 또는 분위기로 텍스트 범위를 나타내거나 분류 학적 명칭, 기술 용어, 다른 언어의 관용구, 생각, 선박 이름 또는 기타와 같은 일반적인 문장과 상쇄됩니다. 전형적인 활자체 표현이 이탤릭체 인 산문.

<i>태그를 사용하여 아이콘을 표시 하는 이유는 무엇 입니까?

나쁜 습관이 아닙니까?

아니면 여기에 뭔가 빠졌습니까?

span아이콘을 표시 하는 데 사용 하고 있으며 지금까지는 효과가있는 것 같습니다.

최신 정보:

부트 스트랩 3은 이제 span아이콘을 사용 합니다. 공식 문서

<i>태그를 사용하여 아이콘을 표시 하는 이유는 무엇 입니까?

이 때문에:

• 짧은
• 나는 아이콘을 의미합니다 (HTML은 아니지만)

나쁜 습관이 아닙니까?

끔찍한 연습. 시맨틱보다 성능의 승리입니다.

나는 조금 늦게 여기에 뛰어 들고 있지만, 자신을 숙고 할 때이 페이지를 발견했다. 물론 페이스 북이나 트위터가 어떻게 그것을 정당화했는지는 모르겠지만, 여기에 가치있는 것에 대한 내 생각 과정이 있습니다.

결국, 나는이 관행이 의미가없는 것이 아니라고 결론을 내 렸습니다 (단어입니까?). 사실, "i는 아이콘입니다"라는 부족함과 좋은 연관성 외에도, 단순한 <img>태그가 실용적이지 않을 때 실제로 아이콘에 대한 가장 의미있는 선택이라고 생각합니다 .

1. 사용법은 사양과 일치합니다.

W3이 주로 염두에두고 있던 것은 아니지만 공식 사양 <i>은 아이콘을 쉽게 수용 할 수 있는 것 같습니다 . 결국, 답장 화살표 기호는 다른 방식으로 "답장"이라고 말합니다. 독자에게 생소 할 수있는 기술 용어를 나타내며 일반적으로 이탤릭체로 표시됩니다. ( "이것은 트위터에서 우리가 답장 화살표 라고 부릅니다 .") 또 다른 언어 인 상징적 언어의 용어입니다.

트위터가 화살표 기호 대신에 <i>shout out</i>또는 <i>[Japanese character for reply]</i>영어 페이지를 사용하는 경우 사양과 일치합니다. 그럼 왜 안돼 <i>[reply arrow]</i>? (내가 접근 할 수있는 것이 아니라 HTML 의미론을 엄격히 말하고 있습니다.)

내가 볼 수있는 한, 아이콘 사용법에 의해 명시 적으로 위반 된 사양의 유일한 부분은 "텍스트 범위"문구 (태그에 텍스트가 포함되지 않은 경우)입니다. 분명하다 <i>태그는 주로 텍스트를 의미하지만 태그의 전반적인 의도에 비해 아주 작은 세부 사항입니다. 이 태그의 중요한 질문은 포함하는 컨텐츠 형식이 아니라 해당 컨텐츠의 의미에 대한 것입니다.

"텍스트"와 "아이콘"사이의 줄이 웹 사이트에 거의 없을 수 있다고 생각할 때 특히 그렇습니다. 텍스트는 아이콘과 비슷하거나 (일본어 예제와 같이) 아이콘은 텍스트와 유사하거나 ( "제출"이라고 표시된 jpg 버튼 또는 캡션이있는 고양이 사진과 같이) 텍스트가 다음과 같이 대체되거나 향상 될 수 있습니다. CSS를 통한 이미지. 텍스트, 이미지-누가 신경 쓰나요? 모든 내용입니다. 장애가있는 사람, 장애가있는 브라우저, 검색 엔진 스파이더 및 다양한 종류의 기타 컴퓨터가 모두 그 의미를 이해할 수있는 한, 우리는 그 일을 해냈습니다.

따라서 스펙 작성자가이를 명확하게하기 위해 생각하거나 선택하지 않았다는 사실은 우리의 손이 태그의 정신과 일치하고 의미있는 일을하는 것을 묶어서는 안됩니다. <a>태그는 원래 다른 곳에서 사용을 할 수 있지만, 지금은 라이트 박스를 팝업 수도 예정되었다. 대박 이지요? 사양을 따라 잡기 전에 클릭시 라이트 박스를 팝업하는 방법을 알아 낸 사람은 현재 정의와 완전히 일치하지 않더라도 <a>태그가 아닌 태그를 사용해야합니다. <span>여전히 태그의 정신과 일치합니다 ( "여기를 클릭하면 문제가 발생합니다"). 와 같은 거래 <i>- 당신이 그 안에 넣어 일의 어떤 유형, 그러나 창조적으로 당신이 그것을 사용,

2. <i>태그 는 아이콘 요소에 의미 적 의미를 추가합니다 .

아이콘 클래스 자체를 수행하는 대체 옵션은 <span>입니다. 물론 의미 상 의미가 없습니다. 기계가 <span>무엇을 포함하는지 물으면 기계가 말합니다. "저는 몰라요. 무엇이든 될 수 있습니다." 그러나 <i>태그는 "저는 평소와 다른 방식으로 말하거나 익숙하지 않은 용어를 포함하고 있습니다."라고 말합니다. "아이콘 포함"과 동일하지는 않지만 아이콘보다 훨씬 더 가깝 <span>습니다.

3. 결국에는 일반적인 사용법이 적합합니다.

위의 것 외에도 기계 판독기 (검색 엔진, 스크린 리더 등)가 Facebook, Twitter 및 기타 웹 사이트 <i>가 아이콘 태그를 사용한다는 것을 언제든지 고려할 수 있다는 점을 고려할 가치가 있습니다 . 필요한 수단을 통해 코드에서 의미를 추출하는 것만 큼 스펙에 신경 쓰지 않습니다. 그래서 그들은 일반적인 사용법에 대한이 지식을 사용하여 단순히 "여기에 아이콘이있을 수 있습니다"라는 것을 기록하거나 의미에 대한 힌트를 얻기 위해 CSS를 살펴 보거나 누가 무엇을 알고 있는지와 같은 고급 작업을 수행 할 수 있습니다. 따라서 <i>웹 사이트 에서 for 아이콘 을 사용하도록 선택 하면 사양보다 더 많은 의미를 제공 할 수 있습니다.

또한이 사용법이 널리 퍼지면 향후 사양에 포함될 것입니다. 그럼 당신은 대체 당신의 코드를 통해 갈 것 <span>으로들 <i>의 '! 따라서 사양의 방향 인 것, 특히 현재 사양과 명확하게 충돌하지 않는 경우에 대해 이해하는 것이 좋습니다. 일반적인 사용법은 다른 방식보다 언어 규칙을 지시하는 경향이 있습니다. 당신이 충분히 나이가 들었다면, "웹 사이트"가 그 단어가 새로운 것이었을 때의 공식적인 철자 였다는 것을 기억하십니까? 사전은 공간이 있어야하고 웹은 대문자 여야한다고 주장했습니다. 그 의미 론적 이유가있었습니다. 그러나 일반적인 사용법은 "어쨌든 어리석은 일입니다. 더 간결하고보기 좋기 때문에 '웹 사이트'를 사용하고 있습니다." 그리고 오래지 않아

4. 계속해서 사용하겠습니다.

그래서, <i>우리는 쉽게 연관 "내가" "아이콘"으로, 때문에 인간에 더 많은 의미를 제공하기 때문에 사양의 기계에 의미를 더 제공 하고 그것은 단지 하나의 문자가 길다. 승리! 그리고 <i>태그 안에 또는 태그 바로 옆에 동등한 텍스트를 포함 시키면 (트위터처럼), 화면 판독기는 응답 할 위치를 이해하고, CSS가로드되지 않으면 링크를 사용할 수 있으며, 인간 판독기는 시력과 알맞은 브라우저에는 예쁜 아이콘이 표시됩니다. 이 모든 것을 염두에두고 단점이 보이지 않습니다.

쿠엔틴의 대답은 분명히 i 태그를 사용하여 아이콘을 정의해서는 안됩니다.

그러나 홀리는 그 span자체로는 의미가 없으며 태그 i대신 에 찬성 투표했다 span.

img시맨틱하고 alt태그 가 포함 된 것으로 사용하도록 제안한 사람은 거의 없습니다 . 그러나 img비어있는 경우에도 src서버에 요청을 보내 므로 사용하지 않아야 합니다. 여기를 읽으십시오

올바른 방법은

<span class="icon-fb" role="img" aria-label="facebook"></span>

이렇게 하면 alt태그 가없는 문제가 해결 span되고 시각 장애가있는 사용자가 액세스 할 수 있습니다. 의미적이고 태그를 오용하지 않습니다 (해킹).

내 추측 : 트위터는 레거시 브라우저를 지원해야한다는 것을 알기 때문에 그렇지 않으면 :before/를 사용합니다.:after pseudo-elements를 .

레거시 브라우저는 내가 언급 한 의사 요소를 지원하지 않으므로 아이콘에 실제 HTML 요소를 사용해야하며 아이콘에는 '독점적'태그가 없으므로 그냥 <i> 모든 브라우저는 지원합니다. 그 태그.

그들은 분명히 <span>당신처럼 (완전히 괜찮은 것처럼)을 사용할 수 있었지만 아마도 위에서 언급 한 이유와 Quentin이 언급 한 이유 때문에 Bootstrap이<i> 태그를 .

스타일링을 위해 여분의 마크 업을 사용하는 것은 나쁜 습관입니다. 이것이 의사 요소입니다. 가 발명되어 콘텐츠와 스타일을 분리 .하지만 레거시 브라우저를 지원해야하는 경우가 종종 있습니다. 소지품.

추신. 아이콘이 'i'로 시작 하고 <i>태그 가 있다는 사실 은 우연의 일치입니다.

나는 다른 사람들의 대답에 완전히 다른 접근법을 취합니다. 특히 표준 HTML 어휘 태그 정의와 관련하여 표준과 규칙이 깨질 수 있다고 말하면서 내 솔루션의 접두사를 주장하고 논쟁을 제기합니다.

자체 목적이있는 사용자 정의 요소를 작성하는 것을 막을 수있는 것은 없습니다.

최신 브라우저와 IE 6+ (w / w)도 다음과 같은 기능을 지원할 수 있습니다.

<icon class="plus">

또는

<icon-add>

태그를 정규화해야합니다.

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

IE9 또는 이전 버전을 지원해야하는 경우 shim을 사용하십시오 (아래 게시물 참조).

이 StackOverflow 게시물을 확인하십시오.

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

더 나아가서 Google의 Angular 지시문과 새로운 Polymer 프로젝트는 맞춤 HTML 태그의 개념을 사용합니다.

나는 Joomla 템플릿을 최근에 작업 <i>하고 있었고 태그를 사용하고 있기 때문에 W3C에 실패한 템플릿을 계속 사용했기 때문에 이것이 매우 나쁘다고 생각 했습니다. 원래 사용은 무언가를 기울임 꼴로 사용 했기 때문에 더 이상 CSS를 통해 이루어졌습니다 더 이상 HTML이 아닙니다.

템플릿을 보았을 때 모든 <i>태그를 다음 과 같이 변경했기 때문에 실제로 나쁜 연습 을합니다.<span style="font-style:italic"> 대신 대신 한 다음 전체 템플릿이 왜 이상하게 보 였는지 궁금해 .

이것이 <i>이런 식으로 태그 를 사용하는 것이 나쁜 생각 인 주된 이유입니다. 나중에 누가 작업을 볼 것인지 알지 못하고 실제로하려고하는 것은 텍스트를 표시하지 않고 텍스트를 기울임 꼴로한다고 가정합니다. 상. 방금 웹 사이트에 아이콘을 넣고 다음 코드로 수행했습니다.

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

그런 식으로 나는 한 클래스에 모든 아이콘을 가지고 있으므로 모든 변경 사항이 모든 아이콘에 영향을 미칩니다 (예 : 더 크거나 작게 원하거나 둥근 테두리 등). alt 텍스트는 화면 판독기에 사람에게 무엇을 말할 수있는 기회를 제공합니다 아이콘은 "이탤릭체로 된 텍스트, 이탤릭체 끝"(스크린 리더가 화면을 읽는 방법을 정확히 알지 못하지만 그와 비슷한 것 같음)을 얻지 못하고 제목은 사용자에게 마우스를 놓을 수있는 기회를 제공합니다. 이미지를 파악할 수없는 경우 아이콘이 무엇인지 알려주는 툴팁을 얻습니다. 사용하는 것보다 훨씬 좋으며 <i>W3C 표준을 통과합니다.

또한 링크 <a>태그 안에 절대 위치가 지정된 아이콘을 배치하려고 할 때 유용하다는 것을 알았습니다 .

<img>태그 에 대해 먼저 생각 했지만 링크 내의 해당 태그의 기본 스타일에는 일반적으로 테두리 스타일 및 / 또는 그림자 효과가 있습니다. 또한 <img>"src"속성을 정의하지 않고 태그 를 사용하는 것이 좋지만 배경 이미지 스타일 시트 선언을 사용하여 이미지가 고스트 및 드래그되지 않습니다.

이 시점 에서 <span>or 와 같은 태그를 생각하고 있습니다.이 <i>경우 <i>이러한 유형의 아이콘만큼 의미가 있습니다.

대체로 직관적이라는 것의 이점은이 태그가 아이콘으로 작동하도록 최소한의 스타일 시트 조정이 필요하다는 것입니다.