href 속성이없는 앵커 태그는 안전합니까?


232

href속성 을 포함하지 않고 대신 JavaScript 클릭 이벤트 핸들러 를 사용하여 앵커 태그를 사용하는 것이 좋습니까? 따라서 href완전히 비워 두지 않아도됩니다 ( href="").


1
그래도 onclick 이벤트가 트리거됩니까? span / div 대신 앵커 태그를 사용하고 싶습니다. IE에서 CSS : hover를 지원하는 유일한 합리적인 태그이기 때문입니다
john

3
@Martin ANCHORS는 키보드를 통해 액세스하고 활성화 할 수 있습니다. 일반 SPAN 요소는 사용할 수 없습니다. 여기를보십시오 : jsfiddle.net/simevidas/4DTxv/2
Šime Vidas


2
HTML5에서 href 속성이없는 앵커는 자리 표시 자 하이퍼 링크입니다. dev.w3.org/html5/markup/a.html
Ignacio Lago

1
대신 버튼을 원하지 않습니까? 이것은 탭 등이 작동한다는 것을 의미하며 필요한 경우 링크처럼 보이도록 버튼 스타일을 지정할 수 있습니다. 틀림없이 나는 IE의 호버에 대해 모른다.
robbie_c

답변:


217

HTML5에서는 속성이 a없는 요소를 사용하는 href것이 유효합니다. "자리 표시 자 하이퍼 링크"로 간주됩니다.

예:

<a>previous</a>

w3c 앵커 태그 참조 페이지 ( https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element) 에서 "자리 표시 자 하이퍼 링크"를 찾으십시오 .

그리고 그것은 위키에서 여기에 언급되어 있습니다 : https://www.w3.org/wiki/Elements/a

자리 표시 자 링크는 앵커 요소를 사용하려고하지만 어디에서나 탐색하지 않는 경우를위한 것입니다. 탐색 메뉴 또는 이동 경로에서 현재 페이지를 표시하는 데 유용합니다. (이전의 접근법은 스타일을 지정하기 위해 "active"또는 "current"라는 클래스가있는 span 태그 또는 앵커 태그를 사용하고 탐색을 취소하기 위해 JavaScript를 사용하는 것이 었습니다.)

자리 표시 자 링크는 런타임시 JavaScript를 통해 링크의 대상을 동적으로 설정하려는 경우에도 유용합니다. href 속성의 값을 설정하면 앵커 태그를 클릭 할 수있게됩니다.

또한보십시오:


3
"자리 표시 자 링크"의 정의는 무엇입니까?
Gyum Fox

14
하지 않고 있다는 사실을 스타일이 자동으로 요소에 추가되지 않을 것이다. hrefcursor: pointer
Luke

38

괜찮지 만 동시에 일부 브라우저가 느려질 수 있습니다.

http://webdesignfan.com/yslow-tutorial-part-2-of-3-reducing-server-calls/

내 조언은 <a href="#"> </a> 사용입니다

JQuery를 사용하는 경우 다음도 사용하십시오.

.click(function(event){
    event.preventDefault();
    // Click code here...
});

7
해시 변경과 관련된 아약스 북마크를 사용하고 있기 때문에 href = "#"을 사용할 수 없습니다. 어떻게해야합니까?
john

5
javascript를 사용하는 대신 : void (0); href 내에서 javascript를 사용합니다.; 쓰는 것이 더 짧습니다.
Ally

16
실제로 빈 href 속성을 지정하는 경우에만 성능 저하가 적용됩니다. 이 질문은 href 속성이 전혀 없다고 말합니다.
Pete B

18
실제로 기사에 따르면 잠재적 성능 저하는 빈 src 속성 에만 적용됩니다 . 빈 href 속성에 대해서는 성능 측면에서 아무 말도하지 않습니다.
bergie3000 2016 년

1
안녕하세요 @ Gunnar, 링크가 사라진 것 같습니다. 클레임에 대한 다른 참조가 있습니까?
user31782

25

짧은 대답 : 아니요.

긴 대답 :

먼저 href 속성이 없으면 링크가 아닙니다. 링크가 아닌 경우 HTML 5 기능을 사용하지 않는 한 키보드 (또는 호흡 스위치 또는 포인터 기반 입력 장치가 아닌 다양한 기타 입력 장치)에 액세스 할 수 없습니다tabindex 없습니다 (일반적으로 지원되지 않는 ). 컨트롤에 키보드 액세스 권한이없는 것이 매우 드 rare니다.

둘째. JavaScript가 실행되지 않는 경우 (서버에서로드 속도가 느리거나 인터넷 연결이 끊어 졌기 때문에 (예 : 움직이는 기차의 모바일 신호), JS가 꺼져있는 등) 대안이 있어야합니다.

거슬리지 않는 JS점진적인 향상 을 활용하십시오 .


문제는 jQuery의 "click"메소드로 클릭 이벤트를 첨부 할 수있는 것을 원한다는 것입니다. 마우스가 마우스를 올려 놓을 때 링크처럼 강조 표시되고 밑줄이 그어져 있습니다. href가없는 앵커 태그 외에 CSS없이이를 달성 할 수있는 다른 무엇이 있습니까? (즉, jQuery를 통한 직접 클릭 기능 할당의 단순성을 유지하면서 기본 상호 작용을 수동으로 추가하지 않고있는 그대로).
Triynko

@Triynko — 링크를 사용하지만 올바르게 수행하십시오. 답의 마지막 줄을보십시오.
Quentin

5
'a'태그의 Tabindex는 HTML4 이후부터 유효합니다 (최소) w3schools.com/tags/att_global_tabindex.asp
technoTarek

@technoTarek — 예, 그러나 href필수입니다 (tabindex가 의미가없는 명명 된 앵커가 아닌 경우). 의 사용 tabindex탭 순서에 unfocusable 요소를 추가 할 수는 HTML 5의 새로운 혁신
쿠엔틴

4
이것은 단순히 잘못입니다. 당시 HTML에 대한 이전 사양을 참조했는지 여부는 말할 수 없지만 HTML5 사양에 따르면 속성이 a없는 태그 를 갖는 것이 실제로 유효 href합니다.
마이클

23

이전 버전과의 호환성을 위해 href를 사용해야하는 경우

<a href="javascript:void(0)">link</a>

속성을 사용하지 않으려는 경우 # 대신


1
함수를 제외한 모든 링크에서 동작하는 <a> 태그가 필요했습니다. 이것은 나를 위해 속임수를했다.
Jad S

13

태그는 href 속성없이 사용하는 것이 좋습니다. 여기의 많은 답변과 달리 실제로 href가 없을 때 앵커를 만드는 표준 이유가 있습니다. 의미 상 "a"는 앵커 또는 링크를 의미합니다. 그 의미를 따르는 것을 위해 그것을 사용하면 괜찮습니다.

href가없는 태그의 표준 사용은 명명 된 링크를 작성하는 것입니다. 이렇게하면 name = blah로 앵커를 사용할 수 있으며 나중에 href = # blah로 앵커를 만들어 현재 페이지의 명명 된 섹션에 연결할 수 있습니다. 그러나 동일한 방식으로 ID를 사용할 수도 있기 때문에이 기능은 더 이상 사용되지 않습니다. 예를 들어 id = header와 함께 헤더 태그를 사용할 수 있으며 나중에 href = # header를 가리키는 앵커를 가질 수 있습니다.

그러나 요점은 name 속성 사용을 제안하지 않는 것입니다. href가 필요하지 않은 이유를 하나만 제공하므로 왜 필요하지 않은지 추론하십시오.


2
나는 질문이 무엇을 시도했고 다른 답변이 해결하고 있는지 , 대화 형 요소 (예 : 링크) 로 사용되는 요소 의 href속성 을 생략해도 안전한지 여부를 생각합니다 . 언급했듯이 속성이 없으면 링크가 아니라 앵커 일뿐입니다. 이것은 완전히 다른 것입니다. <a>href
BoltClock

1
그러나 <a> 태그는 이러한 사용 사례에서 여전히 유효합니다.
monokrome

9

<a>href가없는 접근성 관점 에서는 탭을 사용할 수 없으며 모든 링크는 탭을 사용할 수 있어야합니다. href가없는 경우 tabindex = '0 "을 추가하십시오.


1
또는 리디렉션 대신 인 페이지 작업을 수행하려는 경우 버튼을 사용하십시오.
SimonDever

8

<a>멀티 레벨 메뉴를 사용하는 경우 "HREF"없는 태그는 편리 할 수 있으며 다음 단계를 확장 할 필요가 있지만 메뉴 레이블은 활성 링크되고 싶지 않아. 그런 식으로 사용하는 데 아무런 문제가 없었습니다.


1
키보드로 해당 메뉴에 액세스하려고 했습니까?
aij

방금 IE에서 일부 링크를 가리키고 하나가 href가없는 앵커 인 경우 아래 URL이있는 작은 팝업이 그대로 유지되어 사라지지 않고 이전 URL을 표시합니다. 앵커는 클릭 할 수 없으므로 큰 문제는 아니지만 대신 div를 사용하기에 충분합니다.
Andrew

1

일부 브라우저에서는 href 속성을 제공하지 않으면 문제가 발생합니다. 다음과 같이 코드를 작성하는 것이 좋습니다.

<a href="#" onclick="yourcode();return false;">Link</a>

yourcode ()를 자신의 함수 나 논리로 바꿀 수 있지만 return false를 추가해야합니다. 끝에 진술.


Backbone.Router와 함께 Backbone.js를 사용하고 있으며 #색인 페이지가 있습니다. 내 탐색 표시 줄 링크 중 일부의 #경우 a href="#"자체 경로를 사용 하는 경우 발생 하는 경로를 트리거하고 싶지 않습니다 . 를 사용 <a href="#" onclick="return false;"하면 라우트가 중지되지만 click 이벤트는 여전히 jHandler 및 Backbone.Radio를 통해 연결된 DOM 이벤트를 사용하는 핸들러로 버블 링됩니다. 감사합니다 @ shashwat13 :)
David Williamson
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.