앵커 안에 div를 넣는 것이 올바른가요?

인라인 요소 안에 블록 요소를 넣는 것은 HTML 죄라고 들었습니다.

<a href="http://www.mydomain.com"><div>
What we have here is a problem. 
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>

그러나 display:block스타일 시트 에서처럼 외부 앵커 의 스타일을 지정하면 어떨까요? 여전히 잘못입니까? 블록 수준 및 인라인 요소 에 대한 HTML 4.01 사양은 다음 과 같이 생각됩니다.

스타일 시트는 요소가 블록으로 렌더링되는지 인라인으로 렌더링되는지를 포함하여 임의의 요소의 렌더링을 지정하는 수단을 제공합니다. 목록 요소에 대한 인라인 스타일과 같은 일부 경우에는 적절할 수 있지만 일반적으로 저자는 이러한 방식으로 HTML 요소에 대한 일반적인 해석을 무시하지 않아야합니다.

누구 든지이 문제에 대한 추가 팁이 있습니까?

제공하는 HTML 버전에 따라

• HTML 5 는<a>요소 내에 "예를 들어 버튼이나 다른 링크와 같은 대화 형 컨텐츠가없는 한 전체 단락, 목록, 표 등, 심지어는 전체 섹션으로 둘러싸 일 수있다"고 명시하고 있습니다.

• HTML 4.01 은<a>요소가 인라인 요소 만 포함 할 수있도록 지정합니다. A<div>는 블록 요소 이므로 안에 표시되지 않을 수 있습니다<a>.

  물론 당신은 인라인 요소 있도록 스타일 자유에있다 가 나타납니다 블록, 또는 블록 그래서 인라인으로 렌더링되는 것을 실제로 스타일로. 용어 inline와 blockHTML에서 사용 된 용어 는 요소와 문서의 의미 구조와의 관계를 나타내는 반면 CSS의 동일한 용어는 요소의 시각적 스타일과 더 관련이 있습니다. 인라인 요소를 블록 방식으로 표시하면 괜찮습니다.

  그러나 CSS가 존재하지 않을 때 (예 : 스크린 리더와 같은 보조 기술을 통해 액세스 할 때 또는 실제로 강력한 Googlebot이 검사 할 때) 문서 구조가 여전히 올바른지 확인해야합니다.

아니요. 확인하지는 않지만 일반적으로 최신 브라우저에서 작동합니다. 즉, 앵커 내부의 스팬을 사용하고 그 위에도 설정 display: block하면 확실히 모든 곳에서 작동하며 유효성을 검사합니다!

W3C의의 의사는 같은 개념 사용하지 않는 잘못 과 죄를 하지만 같은 그 사용하지 수단을 제공을 , 적합 할 수 와 낙담 .

실제로 섹션 4 의 두 번째 단락 에서 4.01 스펙은 다음과 같이 단어를 항목별로 분류합니다.

이 문서에서 핵심 단어 "MUST", "MUST NOT", "필수", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY"및 "OPTIONAL" [RFC2119]에 설명 된대로 해석됩니다. 그러나, 가독성을 위해,이 단어들이 본 명세서에서 모든 대문자로 나타나는 것은 아니다.

이를 염두에두고 결정문 은 7.5.3 블록 수준 및 인라인 요소 에 있다고 생각합니다.

일반적으로 인라인 요소는 데이터 및 기타 인라인 요소 만 포함 할 수 있습니다.

"일반적으로"조건은 HTML 4.01이 인라인 요소가 블록 요소를 포함 할 수 있도록하기에 충분한 모호성을 유발하는 것으로 보입니다.

확실히 CSS2에는 표시 속성 값 inline-block이 있으며, 설명하는 목적에 적합한 것으로 보입니다. 그것이 널리 지원되는지 확실하지 않지만 누군가가 그런 종류의 행동이 필요하다고 생각한 것 같습니다.

DTD는 여기에서 덜 용서하는 것처럼 보이지만 DTD의 텍스트 는 사양에 따라 다릅니다.

HTML 4.01 사양에는 DTD 내에서 표현할 수없는 추가 구문 제약 조건이 포함되어 있습니다.

다른 의견에서, 블록을 앵커로 감싸서 블록을 활성화하도록 제안합니다. 나는 HTML이 그것을 금지한다고 생각하지 않으며, CSS는 그것을 분명히 허용합니다. 그래서 그것이 정확한지에 대한 제목 질문에 대답하기 위해 나는 그렇습니다. 표준에 따르면 때로는 정확합니다.

HTML5 사양으로 ... 이제 인라인 요소 안에 블록 수준 요소를 넣을 수 있습니다. 이제 'div'또는 'h1'을 'a'요소 안에 넣는 것이 완벽합니다.

<div>안에 넣을 수 없습니다 <a>-유효하지 않은 (X) HTML입니다.

display : block으로 범위의 스타일을 지정하더라도 블록 수준 요소를 그 안에 넣을 수는 없습니다. CSS는 아무리 CSS를 사용하더라도 (X) HTML은 (X) HTML DTD (어느 쪽을 사용하든)를 따라야합니다. 물건을 바꾼다.

브라우저는 아마도 원하는대로 표시하지만 제대로 작동하지는 않습니다.

http://www.w3.org/TR/REC-html40/sgml/dtd.html 에 HTML 4 용 DTD가 있습니다 . 이 DTD는 기계가 처리 할 수있는 사양의 형식이며 DTD가 XML 및 HTML 4를 관리한다는 제한, 특히 "일시적인"특징은 "법적"XML이 아닌 많은 것들을 허용합니다. 여전히, 나는 그것이 지정자의 의도를 체계화하는 것에 가깝다고 생각합니다.

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

이 계층 구조에 나열된 태그는 허용 된 총 태그로 해석합니다.

사양에 "인라인 요소"라고 말할 수 있지만 블록 요소 의 표시 유형 을 인라인 으로 선언하여 의도를 해결할 수는 없습니다 . 인라인 태그는 남용에 관계없이 의미가 다릅니다.

반면에 포함을 포함 special하면 중첩 A요소 가 허용 되는 것 같습니다 . 사양에 XML 구문이 정확하더라도 허용하지 않는 강력한 문구가있을 수 있지만 질문의 주제가 아니므로 더 이상 추구하지는 않습니다.

HTML5 <div>에서는 <a>태그 와 같은 블록 수준 요소를 래핑 할 수 있습니다 . (A)는 비록 <div>로 간주 유동 콘텐츠 컨테이너 / 래퍼 와 <a>의 고려되는 흐름의 콘텐츠 에 따른 MDN . 의미 적으로 블록 레벨 요소로 작동하는 인라인 요소를 작성하는 것이 좋습니다.

앵커 태그 안에 div를 배치하는 의미 론적 문제를 피하려면 앵커 태그를 div와 동일한 레벨에 배치하고 위치가있는 컨테이너로 모두 감싸십시오 : relative, 앵커 태그 위치를 절대로 만들고 용기를 채우십시오. 또한 컨텐츠 흐름의 끝에 있지 않은 경우 z 인덱스를 던져서 컨텐츠 위에 배치하십시오.

제안한대로 마크 업 코드를 추가했습니다.

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

그리고 CSS :

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

<a>블록 을 만들기 위해 노력 <a>한다면 블록 요소 인 div 안에 넣지 마십시오 . 동일한 효과가 있습니다.

블록 스타일 요소로 변경하면 더 이상 '잘못'되지 않지만 유효성을 검사하지는 않습니다. 그러나 당신이하고있는 일을하는 것은별로 의미가 없습니다. 앵커 태그를 내부 div가없는 블록 레벨 요소로 유지하거나 div를 외부에 배치해야합니다.

잘못 됐어 span을 사용하십시오 .

사람들 이이 질문을 할 때 대부분 div가있는 사이트를 만들었으므로 div 중 하나가 링크가되어야한다고 생각합니다.

누군가가 div 내부에 링크를 만들기 위해 앵커 태그 안에 투명한 빈 이미지 PNG를 사용하는 것을 보았으며 이미지는 div와 동일한 크기였습니다.

실제로 슬프지만 ... 작동합니다 ...

":: before"유사 요소를 추가하여이를 달성 할 수 있습니다.

순수 CSS 트릭;)

a:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

참고로

귀하의 목표가 div를 클릭 가능하게 만드는 것이라면 jQuery / Java Script를 사용할 수 있습니다.

div를 다음과 같이 정의하십시오.

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

그러면 jQuery가 다음과 같이 구현됩니다.

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

이 스레드에서 Tom의 의견에 따라 여러 div에서도 작동합니다.