我想不通我的 Html 怎么没有语义

问题描述 投票：0回答：2

我接受了一个测试，用语义 Html5 标签替换 Html 文件中的所有 div 标签。更换所有标签后，我的测试在 2 个地方失败；我会在下面指出它们。在测试中，还指出标签的类和 id 可能会给你一些关于可能用于替换它们的标签的上下文。

这是初始代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>HTML5 semantic codility task</title>
  <meta name="description" content="HTML5 semantic codility task" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
 </head>

 <body>
  <div id="top-menu">
   <div class="menu-element" id="logo">
    <a href="#">
     <img alt="Codility" src="images/logo.png" />
    </a>
   </div>
   <div class="menu-element">
    <a href="#">About us</a>
   </div>
   <div class="menu-element">
    <a href="#">References</a>
   </div>
   <div class="menu-element">
    <a href="#">Contact</a>
   </div>
  </div>

  <div id="content-container">
   <div id="sidepanel">
    <h2 class="sidepanel-title">Integer a placerat arcu.</h2>
    <p class="sidepanel-content">
     Aenean elementum posuere feugiat. Nulla faucibus pharetra commodo. Integer eu nisi quis diam ullamcorper gravida
     quis vel augue. Ut urna dui, venenatis vel dictum sit amet, lacinia ut massa. Nullam nec magna nisi. Donec sagittis
     sem ligula, blandit fringilla arcu dictum vitae. Nam eget fermentum leo. Proin fermentum nibh sit amet quam
     ultricies hendrerit. Integer sed neque tincidunt, volutpat sapien vel, pellentesque augue. Nullam quis velit eget
     leo molestie lobortis et eu magna. Fusce leo augue, blandit sed purus vitae, tincidunt consectetur velit. Ut at
     nibh augue. Nunc viverra laoreet interdum. Nunc mattis libero et diam dictum viverra. Nulla id odio mi. Sed eu ante
     non nisl aliquet interdum at ut enim.
    </p>
    <p class="sidepanel-content">
     Curabitur eleifend elementum tincidunt. Phasellus sit amet elit a massa sodales condimentum. Proin in lorem eu est
     ornare volutpat. Donec nec turpis in eros pretium maximus. Curabitur pellentesque rutrum vehicula. Etiam eu
     ultrices lorem, ac scelerisque lacus. Vivamus vestibulum mi eget nunc tincidunt mattis. Nam feugiat at diam sed
     facilisis. Quisque bibendum, ante quis scelerisque pharetra, diam sem aliquam diam, a hendrerit dui orci eu ante.
     Vestibulum volutpat augue sit amet bibendum commodo. Pellentesque convallis tincidunt dapibus. Sed imperdiet
     tincidunt tortor vitae congue.
    </p>
    <p class="sidepanel-content">
     Praesent eleifend massa velit, ut aliquet purus pretium quis. Vivamus euismod, arcu a varius euismod, arcu urna
     lacinia nibh, quis eleifend lacus nibh a ligula. In efficitur et nisl in tristique. Vestibulum rutrum finibus
     vulputate. Integer pharetra congue tortor ut luctus. Vivamus tempor, massa eu convallis rhoncus, orci dolor porta
     velit, vel viverra tellus sapien id erat. Vivamus accumsan blandit neque, in viverra lorem pharetra in. Quisque nec
     arcu euismod, mollis augue sed, porttitor dui. Proin sed iaculis odio. Interdum et malesuada fames ac ante ipsum
     primis in faucibus. Nam bibendum felis sit amet erat ornare fringilla.
    </p>
   </div>

   <div id="content">
    <div id="main-block">
     <h1 id="main-title">Duis varius venenatis nulla et.</h1>
     <p id="main-description">
      Pellentesque nec dolor gravida, porta metus et, dignissim tellus. Vivamus facilisis erat eget condimentum
      volutpat.
     </p>
    </div>

    <div class="site-block">
     <h2 class="subtitle">Aenean feugiat tellus vitae finibus laoreet.</h2>
     <p class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices laoreet nisi, vitae commodo erat malesuada
      quis. Etiam vitae libero euismod, commodo massa in, luctus nisi. Pellentesque aliquam leo mi, pulvinar porttitor
      orci auctor vitae. Quisque sagittis, velit ac consequat sollicitudin, enim est varius ligula, sed vulputate odio
      libero sit amet nunc. Nunc urna mauris, porttitor a vestibulum ac, fringilla aliquam dui. Sed fringilla venenatis
      erat quis consectetur. Nam id sapien et massa dapibus dapibus. Class aptent taciti sociosqu ad litora torquent per
      conubia nostra, per inceptos himenaeos. Nam scelerisque nibh a risus ullamcorper, nec faucibus lectus gravida.
      Vivamus id est purus. Donec imperdiet interdum auctor. Nunc in ante velit. Phasellus dictum et lectus ut
      malesuada. Nullam eget ante sodales, elementum sem et, porta mi. Aliquam accumsan arcu at eros sagittis accumsan
      nec non urna. Phasellus at diam non urna congue tempus in sit amet eros.
     </p>
    </div>

    <div class="site-block">
     <div class="image-container">
      <img alt="article related image" id="main-image" src="images/image.png" />
      <div class="image-caption">Mauris eget risus ullamcorper, facilisis lectus eget.</div>
     </div>
    </div>
   </div>
  </div>

  <div id="copyright-container">
   <div id="copyright-content">
    <p class="copyright">Copyright 1999-2020.</p>
    <p>by Codility &reg; All Rights Reserved.</p>
   </div>
  </div>
 </body>
</html>

这是布局图片：

这是我经过语义更改的最终代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>HTML5 semantic codility task</title>
  <meta name="description" content="HTML5 semantic codility task" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
 </head>

 <body>
  <nav id="top-menu">
   <span class="menu-element" id="logo">
    <a href="#">
     <img alt="Codility" src="images/logo.png" />
    </a>
   </span>
   <span class="menu-element">
    <a href="#">About us</a>
   </span>
   <span class="menu-element">
    <a href="#">References</a>
   </span>
   <span class="menu-element">
    <a href="#">Contact</a>
   </span>
  </nav>

  <main id="content-container">
   <aside id="sidepanel">
    <h2 class="sidepanel-title">Integer a placerat arcu.</h2>
    <p class="sidepanel-content">
     Aenean elementum posuere feugiat. Nulla faucibus pharetra commodo. Integer eu nisi quis diam ullamcorper gravida
     quis vel augue. Ut urna dui, venenatis vel dictum sit amet, lacinia ut massa. Nullam nec magna nisi. Donec sagittis
     sem ligula, blandit fringilla arcu dictum vitae. Nam eget fermentum leo. Proin fermentum nibh sit amet quam
     ultricies hendrerit. Integer sed neque tincidunt, volutpat sapien vel, pellentesque augue. Nullam quis velit eget
     leo molestie lobortis et eu magna. Fusce leo augue, blandit sed purus vitae, tincidunt consectetur velit. Ut at
     nibh augue. Nunc viverra laoreet interdum. Nunc mattis libero et diam dictum viverra. Nulla id odio mi. Sed eu ante
     non nisl aliquet interdum at ut enim.
    </p>
    <p class="sidepanel-content">
     Curabitur eleifend elementum tincidunt. Phasellus sit amet elit a massa sodales condimentum. Proin in lorem eu est
     ornare volutpat. Donec nec turpis in eros pretium maximus. Curabitur pellentesque rutrum vehicula. Etiam eu
     ultrices lorem, ac scelerisque lacus. Vivamus vestibulum mi eget nunc tincidunt mattis. Nam feugiat at diam sed
     facilisis. Quisque bibendum, ante quis scelerisque pharetra, diam sem aliquam diam, a hendrerit dui orci eu ante.
     Vestibulum volutpat augue sit amet bibendum commodo. Pellentesque convallis tincidunt dapibus. Sed imperdiet
     tincidunt tortor vitae congue.
    </p>
    <p class="sidepanel-content">
     Praesent eleifend massa velit, ut aliquet purus pretium quis. Vivamus euismod, arcu a varius euismod, arcu urna
     lacinia nibh, quis eleifend lacus nibh a ligula. In efficitur et nisl in tristique. Vestibulum rutrum finibus
     vulputate. Integer pharetra congue tortor ut luctus. Vivamus tempor, massa eu convallis rhoncus, orci dolor porta
     velit, vel viverra tellus sapien id erat. Vivamus accumsan blandit neque, in viverra lorem pharetra in. Quisque nec
     arcu euismod, mollis augue sed, porttitor dui. Proin sed iaculis odio. Interdum et malesuada fames ac ante ipsum
     primis in faucibus. Nam bibendum felis sit amet erat ornare fringilla.
    </p>
   </aside>

   <section id="content">
    <section id="main-block">
     <h1 id="main-title">Duis varius venenatis nulla et.</h1>
     <p id="main-description">
      Pellentesque nec dolor gravida, porta metus et, dignissim tellus. Vivamus facilisis erat eget condimentum
      volutpat.
     </p>
    </section>

    <section class="site-block">
     <h2 class="subtitle">Aenean feugiat tellus vitae finibus laoreet.</h2>
     <p class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices laoreet nisi, vitae commodo erat malesuada
      quis. Etiam vitae libero euismod, commodo massa in, luctus nisi. Pellentesque aliquam leo mi, pulvinar porttitor
      orci auctor vitae. Quisque sagittis, velit ac consequat sollicitudin, enim est varius ligula, sed vulputate odio
      libero sit amet nunc. Nunc urna mauris, porttitor a vestibulum ac, fringilla aliquam dui. Sed fringilla venenatis
      erat quis consectetur. Nam id sapien et massa dapibus dapibus. Class aptent taciti sociosqu ad litora torquent per
      conubia nostra, per inceptos himenaeos. Nam scelerisque nibh a risus ullamcorper, nec faucibus lectus gravida.
      Vivamus id est purus. Donec imperdiet interdum auctor. Nunc in ante velit. Phasellus dictum et lectus ut
      malesuada. Nullam eget ante sodales, elementum sem et, porta mi. Aliquam accumsan arcu at eros sagittis accumsan
      nec non urna. Phasellus at diam non urna congue tempus in sit amet eros.
     </p>
    </section>

    <section class="site-block">
     <figure class="image-container">
      <img alt="article related image" id="main-image" src="images/image.png" />
      <figcaption class="image-caption">Mauris eget risus ullamcorper, facilisis lectus eget.</figcaption>
     </figure>
    </section>
   </section>
  </main>

  <footer id="copyright-container">
   <article id="copyright-content">
    <p class="copyright">Copyright 1999-2020.</p>
    <p>by Codility &reg; All Rights Reserved.</p>
   </article>
  </footer>
 </body>
</html>

我遇到了 id main-block 和类 copyright 的错误，错误是这样的：

AssertionError: xpath for id: main-block is incorrect: {'/html/body/main/article/section[1]'}, this means that html5 DOM structure with this tag is not correct for SEO rules (xpath algorithm code: https://gist.github.com/ergoithz/6cf043e3fdedd1b94fcf)

和版权一样。 我需要什么来替换 main-block 和 copyright 标签？感谢阅读。

html semantic-markup
2个回答
1
投票

老实说不确定，这似乎是你所在班级的一个非常具体的问题，但它可能有助于你查看此页面，而不是从更改旧版本的角度来看，而是你如何从头开始编写它，所以它是从一开始就语义化。

看起来你在其他两个部分周围有一个 

<section>
标签，这是不必要的，但不是不正确的。你也有你的 
<aside>
在你的主要内容中，这没有多大意义，因为放在一边的东西不是主要内容。

这个问题是语义意味着在 html 文档中创建更多meaning，所以很难说它们何时被错误使用，除了明显的误用。显然，页脚不会进入正文。显然，页眉不会低于页脚。但是谁说文章需要分节呢？或者一篇文章不能有一个部分？没有人。事实上，两种布局都是正确的。

真正的答案将来自你正在上的课，而不是一个不熟悉这门课细节的陌生人。

0
投票
<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML5 semantic codility task</title>
  <meta name="description" content="HTML5 semantic codility task">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <nav id="top-menu">
     <span class="menu-element" id="logo">
     <a href="#">
     <img alt="Codility" src="images/logo.png" />
     </a>
     </span>
     <span class="menu-element">
     <a href="#">About us</a>
     </span>
     <span class="menu-element">
     <a href="#">References</a>
     </span>
     <span class="menu-element">
     <a href="#">Contact</a>
     </span>
  </nav>
  <main id="content-container">
     <aside id="sidepanel">
        <h2 class="sidepanel-title">Integer a placerat arcu.</h2>
        <p class="sidepanel-content">
           Aenean elementum posuere feugiat. Nulla faucibus pharetra commodo. Integer eu nisi quis diam
           ullamcorper gravida quis vel augue. Ut urna dui, venenatis vel dictum sit amet, lacinia ut massa. Nullam nec
           magna nisi. Donec sagittis sem ligula, blandit fringilla arcu dictum vitae. Nam eget fermentum leo. Proin
           fermentum nibh sit amet quam ultricies hendrerit. Integer sed neque tincidunt, volutpat sapien vel,
           pellentesque augue. Nullam quis velit eget leo molestie lobortis et eu magna. Fusce leo augue, blandit sed
           purus vitae, tincidunt consectetur velit. Ut at nibh augue. Nunc viverra laoreet interdum. Nunc mattis libero
           et diam dictum viverra. Nulla id odio mi. Sed eu ante non nisl aliquet interdum at ut enim.
        </p>
        <p class="sidepanel-content">
           Curabitur eleifend elementum tincidunt. Phasellus sit amet elit a massa sodales condimentum.
           Proin in lorem eu est ornare volutpat. Donec nec turpis in eros pretium maximus. Curabitur pellentesque rutrum
           vehicula. Etiam eu ultrices lorem, ac scelerisque lacus. Vivamus vestibulum mi eget nunc tincidunt mattis. Nam
           feugiat at diam sed facilisis. Quisque bibendum, ante quis scelerisque pharetra, diam sem aliquam diam, a
           hendrerit dui orci eu ante. Vestibulum volutpat augue sit amet bibendum commodo. Pellentesque convallis
           tincidunt dapibus. Sed imperdiet tincidunt tortor vitae congue.
        </p>
        <p class="sidepanel-content">
           Praesent eleifend massa velit, ut aliquet purus pretium quis. Vivamus euismod, arcu a varius
           euismod, arcu urna lacinia nibh, quis eleifend lacus nibh a ligula. In efficitur et nisl in tristique.
           Vestibulum rutrum finibus vulputate. Integer pharetra congue tortor ut luctus. Vivamus tempor, massa eu
           convallis rhoncus, orci dolor porta velit, vel viverra tellus sapien id erat. Vivamus accumsan blandit neque,
           in viverra lorem pharetra in. Quisque nec arcu euismod, mollis augue sed, porttitor dui. Proin sed iaculis
           odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam bibendum felis sit amet erat ornare
           fringilla.
        </p>
     </aside>
     <article id="content">
        <header id="main-block">
           <h1 id="main-title">Duis varius venenatis nulla et.</h1>
           <p id="main-description">
              Pellentesque nec dolor gravida, porta metus et, dignissim tellus. Vivamus facilisis erat
              eget condimentum volutpat.
           </p>
        </header>
        <section class="site-block">
           <h2 class="subtitle">Aenean feugiat tellus vitae finibus laoreet.</h2>
           <p class="description">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices laoreet nisi,
              vitae commodo erat malesuada quis. Etiam vitae libero euismod, commodo massa in, luctus nisi. Pellentesque
              aliquam leo mi, pulvinar porttitor orci auctor vitae. Quisque sagittis, velit ac consequat sollicitudin, enim
              est varius ligula, sed vulputate odio libero sit amet nunc. Nunc urna mauris, porttitor a vestibulum ac,
              fringilla aliquam dui. Sed fringilla venenatis erat quis consectetur. Nam id sapien et massa dapibus dapibus.
              Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam scelerisque
              nibh a risus ullamcorper, nec faucibus lectus gravida. Vivamus id est purus. Donec imperdiet interdum auctor.
              Nunc in ante velit. Phasellus dictum et lectus ut malesuada. Nullam eget ante sodales, elementum sem et, porta
              mi. Aliquam accumsan arcu at eros sagittis accumsan nec non urna. Phasellus at diam non urna congue tempus in
              sit amet eros.
           </p>
        </section>
        <section class="site-block">
           <figure class="image-container">
              <img alt="article related image" id="main-image" src="images/image.png">
              <figcaption class="image-caption">Mauris eget risus ullamcorper, facilisis lectus
                 eget.
              </figcaption>
           </figure>
        </section>
     </article>
  </main>
  <footer id="copyright-container">
     <details id="copyright-content">
        <summary class="copyright">Copyright 1999-2020.</summary>
        <span> by Codility &reg; All Rights Reserved.</span>
     </details>
  </footer>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.