href 속성없이 <a> (앵커 태그)를 사용할 수 있습니까?

Twitter Bootstrap을 사용하여 사이트를 구축 해 왔으며 많은 기능은 <a>Javascript를 실행하더라도을 감싸는 것에 달려 있습니다. href="#"Bootstrap의 설명서에서 권장 하는 전술에 문제가 있었 으므로 다른 해결책을 찾으려고했습니다.

그러나 href속성을 모두 제거하려고 했습니다. 나는을 사용 <a class='bunch of classes' data-whatever='data'>하고 Javascript가 나머지를 처리하도록했습니다. 그리고 작동합니다.

그러나 내가 이것을해서는 안된다는 말이 있습니다. 권리? 기술적 <a>으로 무언가에 대한 링크라고 생각되지만 이것이 왜 문제 인지 는 확실하지 않습니다 . 아니면?

<a>nchor 요소 또는 일부 콘텐츠에서 단순히 앵커입니다. 원래 HTML 사양에서는 명명 된 앵커 ( <a name="foo">) 및 연결된 앵커 ( <a href="#foo">)에 허용되었습니다 .

조각 식별자가 [id]속성 을 지정하는 데 사용되기 때문에 명명 된 앵커 형식은 덜 일반적으로 사용됩니다 (역 호환성을 위해 여전히 [name]속성을 지정할 수 있음 ). 없는 요소 속성은 여전히 유효합니다 .<a>[href]

의미 및 스타일과 관련하여 <a>요소가 속성 :link이 없으면 링크 ( ) 가 아닙니다 [href]. 이것의 부작용은 기본적으로 탭이없는 <a>요소 [href]는 탭 순서에 있지 않다는 것입니다.

실제 질문은 <a>요소 자체 만의 적절한 표현 인지 여부 <button>입니다. 의미 수준에서 a link와 a 사이에는 뚜렷한 차이 가 button있습니다.

버튼은 클릭하면 동작이 발생하는 것입니다.

링크는 현재 문서에서 탐색을 변경하는 버튼입니다. 발생하는 탐색은 조각 식별자 ( #foo) 의 경우 문서 내에서 이동하거나 URL ( /bar) 의 경우 새 문서로 이동할 수 있습니다.

링크는 특수한 유형의 버튼이므로 대체 기능을 수행하기 위해 작업을 재정의하는 경우가 많습니다. 의미 적으로 정확하지는 않지만 앵커를 버튼으로 계속 사용하는 것은 일관성 관점에서 괜찮습니다.

<a>요소 (또는 <span>, 또는 <div>)를 버튼 으로 사용하는 의미 및 액세스 가능성에 대해 우려하는 경우 다음 속성을 추가해야합니다.

<a role="button" tabindex="0" ...>...</a>

버튼의 역할은 특정 요소가 기본이되는 요소가 있었다 무엇이든 의미에 대한 재정의와 같은 버튼으로 처리되고 있음을 사용자에게 알려줍니다.

for <span>및 <div>elements 의 경우 이벤트에 대한 JavaScript 키 리스너를 추가 Space하거나 Enter트리거 할 수 있습니다 click. <a href>및 <button>요소는 기본적으로이 작업을 수행하지만, 비 버튼 요소하지 않습니다. 때로는 click트리거를 다른 키 에 바인딩하는 것이 더 합리적 입니다. 예를 들어, 웹앱의 "도움말"버튼이에 바인딩 될 수 있습니다 F1.

나는 당신이 당신의 대답을 찾을 수 있다고 생각합니다 : href 속성이없는 앵커 태그는 안전합니까?

또한 href로 링크 작업을 원하지 않으면 다음과 같이 사용할 수 있습니다.

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

예,href 속성 없이 앵커 태그를 사용하는 것이 유효 합니다.

a요소에 href속성 이없는 경우 요소는 요소의 내용만으로 구성되어 있고 관련이있는 경우 링크가 배치 된 위치에 대한 자리 표시자를 나타냅니다.

예, class다른 속성을 사용할 수 있습니다 . 하지만 당신은 사용할 수 없습니다 target, download, rel, hreflang,와type .

는 target, download, rel, hreflang, 및 typeHREF 특성이 존재하지 않는 경우, 속성은 생략한다.

" 해야합니까? "부분에 대해서는 첫 번째 인용을 참조하십시오. " 관련된 경우 링크가 배치 된 위치 " 그래서 나는 " 자바 스크립트가없는 경우이 태그를 링크로 사용 하시겠습니까? "라고 . 대답이 '예'이면 ' 그렇지<a> 않으면'없이 사용해야 합니다 href. 그렇지 않다면, 나는 여전히 엣지 시맨틱보다 생산성이 더 중요하기 때문에 여전히 그것을 사용할 것입니다.

또한, 당신은해야 조심 다른위한 행동 과 스타일 (예를 들어 어떤 밑줄, 아니 포인터 커서가 아니라:link ).

출처 : W3C HTML5 권장 사항

유효합니다. 예를 들어,이를 사용하여 모달 (또는 이와 유사한 속성 data-toggle및 응답)을 표시 할 수 있습니다 data-target.

다음과 같은 것 :

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

여기에서는 글꼴이 a아닌 아이콘을 사용하여 button모달을 표시하기 위해 a 대신 태그 로 사용하는 것이 좋습니다 . 또한 설정 role="button"하면 포인터가 동작 유형으로 변경됩니다. 없이 하나 href또는 role="button"커서 포인터가 변경되지 않습니다.