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

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

닫았습니다. 이 질문은의견 기반의현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?이 게시물을 편집하여 사실과 인용문으로 답변할 수 있도록 질문을 업데이트하십시오.

6년 전에 문을 닫았어요

이 질문을 개선하다

Facebook의 HTML이전)은 모두 Facebook의 HTML(twitter Bootstrap HTML(v3 ")을 합니다.<i>아이콘을 표시하려면 태그를 지정합니다.

단, HTML5 사양에서는 다음과 같습니다.

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

은 왜 '우리'를 사용하고 거죠?<i>습관 요?쁜쁜습 관관?아면 제제 ?치 ??? ???

하고 .span아이콘 표시도 하고 지금까지도 효과가 있었던 것 같아요.

업데이트:

은 '3'을 사용합니다.span아이콘을 클릭합니다.공식 문서

'5'로 .i

은 왜 '우리'를 사용하고 거죠?<i>아이콘을 표시하는 태그

그 이유는 다음과 같습니다.

• 짧다
• i는 아이콘을 나타냅니다(HTML은 아니지만).

나쁜 관행 아닌가요?

끔찍한 연습이군.그것은 의미론에 대한 성능의 승리이다.

좀 늦게 들어왔는데 생각하다가 이 페이지를 발견했어요.물론 Facebook이나 Twitter가 어떻게 그것을 정당화했는지 모르지만, 여기 그것이 어떤 가치가 있는지에 대한 저만의 사고 과정이 있습니다.

결국, 나는 이 연습이 그렇게 의미 없는 것은 아니라고 결론지었다(단어인가?i is icon과 'i is for icon'이라는 'i is for icon'이라는 있는 합니다.<img>태그는 실용적이지 않습니다.

1. 용도는 사양과 일치합니다.

주로 둔 수도 , 가 보기에 인 것 같습니다.<i>아이콘을 쉽게 수용할 수 있을 것 같아요.답신 화살표 기호는 다른 방식으로 "답신"을 말하는 것입니다.독자들에게는 생소할 수 있는 전문용어를 이탤릭체로 표현하고 있습니다("트위터에서는 이것을 응답 화살표라고 부릅니다") 그리고 이것은 다른 언어에서 온 용어입니다. 기호 언어입니다.

가 화살표 기호 ""를 사용한<i>shout out</i> ★★★★★★★★★★★★★★★★★」<i>[Japanese character for reply]</i>을 사용하다 왜 안 돼요?<i>[reply arrow]</i>(여기서 말하는 것은 엄밀하게 HTML의 의미론이지 접근성이 아닙니다.)

아이콘 사용에 의해 명시적으로 위반되는 스펙의 부분은 (태그에 텍스트가 포함되지 않은 경우) "span of text" 문구뿐입니다.<i>태그는 주로 텍스트용이지만 태그의 전체적인 의도에 비하면 매우 작은 디테일입니다.이 태그의 중요한 질문은 태그에 포함된 콘텐츠 형식이 아니라 해당 콘텐츠의 의미가 무엇인지입니다.

특히 웹 사이트에서는 텍스트와 아이콘 사이의 선이 거의 존재하지 않을 수 있다는 점을 고려할 때 더욱 그렇습니다.텍스트는 (일본어 예시와 같이) 아이콘과 비슷하거나 ('Submit'이라고 표시된 jpg 버튼이나 캡션이 중첩된 고양이 사진처럼) 텍스트와 비슷하거나 CSS를 통해 이미지로 대체하거나 강화할 수 있습니다.텍스트, 이미지 - 누가 신경써요?다 만족해요.장애를 가진 사람, 장애를 가진 브라우저, 검색 엔진 거미, 그리고 다양한 종류의 기계 등 모두가 그 의미를 이해할 수 있는 한, 우리는 우리의 일을 해냈다.

따라서 스펙의 작성자가 이를 명확히 하기 위해 생각하지 않았다는 사실(또는 선택했다는 사실)이 이치에 맞고 태그의 정신에 부합하는 일을 하는 데 얽매여서는 안 됩니다.<a>태그는 원래 사용자를 다른 곳으로 데려가기 위한 것이었지만, 지금은 라이트박스가 뜨는 경우가 있습니다.★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★<a> ""가 아닌"a""<span>현재 정의와 완전히 일치하지 않더라도 태그의 정신에 가장 가깝고 여전히 일관성이 있기 때문입니다("여기를 클릭하면 어떤 일이 발생합니다.").★★★★★★★★와 같은 거래<i>으로 사용했든 용어나 용어의 일반적인 하고 있습니다. - 아, 사용했든 상관없습니다.

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

은 아이콘 클래스입니다.<span>물론 의미론적인 의미는 전혀 없습니다.이 「」를 했을 .<span>무엇이든 될 수 '무엇이든 될 수 있다.그...<i>'다는 '다'는 '다'그것은 이 들어있다'와같은 '아이콘이 들어있다'보다는 훨씬 더 .<span> 잡혔어!

3. 결국 일반적인 용법이 옳다.

그 사이트에서는, Facebook, Twitter, 그 외의 Web 사이트에서는, 「」, 「되고 있는 을, 언제라도 <i>아이콘을 태그합니다.그들은 어떤 수단을 써서라도 코드에서 의미를 추출하는 것에 신경을 쓰는 만큼 사양에 신경을 쓰지 않는다.따라서 이러한 일반적인 사용법을 사용하여 단순히 "여기에 아이콘이 있을 수 있습니다"라고 기록하거나 의미에 대한 힌트를 얻기 위해 CSS를 조사하는 등의 고급 작업을 수행할 수 있습니다.에 '나'나 '나'를 사용한다면<i>웹 사이트의 아이콘에 대해서는 사양보다 더 많은 의미를 부여할 수 있습니다.

또, 이 사용이 보급되면, 향후 사양에 포함될 가능성이 있습니다.그럼 코드를 다시 살펴보고<span>는 을 s<i>되지 않는 할 수 일반적인 용법은 언어 규칙을 그 반대보다 더 많이 지시하는 경향이 있다.만약 여러분이 충분히 나이가 들었다면, 새로운 단어가 생겼을 때 "웹 사이트"가 공식적인 철자였다는 것을 기억하나요?사전은 공간이 있어야 하며 웹은 대문자로 표시되어야 한다고 주장했다.거기에는 의미적인 이유가 있었다.하지만 일반적인 용법은 "아무튼, 그건 바보같은 짓이야. 얼마 않아 에서도 그 해 주었습니다.그리고 얼마 지나지 않아 사전은 공식적으로 그 철자가 맞다고 인정했다.

4. 그래서 계속 쓰고 있어요.

so,는,<i>'i'와 'icon'을 쉽게 연관지을 수 있고 한 글자밖에 되지 않기 때문에 기계에 더 많은 의미를 부여합니다.승리! 그리고 만약 당신이 동등한 텍스트를 반드시 안에 넣어야 합니다.<i>태그 또는 그 바로 옆(Twitter와 마찬가지로)에서 화면 리더는 어디에 회신해야 하는지 알 수 있습니다.링크는 CSS가 로드되지 않을 때 사용할 수 있으며 시력이 좋고 브라우저가 좋은 인간 리더는 예쁜 아이콘을 볼 수 있습니다.이 모든 것을 고려해 볼 때, 나는 부정적인 면을 보지 않는다.

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

홀리가 했습니다.span 를 던지다ispan붙이다

「 」를 사용하는 하는 사람은 .img 「」, 「」를 포함하고 있습니다.alt 단, '태그'도 안 요. 하만 、 리는 、img빈집이라도 src는 서버에 요구를 송신합니다.이쪽에서 읽다

내 생각에, 올바른 방법은,

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

하면 안 되는 됩니다.alt를 달다span시각장애인이 접근할 수 있도록 합니다.의미 있는 것으로, 태그의 오용(해킹)이 아닙니다.

나는 여기 있는 모든 사람들의 대답에 대해 전혀 다른 접근법을 취한다.내 해결책에 접두사를 붙이고, 표준과 규약은 특히 표준 HTML 어휘 태그 정의의 맥락에서 때때로 깨져야 한다는 것을 언급함으로써 주장하겠습니다.

목적에 맞는 커스텀 요소를 작성하는 것을 막을 수 있는 것은 아무것도 없습니다.

최신 브라우저 및 IE 6+(심 포함) 모두 다음과 같은 기능을 지원합니다.

<icon class="plus">

또는

<icon-add>

태그를 정규화하기만 하면 됩니다.

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

IE9 이하를 서포트할 필요가 있는 경우는, 심을 사용합니다(아래의 투고 참조).

다음 StackOverflow Post를 확인합니다.

HTML5에서 자체 html 태그를 생성할 수 있는 방법이 있습니까?

제 주장을 더 말씀드리자면, 구글의 Angular Directives와 새로운 폴리머 프로젝트 모두 커스텀 HTML 태그의 개념을 사용하고 있습니다.

추측 Twitter는 할 필요성을 에 그렇지 Twitter를 사용하게 됩니다.:before:after의사 처리

앞서 한 의사 하지 않기 요소를 에 HTML을 입니다. 아이콘에는 '배타적' 태그가 없기 때문에 그냥 사용되었습니다.<i>모든 브라우저가 해당 태그를 지원합니다.

은 분명히 '아예'라는 말을도 있어요.<span>(완전히 괜찮지만) 위에서 언급한 이유와 Quentin에 의해 언급된 이유 때문에 Bootstrap은 또한 Bootstrap을 사용하고 있습니다.<i>붙이다

스타일링에 추가 마크업을 사용하는 것은 좋지 않습니다.그 때문에, 컨텐츠와 스타일을 구별하기 위해서 의사 요소가 발명되었습니다.하지만 레거시 브라우저를 지원해야 한다는 것을 알게 되면, 때때로 이러한 작업을 수행해야 합니다.

추신. 아이콘은 'i'로 시작하고 아이콘은 'i'로 시작합니다.<i>태그는 완전히 우연의 일치입니다.

안 좋아 했습니다. 왜냐하면 최근에 Joomla 템플릿을 작업 중이었고 W3C에서 템플릿이 계속 실패했기 때문입니다.<i>이 태그는 원래 이탤릭체를 사용하는 것이었기 때문에 더 이상 사용되지 않습니다.HTML CSS 이이 이 。

을 에 매우 나쁜 이 되어 .<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>또는<i>- 이 경우<i>이런 종류의 아이콘만큼 말이 됩니다.

전체적으로 직감적인 것 외에 스타일 시트 조정을 최소한으로 해 아이콘으로 사용할 수 있는 것이 장점이라고 생각합니다.

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