빈 href가 유효합니까?

179

웹 개발자 중 하나가 다음 html을 드롭 다운 목록 스타일 지정을위한 자리 표시 자로 사용합니다.

<a href="" class="arrow"></a>

이것이 앵커 태그로 간주됩니까?

href 값이 없으므로 일부 링크 검사기 보고서에서 깨진 것으로 표시됩니다.

html href

— 매튜
소스

10

IE에서는 작동하지 않습니다! 그것은 IE에서 작동하지만 사양에 대해 완전히 다른 동작으로 작동합니다. 따라서 그것은 사양에 따라 유효하지만 실제로는 아닙니다 : (((

— ZhongYu

bayou.io가 말한 것을 확장하여 IE는 문서 위의 디렉토리에 링크합니다. stackoverflow.com/questions/7966791/…

— Nate

1

예, 이전 버전의 IE (7/8 등)에서 빈 href는 디렉토리 목록과 같은 나쁜 결과를 초래할 수 있습니다. 당신이 그것을 구글 경우 주제에 대한 많은 문서가 있습니다

— Ringo

예를 들면 다음과 같습니다 . gtmetrix.com/avoid-empty-src-or-href.html . 오래된 브라우저 만 신경 쓰지 마십시오. 현재 IE, Edge 및 웹킷 브라우저에 영향을 미칩니다.

— Ringo

60

이 질문에 이미 답변되어 있지만 ( tl; dr : 예, 빈 href값은 유효 함) 기존 답변 중 어느 것도 관련 사양을 참조하지 않습니다.

빈 문자열 은 URI 일 수 없습니다. 그러나 href속성은 URI를 값으로 사용할뿐만 아니라 URI 참조도 가져옵니다. 빈 문자열 은 URI 참조 일 수 있습니다.

HTML 4.01

HTML 4.01 은 RFC 2396을 사용하는데 , 4.2 절에 나와 있습니다. 동일한 문서 참조 (굵게 강조된 광산) :

URI를 포함하지 않는 URI 참조는 현재 문서에 대한 참조입니다. 즉, 문서 내의 빈 URI 참조는 해당 문서의 시작에 대한 참조로 해석되며 조각 식별자 만 포함하는 참조는 해당 문서의 식별 된 조각에 대한 참조입니다.

RFC 2396은 RFC 3986 (현재 IETF의 URI 표준 )에 의해 폐기되었으며 기본적으로 동일 합니다.

HTML5

HTML5 는 ( 공백으로 둘러싸인 유효한 URL → 유효한 URL ) W3C의 URL spec을 사용 합니다. 단종되었습니다. 대신 WHATWG의 URL 표준을 사용해야합니다 (마지막 섹션 참조).

HTML 5.1

HTML 5.1 은 ( 공백으로 둘러싸인 유효한 URL → 유효한 URL ) WHATWG의 URL 표준을 사용합니다 (다음 섹션 참조).

WHATWG HTML

WHATWG의 HTML 사용 ( 유효 URL이 잠재적으로 공백으로 둘러싸인 )의 정의 유효한 URL 문자열 에서 WHATWG의 URL 표준 그것이이 될 수 있음을 말한다, 상대 URL -와 - 단편 문자열 될 적어도해야, 상대 URL 문자열 , 경로 상대 스키마가없는 URL 문자열 일 수 있습니다. 경로 문자열 은 스키마 문자열로 시작하지 않는 경로 상대 URL 문자열: 이며 그 정의는 다음 과 같습니다 (굵게 강조 표시).

경로 기준 URL 문자열은 U + 002F (/)로 구분 된 0 개 이상의 URL 경로 세그먼트 문자열이어야하며 U + 002F (/)로 시작하지 않아야합니다.

— 또는
소스

184

유효합니다.

그러나 표준 관행은 href="#"때때로 사용 하는 것 href="javascript:;"입니다.

— 슬랙
소스

23

RFC 2396에 명시된 바와 같이 : URI를 포함하지 않는 URI 참조는 현재 문서에 대한 참조입니다. 즉, 문서 내의 빈 URI 참조는 해당 문서의 시작에 대한 참조로 해석됩니다.

— Oct

32

를 클릭 href="#"하면 IE에서 포커스가 페이지 상단으로 이동하므로 href="javascript:;"더 좋습니다.

— Deckard

32

href = "#"는 안티 패턴입니다. 브라우저 히스토리에 추가 항목을 추가하고 경우에 따라 브라우저를 맨 위로 스크롤하게하므로 href 속성을 사용하지 않으면 생략 할 수 있습니다. 기본적으로 ""로 설정되므로 방지하지 않으면 페이지를 다시로드하십시오.

— 토쉬

16

@tosh, 아니요, href 속성을 생략하면 <a> 요소가 링크로 스타일이 지정되지 않고 초점을 맞출 수 없으며 <a href = ""와 같은 링크를 만들지 않습니다. > 또는 <a href>는 수행합니다. 그것이 효과가 있다면 JSFiddle을 공유 할 수 있습니까?

— Gui Prá

6

@tosh, 우스운 게 뭔지 알아? HTML5 이후로 속성을 생략하면 분명히 작동합니다. w3.org/TR/html5/text-level-semantics.html#the-a-element (아래 답변을 제출해 주셔서 감사합니다) 아직 공급 업체가 구현 한 것이지만 여전히 후보 추천 일 뿐이므로 최종 표준으로 유지할지 또는 공급 업체가 그 이전을 준수하는지 여부를 판단하기가 어렵습니다.

— Gui Prá

115

다른 사람들이 말했듯이 유효합니다.

각 접근 방식에는 몇 가지 단점이 있습니다.

href="#" 브라우저 기록에 추가 항목을 추가합니다 (예 : 뒤로 단추를 놓는 경우 성가시다).

href="" 페이지를 새로 고침

href="javascript:;" 지저분하고 의미없는 것처럼 보이는 것 외에는 문제가없는 것 같습니다.

— UpTheCreek
소스

22

또 다른 흥미로운 것은 href = "// : 0"인데, 서버에 요청하거나 기록을 남기지 않습니다.

— diachedelic

2

// : 0은 일부 이미지를 Chrome에서로드하지 못하게합니다. Chrome이이를 취소 명령을 수신 한 것으로 해석합니다.

— David Grenier

5

href : "자바 스크립트 :;" 나는 모두 안드로이드 아이폰 OS webviews에서 물건 작품을 만드는 데 필요한 그냥 뭐이었다

— dumazy

2

IE는 문서 위의 디렉토리에 링크합니다 : stackoverflow.com/questions/7966791/…

— Nate

1

나는 이것을 테스트하지는 않았지만 href = "javascript :;" 인라인 자바 스크립트를 허용하지 않는 콘텐츠 보안 정책을 위반합니다. 이 정책을 사용하려면 대안 중 하나를 사용하십시오.

— Mark Good

60

href를 포함하지 않는 완전히 유효한 HTML 일 수 있지만 특히 onclick 핸들러에서는 고려해야 할 사항이 있습니다. tabindex 값을 설정하지 않으면 키보드로 초점을 맞출 수 없습니다. 또한 IE는 tabindex 설정 여부에 관계없이 href 속성이없는 앵커 요소가 초점을 맞출 수 없음으로 액세스 가능성 인터페이스를 통해보고하므로 Internet Explorer를 사용하여 화면 판독기 소프트웨어에 액세스 할 수 없습니다.

따라서 다음은 완전히 유효 할 수 있습니다.

<a class="arrow">Link content</a>

null 효과 href 속성을 명시 적으로 추가하는 것이 훨씬 좋습니다

<a href="javascript:void(0);" class="arrow">Link content</a>

모든 사용자를 완벽하게 지원하려면 CSS와 함께 클래스를 사용하여 이미지를 렌더링하는 경우 진행 상황에 대한 텍스트 설명을 제공하기 위해 title 속성과 같은 텍스트 내용도 포함해야합니다.

<a href="javascript:void(0);" class="arrow" title="Go to linked content">Link content</a>

— 새긴 금
소스

1

생략 href하면 접근성 인터페이스가 엉망이 될 것입니다.

— Daniel Sokolowski

1

또한 접근성 관점에서 href값을 상대 / 절대 경로 이외의 다른 값으로 설정 하면 화면 판독기 문제가 발생할 수 있다고 덧붙였습니다. 해시 / 파운드 기호는이 문제의 해결 방법으로 사용하지 마십시오. 스크린 리더는 (현재 VoiceOver가) 귀하의 링크를 단편 식별자 (현재 페이지의 다른 곳으로 링크)로 알리고 표준 관점에서도 유효합니다. w3.org/2001/tag/2011/01/HashInURI-20110115#NakedHash

— Michel Hébert

27

현재 HTML5 초안으로 href 속성을 완전히 생략 할 수도 있습니다.

요소에 href 속성이없는 경우, 요소는 관련이있는 경우 링크가 배치 된 위치에 대한 자리 표시자를 나타냅니다.

귀하의 질문에 대답하려면 : 그렇습니다.

— 하프 단
소스

6

예, 그러나 일부 브라우저 에서는 <a>요소가없는 href스타일이 거칠게 표시됩니다. 예를 들어, ": 호버"스타일은 Chrome (및 기타 이상한 것)에서 작동하지 않습니다.

— Alex

이 <a>없는 태그 는 링크가 아닌 다른 것을 href나타냅니다 (전통적으로 앵커). 또한 선택적 속성과 비어있을 수있는 속성간에 차이가 있습니다.

— Kobi

19

실제로, 당신은 그것을 비워 둘 수 있습니다 (W3 유효성 검사기는 불평하지 않습니다).

아이디어를 한 단계 더 발전 시키려면 = ""를 생략하십시오. 이것의 장점은 링크가 현재 페이지의 앵커로 취급되지 않는다는 것입니다.

<a href>sth</a>

— 뿌리
소스

그러나 : <a href></a>→ 명시적인 값이없는 속성 href. 이 특성은 IE7에 의해 삭제 될 수 있습니다.

— c24w

1

나도이 솔루션을 좋아한다. IE7 동작을 제외한 다른 단점을 알고 있습니까?

— rinat.io 2016 년

이것은 잘못된 구문입니다. 사양 에 따르면 "[빈 속성] 구문은 부울 속성에만 허용됩니다."

— Robert Siemer

9

W3의 유효성 검사기가 빈 href속성 에 대해 불평하지 않을 수 있지만 현재 HTML5 작업 초안 은 다음을 지정합니다.

href의 특성 a과 area요소가 유효한 URL 인 값이 있어야 잠재적으로 공간에 의해 둘러싸여있다.

유효한 URL이 을 준수하는 URL입니다 URL 표준 . 이제 URL 표준은 약간 혼란 스럽지만 URL이 빈 문자열 일 수는 없습니다.

... 빈 문자열은 유효한 URL 이 아닙니다 .

그러나 HTML5 실무 초안은 다음과 같은 내용으로 진행됩니다.

참고 : 에 속성 과 요소가 필요하지 않습니다 ; 해당 요소에 속성이 없으면 하이퍼 링크를 만들지 않습니다.hrefaareahref

즉, href속성을 모두 생략 할 수 있습니다 .

<a class="arrow"></a>

이러한 href적은 a요소에 여전히 키보드 상호 작용이 필요 하다는 의도라면 a를 할당하고 일반적인 클릭 / 키 다운 처리기 role와 tabindex함께 정상적인 경로를 따라야 합니다 .

<a class="arrow" role="button" tab-index="0"></a>

— 제임스 도넬리
소스

과연. 불행히도, 당신이 인용했듯이, href하이퍼 링크가 아닌 onclick키보드 사용자 는 기능을 키보드 사용자가 액세스 할 수 없게 만듭니다 .

— aij

7

주의 사항 :

내 경험상 href키보드 탐색은 속성을 무시하고 href가있을 때처럼 포커스를주지 않으므로 속성을 생략하면 접근성에 문제가 발생합니다. tabindex에 요소를 수동으로 포함시키는 것이 그 방법입니다.

— 제이슨
소스

3

그것은 유효하지만 UpTheCreek은 '각 접근 방식에는 몇 가지 단점이 있습니다.'

태그를 통해 ajax를 호출하는 경우 href = ""를 그대로두면 페이지가 다시로드되고 ajax 코드가 호출되지 않습니다 ...

이 생각을 공유하는 것이 좋을 것입니다.

— 레이 차이
소스

2

<a href="#" class="arrow">대신 해보십시오 . (날카로운 #문자에 유의하십시오 ).

— 엘프 바이트
소스