href 속성없이 (앵커 태그) 를 사용할 수 있습니까?
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
, 및type
HREF 특성이 존재하지 않는 경우, 속성은 생략한다.
" 해야합니까? "부분에 대해서는 첫 번째 인용을 참조하십시오. " 관련된 경우 링크가 배치 된 위치 " " 자바 스크립트가없는 경우이 태그를 링크로 사용 하시겠습니까? "라고 묻습니다 . 대답이 '예'이면 ' 그렇지<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"
커서 포인터가 변경되지 않습니다.
참고 URL : https://stackoverflow.com/questions/10510191/valid-to-use-a-anchor-tag-without-href-attribute
'IT story' 카테고리의 다른 글
void 반환과 작업 반환의 차이점은 무엇입니까? (0) | 2020.07.14 |
---|---|
Android에서 뷰를 표시하지 않고 비트 맵으로 변환 하시겠습니까? (0) | 2020.07.14 |
핸들 바를 통한 변수 전달 (0) | 2020.07.14 |
SQL Server에 날짜 시간을 삽입하는 SQL 쿼리 (0) | 2020.07.14 |
reduce ()를 사용하는 유용한 코드? (0) | 2020.07.14 |