CODEWITHSUNDEEP
html
user1355300
user1355300

Reputation: 4987

HTML5 aside correct use

In the following HTML syntax, should the meta div be inside the header? It just contain date and author name and should appear under heading. Also is the aside being used correctly or should the figure be used instead of aside?

<article class="article">
    <header>Heading</header>
    <div class="meta"> date and author info. </div> 
    <div class="wrap">
        <aside class="thumbnail"> <!-- left -->
            <img src="abc.jpg" />
        </aside>        
        <div class="content"> <!-- right -->
            ...
        </div>  
    </div>
</article>

Upvotes: 0

Views: 1920

Answers (3)

Alohci
Alohci

Reputation: 83116

Instead of

<div class="meta"> date and author info. </div>

the following would be better

<footer> date and author info. </footer>

The HTML5 spec for <footer> says:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

and also

Footers don't necessarily have to appear at the end of a section...

For <aside>, the HTML5 spec says:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.

This is somewhat trickier to interpret, but I would say the the thumbnail forms an integral part of the content of the article rather than being tangentially related to it.

In fact, in the absence of data to the contrary, I don't see the need for a wrapper around the <img> element at all. Just use: 

<img src="abc.jpg" class="thumbnail" alt="A B C" />

If you need a wrapper for styling purposes, use a <div>

Upvotes: 3

defau1t
defau1t

Reputation: 10619

had I been at your place, I would have written the above code as below:

<header>Heading</header>
<section class="article">

    <div class="meta"> date and author info. </div> 
    <article class="wrap">
        <div class="thumbnail"> <!-- left -->
            <img src="abc.jpg" />
        </div>        
        <aside class="content"> <!-- right -->
            ...
        </aside>  
    </article>
</section>

Upvotes: 0

SaurabhLP
SaurabhLP

Reputation: 3655

The meta tag in mentioned in between the <head></head> code...

<meta charset="utf-8">

The right procedure in right html5 code is...

<body><div class="container">
  <header>Header</header>
  <div class="sidebar1">
    <aside>
      <p>Paragraph</p>
      <p>Paragraph</p>
    </aside>
  <!-- end .sidebar1 --></div>
  <article class="content">
    <h1>Instructions</h1>
    <section>
     <p>Paragraph</p>
      <p>Paragraph</p>
      <p>Paragraph</p>
    </section>
  <!-- end .content --></article>

  <footer>Footer</footer>
  <!-- end .container --></div></body>

Take a help from this...

whereas aside is a new html5 tag which is for left or right column side of the page...

Css for aside:

aside {
    float: left;
    width: 180px;
    padding: 10px 0;
}

Upvotes: 0

Related Questions