Menu icon Foundation
Adding Semantic Tags Issue

In the URL provided, below the Orbit slideshow I have added two rows of code, one using Foundations default code and the other a mix by adding the Article and Aside tag but as you can see its broken. Adding semantic tags causes as spacing issues as well as display order. What causes that? Thank you.

3rdelement.com/test/test.html

<div class="row">
      <div class="large-4 columns"><a href="#" target="_blank" class="th"><img src="img/tutorials/illustrator/blend-tool-tn.jpg" alt=""/></a>
        <h6 class="panel">Adobe Illustrator Blend Too</h6>
      </div>
      <div class="large-4 columns"><a href="#" target="_blank" class="th"><img src="img/tutorials/motion/particles-fall-scene-tn.jpg" alt=""/></a>
        <h6 class="panel">After Effects Particles</h6>
      </div>
      <aside class="large-4 columns">
        <div> <a href="http://hagiasophiatourguide.com/" target="_blank" class="th right"><img src="img/hagia-sophia-app.jpg" alt="Hagia Sophia Tour Guide Application"></a> </div>
      </aside>
    </div>

    
    <br>
    <br>


    <div class="row">
      <article>
        <div class="large-4 columns"><a href="#" target="_blank" class="th"><img src="img/tutorials/illustrator/blend-tool-tn.jpg" alt=""/></a>
          <h6 class="panel">Adobe Illustrator Blend Too</h6>
        </div>
        <div class="large-4 columns"><a href="#" target="_blank" class="th left"><img src="img/tutorials/motion/particles-fall-scene-tn.jpg" alt=""/></a>
          <h6 class="panel">After Effects Particles</h6>
        </div>
      </article>
      
      <aside class="large-4 columns">
        <div> <a href="http://hagiasophiatourguide.com/" target="_blank" class="th right"><img src="img/hagia-sophia-app.jpg" alt="Hagia Sophia Tour Guide Application"></a> </div>
      </aside>
    </div>
            

         

html5 tagsHTML5 Semantic Tags

In the URL provided, below the Orbit slideshow I have added two rows of code, one using Foundations default code and the other a mix by adding the Article and Aside tag but as you can see its broken. Adding semantic tags causes as spacing issues as well as display order. What causes that? Thank you.

3rdelement.com/test/test.html

<div class="row">
      <div class="large-4 columns"><a href="#" target="_blank" class="th"><img src="img/tutorials/illustrator/blend-tool-tn.jpg" alt=""/></a>
        <h6 class="panel">Adobe Illustrator Blend Too</h6>
      </div>
      <div class="large-4 columns"><a href="#" target="_blank" class="th"><img src="img/tutorials/motion/particles-fall-scene-tn.jpg" alt=""/></a>
        <h6 class="panel">After Effects Particles</h6>
      </div>
      <aside class="large-4 columns">
        <div> <a href="http://hagiasophiatourguide.com/" target="_blank" class="th right"><img src="img/hagia-sophia-app.jpg" alt="Hagia Sophia Tour Guide Application"></a> </div>
      </aside>
    </div>

    
    <br>
    <br>


    <div class="row">
      <article>
        <div class="large-4 columns"><a href="#" target="_blank" class="th"><img src="img/tutorials/illustrator/blend-tool-tn.jpg" alt=""/></a>
          <h6 class="panel">Adobe Illustrator Blend Too</h6>
        </div>
        <div class="large-4 columns"><a href="#" target="_blank" class="th left"><img src="img/tutorials/motion/particles-fall-scene-tn.jpg" alt=""/></a>
          <h6 class="panel">After Effects Particles</h6>
        </div>
      </article>
      
      <aside class="large-4 columns">
        <div> <a href="http://hagiasophiatourguide.com/" target="_blank" class="th right"><img src="img/hagia-sophia-app.jpg" alt="Hagia Sophia Tour Guide Application"></a> </div>
      </aside>
    </div>
            

         

This post has been closed. No new replies can be added.

Vanessa Kestering about 5 years ago

Think you can't use article in this case. Outside of the columns it won't work but maybe you could take the article-tag inside of your columns. Have you tried that?

<div class="row">
    <div class="large-4 columns">
      <article>
          <a href="#" target="_blank" class="th"><img src="img/tutorials/illustrator/blend-tool-tn.jpg" alt=""/></a>
      <h6 class="panel">Adobe Illustrator Blend Too</h6>
    </article>
    </div>
    <div class="large-4 columns">
      <article>
        <a href="#" target="_blank" class="th left"><img src="img/tutorials/motion/particles-fall-scene-tn.jpg" alt=""/></a>
      <h6 class="panel">After Effects Particles</h6>
    </article>
    </div>
  <aside class="large-4 columns">
      <div>
        <a href="http://hagiasophiatourguide.com/" target="_blank" class="th right"><img src="img/hagia-sophia-app.jpg" alt="Hagia Sophia Tour Guide Application"></a>
      </div>
  </aside>
</div>

vicky about 5 years ago

Hello,
Spacing may be occurring because of the absence of reset.css or normalize.css .If reset or normalize is not included it may cause browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

We cannot use article tag where ever it seems us to place it. Here is the link to http://html5doctor.com/the-article-element/ you'll get to know about the proper use of it.

Talk about aside tag , the very basic use of it could be for sidebars.

Hope , it will help you.