앵커 내부 스팬 또는 스팬 내부 앵커 또는 중요하지 않습니까?

109

중첩 span과 a태그를 원합니다 . 내가해야합니까

안에 넣어<a>
<a>안에 넣어
상관 없어?

html css semantic-markup

— 살만 A
소스

110

3-상관 없습니다.

하지만 태그 내용의 일부 에만 사용 하는 <a>경우 에만 내부를 사용하는 경향이 있습니다.

<a href="#">some <span class="red">text</span></a>

대신 :

<a href="#"><span class="red">some text</span></a>

분명히 다음과 같습니다.

<a href="#" class="red">some text</a>

— 존 해들리
소스

1

최근에 text-overflow : ellipsis 및 overflow : hidden에서 공백 문제를 발견했습니다.이 문제는 탐색 버튼에 인라인 블록 요소를 추가하여 해결할 수 있습니다. 나는 <a> Text </a>로 끝났습니다. 그래서 나는 당신이 정말로 필요할 때 이것을하는 것이 괜찮다고 생각합니다 (또는 희망;)).

— CunningFatalist

중요하기 때문에 2 번을 선택하겠습니다. 앵커는 요소를 포함하는 것이 아니라 앵커를위한 것이어야합니다 (모범 사례). 클릭 가능한 타일을 만들고 앵커가 타일 구성 요소의 상위 요소이고 구성 요소 내부에 이미지 및 더 많은 이미지에 대한 링크가있는 상황을 상상해보십시오. Google 크롤러는 미쳐 가고 결국에는 사이트에 좋지 않습니다.

— Imam Bux

33

내부 <a>또는 내부 에 중첩하는 것이 (적어도 HTML 4.01 및 XHTML 1.0 표준에 의해) 완벽하게 유효 <a>합니다 .

자신에게 증명하기 위해 W3C MarkUp Validation Service 에서 언제든지 확인할 수 있습니다.

확인을 시도했습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
       <p>
         <a href="http://www.google.com/"><span>Google</span></a>
       </p>
    </body>
  </html>

또한 위와 동일하지만 <a>내부가

즉

<span><a href="http://www.google.com">Google</a></span>

HTML 4.01과 XHTML 1.0 doctype을 모두 사용했으며 둘 다 성공적으로 유효성 검사를 통과했습니다!

주의해야 할 것은 올바른 순서로 태그를 닫는 것뿐입니다. 당신이 시작한다면 다음 <a>, 당신은 가까이 있는지 확인 <a>을 닫기 전에 먼저 태그를 그 반대의 경우도 마찬가지입니다.

— CraigTP
소스

20

상관 없습니다. 둘 다 서로 내부에 허용됩니다.

— 그렉
소스

그러나 <a>는 블록 수준이고 은 인라인 수준 요소이며 블록 수준 요소는 인라인 요소 내부에 올 수 없습니다. w3c 유효성 검사에 있었던 것 같습니다

— Jitendra Vyas

26

아니요, 둘 다 인라인입니다

— Greg

16

마크 업하려는 항목에 따라 다릅니다.

당신이 범위 안에 링크를 원하는 경우, 넣어 <a>내부 .
당신이 링크에서 뭔가를 마크 업하려면, 넣어 로<a>

— 니트
소스

16

SPAN은 GENERIC 인라인 컨테이너입니다. 그것은 여부를 중요하지 않습니다 a내부에 span또는 span안에 a모두 인라인 요소로. 논리적으로 옳다고 생각되는 것을 자유롭게하십시오.

— 살만 A
소스

2

스팬이 무엇인지에 따라 다릅니다. 링크라는 사실이 아니라 링크의 텍스트를 참조하는 경우 # 1을 선택하십시오. 범위가 링크 전체를 참조하는 경우 # 2를 선택합니다. 스팬이 무엇을 나타내는 지 설명하지 않는 한, 그 이상의 답은 없습니다. 둘 다 인라인 요소이며 구문 상 임의의 순서로 중첩 될 수 있습니다.

— Sykora
소스

맞습니다. 둘 다 인라인 요소입니다.

— Chris

2

예를 들어 정렬 아이콘 글꼴을 사용하는 것이 중요 할 수 있습니다. 나는 이것을 방금 가지고 있었다.

<span class="fa fa-print fa-3x"><a href="some_link"></a></span>

일반적으로 나는 A 안에 스팬을 넣을 것이지만 스타일링은 라운드를 바꿀 때까지 효과가 없었습니다.

— user1368737
소스

1

개인적으로 웹 개발자로서 저는 한 섹션에 배경을 적용하는 것과 같이 링크 텍스트의 섹션을 강조 표시하려는 경우에만 앵커 태그 내에 스팬을 넣었습니다.

— Xopa
소스

0

둘 다 작동하지만 개인적으로 옵션 2를 선호하므로 범위가 링크 "주변"에 있습니다.

— Oldskool
소스

0

의미 론적으로는 단일 요소에 대한 컨테이너가 더 합리적이라고 생각하며 중첩해야하는 경우 요소보다 더 많은 요소가 외부 요소 내부에 있음을 제안합니다.

— 남자 이름
소스