2013-09-06 3 views
1

이 HTML 스 니펫을 사용하면 Firefox 및 Chrome에 표시 될 때 최상위 Google 링크가 그 아래의 모든 요소에 포함됩니다.Firefox 및 Chrome에서 HTML이 올바르게 구문 분석되지 않습니다.

이 구문 분석 문제를 일으키는 내가 그것을 어떻게 해결할 수 무엇
<div> 
    <a href="http://www.google.com/"> 
     <div> 
      <div>      
       <div> 
        <div> 
         <a>a tag</a> 
        </div> 
        <img />   
        <h3>a title</h3> 
        <p>a description</p> 
        <div>a detail</div> 
       </div> 
      </div> 
     </div> 
    </a> 
</div> 

enter image description here

? the W3C Validator에 다음 문서를 삭제

+0

앵커에 div를 사용할 수 없습니다. 구문 분석기는 마크 업을 이해하고 잘 수행하려고 시도하지 않습니다. – Musa

+0

실제로 'a'에'div '가있는 HTML5는 완벽하게 합법적입니다. – jmoerdyk

+0

파서가 신경 쓰지 않는 곳. – Musa

답변

3

시도 :

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Parse error?</title> 
    </head> 
    <body> 
     <div class="g23"> 
      <a href="http://www.google.com/"> 
       <div class="article-bg"> 
        <div class="splash-border-right">      
         <div class="splash-content-margin"> 
          <div> 
           <a href="http://www.google.com/">a tag</a> 
          </div> 
          <img src="http://www.google.com/image.jpg" />   
          <h3 class="splash">a title</h3> 
          <p>a description.</p> 
          <div class="read-time">a min</div> 
         </div> 
        </div> 
       </div> 
      </a> 
     </div> 
    </body> 
</html> 

이 문서가 유효 HTML5가 아닌 것을 관찰한다. 첫 번째 오류는 :

입니다

Line 13, Column 65: An a start tag seen but an element of the same type was already open.

, a 태그는 다른 a 태그를 포함하지 않아야합니다. 의견에 Alohci에 따르면 Chrome 및 Firefox의 동작은이 시나리오에서 HTML5 사양의 adoption agency algorithm과 일치합니다. 그것은 펑키지만, 잘못된 코드로 인해 펑키 한 결과가 예상됩니다.

+0

나는 전에이 오류를 만들지 않고이 오랜 세월을 보냈다. 고마워, 나에게 분명 했어야했다. – John

+0

설명을위한 @Matchu 감사 –

+1

행동은 주로 [입양 기관 알고리즘] (http://www.w3.org/html/wg/drafts/html/master/syntax.html#adoptionAgency)입니다. HTML5 이후, 브라우저는 입력 내용에 관계없이 HTML을 파싱 할 때 원하는대로 자유롭게 수행 할 수 없습니다. – Alohci

관련 문제