앵커 링크에 alt 태그를 사용하는 것이 맞습니까?


124

앵커 링크에 alt 태그를 사용하는 것이 맞습니까?

<a href="#" class="test" alt="Something" src="sfasfs" ></a>

답변:


130

이러한 사항은 공식 사양을 보면 가장 잘 대답 할 수 있습니다.

  1. 사양으로 이동 : https://www.w3.org/TR/html5/

  2. " aelement" 검색 : https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

  3. a요소에 대해 허용 된 모든 속성을 나열하는 "콘텐츠 속성"을 확인하십시오 .

    • 전역 속성
    • href
    • target
    • download
    • rel
    • hreflang
    • type
  4. 링크 된 "글로벌 속성"을 확인하십시오. https://www.w3.org/TR/html5/dom.html#global-attributes

보시다시피 alt속성은 a요소에서 허용되지 않습니다 .
또한 src속성도 허용되지 않음을 알 수 있습니다.

HTML 을 확인 하면 이와 같은 오류가보고됩니다.


참고 위 대한 것을 HTML5 이며, 2014 W3C의 HTML 표준 . 2016 년에 HTML 5.1 은 다음 HTML 표준 이되었습니다 . 허용 된 속성 찾기는 동일한 방식으로 작동합니다. 당신은 것을 볼 수 있습니다 a요소는 HTML 5.1에서 다른 속성을 가질 수 있습니다 rev.

W3C의 HTML 현재 상태 에서 모든 HTML 사양 (최신 표준 포함)을 찾을 수 있습니다 .


2
나는 보이지 않는 title의 속성 a글로벌 속성이 잘 같은 사용하는 것입니다 title에 속성을 a하거나하지?
— Yousef Altaf 2015

1
@YousefAltaf : 어느 페이지에서 보십니까? 링크 된 글로벌 속성 은를 나열합니다 title.
— unor

글로벌 속성 아래에 나열되어 있지만 사용 여부에 따라 페이지 품질에 영향을 줍니까?
— Yousef Altaf 2015

@YousefAltaf : 다른 질문입니다. 여기서 논의하지 않는 것이 좋습니다. 정의를 참조하십시오 . 여전히 질문이있는 경우 별도의 질문을 작성하십시오 (그러나 아직 질문하지 않은 경우 더 나은 검색).
— unor

4
"HTML 속성을 찾는 방법"으로 북마크 된 답변. 감사.
— Codebling

59

앵커의 경우 제목을 대신 사용해야합니다. alt는 a의 유효한 속성이 아닙니다. 참조 http://w3schools.com/tags/tag_a.asp를


@FabioPoloni 감사, 나는 모든 사람이 페이지 :-)에 링크 울부 짖는 소리를 찾을 수있을 것으로 기대했다가
— tomis

나는 ;-) 사람이이 주제에 대해 많이 알고하지 않는 경우, 그는 그것을 찾을 것이라고 생각
— 파비오 Poloni에게

8
정보의이 조각은 W3 스쿨에서 올바른 될 일이 있지만, W3 스쿨 공식 아니고, 신뢰할 수 없습니다를 참조 w3fools.com
— 유카 K. 펠라

thx Guys ... 그 외에는 내게 필요한 것은 순전히 접근성 표준과 성능 오버 헤드를 무시하는 것입니다. 나는 spirte 이미지를 사용했으며 동시에 배경 이미지를 사용할 수없는 alt 속성을 부여하고 싶었습니다. 대신 도움이되는 해결 방법이 있습니다.
— user2067736 2013-02-13

1
"제목"은 더 이상 w3schools에 없습니다. : 그것은 글로벌 속성입니다하지만 당신은, 제목을 사용할 수 있습니다 w3.org/TR/html5/dom.html#global-attributes
— rosell.dk

28

"제목"은 브라우저에서 널리 구현됩니다. 시험:

<a href="#" title="hello">asf</a>

3
위의 10 분 답변 대신 답변이 표시되어야합니다. :하지만이 대답은 링크가 있어야 w3schools.com/tags/att_global_title.asp
— mikael1000

위의 내용이 질문에 답하지 않는다는 데 동의하지만 titleHTML5 사양에 따르면 (대부분의 브라우저에서 구현할지라도) 올바르지 않습니다.
— felwithe

6

아니요, alt속성 (태그가 아닌 속성)은 aHTML 사양이나 초안 의 요소에 허용되지 않습니다 . 그리고 어떤 브라우저에서도 의미가있는 것으로 인식되지 않는 것 같습니다.

사람들이 그것을 사용하려고하는 이유는 약간 미스테리이지만, 가능한 설명은 그들이 마우스 오버시 "툴팁"을 기대하면서 요소에 alt대한 속성 과 함께 아날로그로 그렇게하고 있다는 것 img입니다. 여기에는 두 가지 문제가 있습니다. 첫째, 각 요소에는 각 요소의 사양에 정의 된 자체 속성이 있습니다. 둘째, alt일부 고대 브라우저에서 속성 의 "툴팁"렌더링은 예상 할 수있는 것이 아니라 기이하거나 버그였습니다. alt속성과 이미지 자체가 제출되지 않은 경우에만 경우 어떤 이유에서든 사용자에게 제공 할 예정이다.

"도구 설명"을 만들려면 title대신 속성을 사용하거나 "CSS 도구 설명"에 Google을 사용하고 선호하는 CSS 기반 도구 설명을 사용합니다 (마우스 오버시 표시되는 숨겨진 "레이어"로 특성화 될 수 있음).


CSS 기반 도구 설명을 사용하여 프로그래밍 방식으로 만든 링크를 사용하려면 어떻게합니까?
— Salvador Valencia

6

alt 속성과 유사하게 설명 정보를 적용하려면 앵커 태그에 title 속성을 사용해야합니다. 제목 속성은 앵커 태그에서 유효하며 링크 된 페이지에 대한 정보를 제공하는 것 외에 다른 용도로 사용되지 않습니다.

W3C는 제목 속성의 값이 링크 된 문서의 제목 값과 일치해야한다고 권장하지만 필수는 아닙니다.

http://www.w3.org/MarkUp/1995-archive/Elements/A.html


또는 더 유용 할 수있는 ARIA 접근성 속성을 사용할 수 있습니다 aria-label(와 혼동하지 마십시오 aria-labeledby). aria-label이미지에 대해 alt 속성과 동일한 기능을 제공하지만 이미지가 아닌 요소에 대해 제공하며 스크린 리더에 대한 최적화 이후 몇 가지 최적화 측정을 포함합니다.

http://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_labels_for_objects


하지만 앵커 태그를 설명하려면 일반적으로 rel 또는 rev 태그를 사용하는 것이 적절하지만 특정 값으로 제한되므로 사람이 읽을 수있는 설명에 사용해서는 안됩니다.

Rel은 링크 된 페이지와 현재 페이지의 관계를 설명하는 역할을합니다. (예를 들어 링크 된 페이지가 논리적 시리즈의 다음 페이지라면 rel = next가됩니다)

rev 속성은 본질적으로 rel 속성의 반대 관계입니다. Rev는 현재 페이지와 링크 된 페이지의 관계를 설명합니다.

http://microformats.org/wiki/existing-rel-values 에서 유효한 값 목록을 찾을 수 있습니다 .


5

나는 제목을 사용했고 효과가 있었다!

제목 속성은 링크의 제목을 제공합니다. 한 가지 예외를 제외하고는 순전히 자문입니다. 값은 텍스트입니다. 제목 속성이 대체 스타일 시트 세트를 정의하는 스타일 시트 링크의 경우는 예외입니다.

<a class="navbar-brand" href="http://www.alberghierocastelnuovocilento.gov.it/sito/index.php" title="sito dell'Istituto Ancel Keys">A.K.</a>

1

태그 의 alt속성 사용이 유효하지 않다는 모든 답변을보고 놀랐습니다 . 이것은 절대적으로 잘못되었습니다.a

Html은 어떤 속성도 사용하는 것을 차단하지 않습니다.

<a your-custom-attribute="value">Any attribute can be used</a>

alt속성 을 사용하는 것이 의미 상 올바른지 묻는 경우a 다음과 같이 말할 것입니다.

아니. 이미지 설명을 설정하는 데 사용됩니다.<img alt="image description" /> .

그것은 속성으로 무엇을 할 것인지의 문제입니다. 예를 들면 다음과 같습니다.

a::after {
  content: attr(color); /* attr can be used as content */
  display: block;
  color: white;
  background-color: blue;
  background-color: attr(color); /* This won't work */
  display: none;
}
a:hover::after {
  display: block;
}
[hidden] {
  display: none;
}
<a href="#" color="red">Hover me!</a>
<a href="#" color="red" hidden>In some cases, it can be used to hide it!</a>

다시 말하지만, 사용자 정의 속성을 사용하는 것이 의미 상 올바른지 묻는다면 다음과 같이 말할 것입니다.

아니요 data-*. 의미 론적 용도로 속성을 사용합니다.


죄송합니다. 2013 년에 질문이 제기되었습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.