W3C 标记验证在似乎有效的一行中给我 3 个错误

Question

我运行我的网站在 W3C 验证器中只出现这些错误：

<a href="#header-anchor">
        <img src="img/banner.png" width="169" height="54" alt="Logo">
</a>

我得到的错误是：

第 14 行，第 28 列：看到了一个开始标记，但已经打开了一个相同类型的元素。
第 14 行第 28 列：结束标记 a 违反了嵌套规则。
第 14 行，第 28 列：上次错误后无法恢复。将忽略任何进一步的错误。

我不确定是什么导致了这个错误，所以我们将不胜感激。谢谢

编辑：显然是这段代码导致了错误，但我不确定到底是什么导致了错误：

<a href="index.html">

编辑 2：完整代码：

<!DOCTYPE HTML>
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <link href="css/style.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Banner --> 
<a class="anchor" id="header-anchor">
<div id="header-wrapper">
  <header role="banner" id="header"> 
    <a href="index.html">
        <img src="img/banner.png" width="169" height="54" alt="Logo">
    </a>
    <nav role="navigation">
      <ul>
        <li><a href="#header-anchor">HOME</a></li>
        <li><a href="#services-anchor">SERVICES</a></li>
        <li><a href="#team-anchor">OUR TEAM</a></li>
        <li><a href="#about-anchor">ABOUT</a></li>
        <li><a href="#contact-anchor">CONTACT</a></li>
      </ul>
    </nav>
  </header>
</div>
<div id="banner-wrapper">
  <section id="banner">
    <h2>Title</h2>
    <h3>Tagline</h3>
  </section>
</div>
<!-- Services --> 
<a class="anchor" id="services-anchor"></a>
<div class="wrapper">
  <section id="services" class="group">
    <h2>Our Services</h2>
    <div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-line-chart fa-stack-1x fa-inverse"></i> </span>
      <h3>Service 1</h3>
      <p>Service 1</p>
    </div>
    <div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-money"></i> </span>
      <h3>Service 1</h3>
      <p>Service 1</p>
    </div>
    <div class="floatleft small"> <span class="fa-stack fa-3x"> <i class="fa fa-globe"></i> </span>
      <h3>Service 1</h3>
      <p>Service 1</p>
    </div>
  </section>
</div>
<!-- About us --> 
<a class="anchor" id="team-anchor"></a>
<section id="team" class="group">
  <h2>Our Team</h2>
  <div class="floatleft mid"> <img src="img/ben.jpg" width="250" height="250" alt="Ben Fitchew">
    <h3>Team 1</h3>
    <p>Team 1</p>
  </div>
  <div class="floatleft mid"> <img src="img/jeremy.jpg" width="250" height="250" alt="Jeremy Lang">
    <h3>Team 1</h3>
    <p>Team 1</p>
  </div>
  <div class="floatright mid"> <img src="img/gianluca.jpg" width="250" height="250" alt="Gianluca Monaco">
    <h3>Team 1</h3>
    <p>Team 1</p>
  </div>
  <div class="floatright mid"> <img src="img/will.jpg" width="250" height="250" alt="William Pattisson">
    <h3>Team 1</h3>
    <p>Team 1</p>
  </div>
</section>
<!-- About -->
<div class="wrapper"> <a class="anchor" id="about-anchor"></a>
  <section id="about" class="group" role="main">
    <h2>About</h2>
    <h3>About</h3>
    <p>About</p>
  </section>
</div>
<!-- Slideshow -->
<div class="wrapper">
  <h2>Slideshow</h2>
  <h3>Slideshow</h3>
  <p class="Slideshow"><img src='images/picture1.jpg' name='SlideShow'/></p>
  </section>
</div>
<!-- Javascript code --> 
<script type="text/javascript">

var slideShowSpeed = 2000;
var Pic = new Array();

Pic[0]='img/picture1.jpg';
Pic[1]='img/picture2.jpg';
Pic[2]='img/picture3.jpg';
Pic[3]='img/picture4.jpg';
Pic[4]='img/picture5.jpg';
Pic[5]='img/picture6.jpg';

var currentPicture = 1;
var pictureNo = Pic.length;

var preLoad = new Array();
for (i = 0; i < pictureNo; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}

function runSlideShow() {

if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration=3)";
document.images.SlideShow.filters.blendTrans.Apply();
}

document.images.SlideShow.src = preLoad[currentPicture].src;

if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}

currentPicture = currentPicture + 1;

if (currentPicture >= pictureNo)
     currentPicture = 0;

setTimeout('runSlideShow()', slideShowSpeed);

}

</script> 
<script>
    runSlideShow();
</script> 
<!-- Contact --> 
<a class="anchor" id="contact-anchor"></a>
<div class="map-wrapper">
  <section id="contact" class="group">
    <h2>Contact Us</h2>
    <div id="map-canvas" class="floatleft mid"></div>
    <div class="floatright mid">
      <form id="frmContact" action="mail.php" method="post" role="form">
        <label for="txtName" id="lblName">Name</label>
        <input type="text" name="txtName" id="txtName" aria-labelledby="lblName" required placeholder="Enter your name here" minlength="3" maxlength="70" pattern="[a-zA-Z ]+">
        <span class="error_show">Name is not valid!</span>
        <label for="txtEmail" id="lblEmail">Email</label>
        <input type="email" name="txtEmail" id="txtEmail" aria-labelledby="lblEmail" required placeholder="Enter your email here" minlength="5" maxlength="254">
        <span class="error_show">Email is not valid!.</span>
        <label for="txtMessage" id="lblMessage">Message</label>
        <textarea name="txtMessage" id="txtMessage" aria-labelledby="txtMessage" required placeholder="Enter your message here"></textarea>
        <span class="error_show">Message is not valid!</span>
        <input type="submit" name="submit" id="submit" value="Send Message">
      </form>
    </div>
  </section>
</div>
<!-- Javascript --> 
<script src="js/jquery-2.1.1.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
<script>
            // Code for Google Map
            function initialize() {
                var mapCanvas = document.getElementById('map-canvas');
                var myLatLng = new google.maps.LatLng(51.51463,-0.106533);
                var mapOptions = {
                    center: myLatLng,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(mapCanvas, mapOptions);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: 'Ardevora'
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);


            $(document).ready(function() {

                // Form Validation Code
                $('#txtName').on('input', function() {
                    var input=$(this);
                    var is_name=input.val();
                    if (is_name) {
                        input.removeClass("invalid").addClass("valid");
                        input.next().hide();
                    } else {
                        input.removeClass("valid").addClass("invalid");
                        input.next().show();
                    }
                });
                $('#txtEmail').on('input', function() {
                    var input=$(this);
                    var regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
                    var is_email=regex.test(input.val());
                    if (is_email) {
                        input.removeClass("invalid").addClass("valid");
                        input.next().hide();
                    } else {
                        input.removeClass("valid").addClass("invalid");
                        input.next().show();
                    }
                });
                $('#txtMessage').keyup(function(event) {
                    var input=$(this);
                    var message=$(this).val();
                    if (message) {
                        input.removeClass("invalid").addClass("valid");
                        input.next().hide();
                    }   else { 
                        input.removeClass("valid").addClass("invalid");
                        input.next().show();
                    }  
                });
                $("#submit").click(function(event) {
                    var form_data=$("#frmContact").serializeArray();
                    var error_free=true;
                    for (var input in form_data){
                        var element=$("#"+form_data[input]['name']);
                        var valid=element.hasClass("valid");
                        var error_element=element.next();
                        if (!valid) {
                            error_element.show();
                            error_free=false;
                        } else { 
                            error_element.hide();
                        }
                    }
                    if (!error_free){
                        event.preventDefault();
                    }
                });
            });

        </script> 
<!-- Cookie Script --> 
<script type="text/javascript">
(function(){

  var msg = "We use cookies to enhance your web browsing experience. By continuing to browse the site you agree to our policy on cookie usage.";
  var closeBtnMsg = "Ok I comply";
  var privacyBtnMsg = "Privacy Policy";
  var privacyLink = "http://www.google.com";

  //check cookies 
  if(document.cookie){
   var cookieString = document.cookie;
   var cookieList = cookieString.split(";");
   // if cookie named OKCookie is found, return
   for(x = 0; x < cookieList.length; x++){
     if (cookieList[x].indexOf("OKCookie") != -1){return}; 
   }
  }

  var docRoot = document.body;
  var okC = document.createElement("div");
  okC.setAttribute("id", "okCookie");
  var okCp = document.createElement("p");
  var okcText = document.createTextNode(msg); 

  //close button
  var okCclose = document.createElement("a");
  var okcCloseText = document.createTextNode(closeBtnMsg);
  okCclose.setAttribute("href", "#");
  okCclose.setAttribute("id", "okClose");
  okCclose.appendChild(okcCloseText);
  okCclose.addEventListener("click", closeCookie, false);

  //privacy button
  var okCprivacy = document.createElement("a");
  var okcPrivacyText = document.createTextNode(privacyBtnMsg);
  okCprivacy.setAttribute("href", privacyLink);
  okCprivacy.setAttribute("id", "okCprivacy");
  okCprivacy.appendChild(okcPrivacyText);

  //add to DOM
  okCp.appendChild(okcText);
  okC.appendChild(okCp);
  okC.appendChild(okCclose);
  okC.appendChild(okCprivacy);
  docRoot.appendChild(okC);

  okC.classList.add("okcBeginAnimate");

  function closeCookie(){
    var cookieExpire = new Date();
    cookieExpire.setFullYear(cookieExpire.getFullYear() +2);
    document.cookie="OKCookie=1; expires=" + cookieExpire.toGMTString() + ";";
    docRoot.removeChild(okC);
  }

})();
</script> 
<!-- Footer -->
<footer role="contentinfo"> 
  <!-- Left Footer -->
  <ul class="floatleft">
    <li><a href="#header-anchor">HOME</a></li>
    <li><a href="#services-anchor">SERVICES</a></li>
    <li><a href="#team-anchor">OUR TEAM</a></li>
    <li><a href="#about-anchor">ABOUT</a></li>
    <li><a href="#contact-anchor">CONTACT</a></li>
  </ul>
  <!-- Right Footer -->
  <ul class="floatright">
    <p>Copyright 2014</p>
  </ul>
</footer>
</body>
</html>

Answer 1

你的页面声明是什么？可能是 <img /> 标签未完成的错误。

<img src="img/banner.png" width="169" height="54" alt="Logo" />

标签 <a> 应该 title="Title a" 与 alt="Alt img" 图片一致

Answer 2

标签 <a class="anchor" id="header-anchor"> 没有结束标签。这导致它后面的元素被当作它的内容，进而导致违反元素嵌套规则。最简单的修复方法是在开始标记之后立即添加结束标记：

<a class="anchor" id="header-anchor"></a>

虽然这样的元素不是好的风格。您可能只使用分配给具有真实内容的元素的 id 属性和 class 属性。

修复该问题导致文档中稍后会报告一些错误，但它们相对容易分析（尤其是在解释的帮助下）。

W3C 标记验证在似乎有效的一行中给我 3 个错误

W3C Markup Validation gives me 3 errors on one line that seems to work

html

w3c-validation