Confusion about HTML5 section, article and aside element compared to div element -

let's want create simple responsive 1 page homepage. find several alternatives this, best option? have read several articles on net including ones fron w3c, don't clear answer!

i'm going have 2 column layout text left , image right. on desktop computer besides each other, styled left , right. in smaller devices mobile, right column changed left , placed below text column.

is alternative 1 bad in html5 point of view? thought devide page several parts of alternative 1 or 2. there third alternative(i guess there endless other options aswell) use 2 article elements inside section element , use article element image instead of aside element.

i guess of might suggest me use article element instead of section elements , use nested article. it's confusing options!

should use article , header element in alternative 1?

preciate feedback , guidelines! sorry questions, want improve coding skills!

alternative 1:

<div id="intro"> <div class="content-left"> <h2>headline</h2> <p>text</p> </div><!-- end class content-left --> <div class="content-right"> <img src="...."/> </div><!-- end class content-right --> </div><!-- end id intro --> 

alternative 2 html5 elements:

<section id="intro"> <article> <header> <h1>headline</h1> </header> <p>text</p> </article> <aside> <img src="...."/> </aside> </section> 

the answer is: doesn't matter much, apart code readability. please see why use html5 tags? more on that.

you have <section class="articles"> contains <article> elements. have <div class="articles"> contains <div class="article"> elements. think it's safe there's no doubt first 1 easier read developers. pick.

there is, however, 1 issue: self-close <img> -- no need in html5 anymore. see are (non-void) self-closing tags valid in html5?.

in html 5, <foo /> means <foo>, start tag. not "self-closing tag". instead, elements designated having no end tag, example <br>. these collectively called void elements. slash syntactic sugar people addicted xml. using slash in non-void element tag invalid, browsers parse start tag anyway, leading mismatch in end tags.