아이콘 대신 태그를

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

---

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를 통한 이미지. 텍스트, 이미지-누가 신경 쓰나요? 모든 내용입니다. 장애가있는 사람, 장애가있는 브라우저, 검색 엔진 스파이더 및 다양한 종류의 기타 컴퓨터가 모두 그 의미를 이해할 수있는 한, 우리는 우리의 일을 해냈습니다.

So the fact that the writers of the spec didn't think (or choose) to clarify this shouldn't tie our hands from doing what makes sense and is consistent with the spirit of the tag. The <a> tag was originally intended to take the user somewhere else, but now it might pop up a lightbox. Big whoop, right? If someone had figured out how to pop up a lightbox on click before the spec caught up, they still should have used the <a> tag, not a <span>, even if it wasn't entirely consistent with the current definition - because it came the closest and was still consistent with the spirit of the tag ("something will happen when you click here"). Same deal with <i> - whatever type of thing you put inside it, or however creatively you use it, it expresses the general idea of an alternate or set-apart term.

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

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

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

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

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

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

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

---

Quentin의 답변에 따르면 i태그를 사용하여 아이콘을 정의해서는 안됩니다.

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

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

올바른 방법은

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

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

---

내 추측 : 트위터는 레거시 브라우저를 지원해야하기 때문에 :before/ :afterpseudo-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 Directives와 새로운 Polymer 프로젝트는 모두 맞춤 HTML 태그의 개념을 사용합니다.

---

나는 Joomla 템플릿을 최근에 작업 <i>하고 있었고 태그를 사용하고 있기 때문에 W3C에 실패한 템플릿을 계속 사용했기 때문에 이것이 매우 나쁘다고 생각했습니다. 더 이상 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>이러한 유형의 아이콘만큼 의미가 있습니다.

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

참고 URL : https://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span