Question 22347 in SEO Question posted in
Some basic information to get you started with this can be found here.

I can't figure out how my Html is not semantic – SEO

I was given a test to replace all the div tags in an Html file with semantic Html5 tags. After replacing all the tags, my test failed in 2 places; I’ll point them out below. In the test, it was also stated that the classes and id of the tags might give you a little context about the Tag that might be used the replace them.

Here is the initial code :

<!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>

Here is the layout image :

Here is the layout image :

Here is my final code with semantic changes:

<!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>

I was getting error with id main-block and class copyright, The error was like this :

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)

and same for copyright.
What do I need to replace main-block and copyright tags? Thanks for reading.

Tags:

2

Answers


  1. 0

    Honestly not sure, this seems like a very specific issue with the class you’re in, but it may serve you to look at this page not from the viewpoint of changing the old version, but how you would write it from scratch so it’s semantic from the getgo.

    enter image description here

    It looks like you have a <section> tag around two other sections, which is unnecessary, though not incorrect. You also have your <aside> inside your main, which doesn’t make much sense as the stuff that goes in aside is meant to be not main content.

    the problem with this is that semantics are meant to create more meaning in an html document, so it’s hard to say when they are being used incorrectly, excluding obvious misuses. Obviously, the footer doesn’t go in the body. Obviously, the header doesn’t go below the footer. But who’s to say that an article needs to go in a section? Or that an article can’t have a section? No one. In fact, both layouts are correct.

    The real answer is going to come from the class you’re taking, not a stranger unfamiliar with the specifics of this class.

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search