Search code examples
htmlsemantic-markup

Could I use div and article inside section?


I have a section which is devided by 2 parts. Left side is only for image and right - only for article. Is my code correct?

<section>
  <h1>Section header</h1>
  <div style="float: left;">
    <img src="#" alt="somepic" />
  </div>
  <article style="float: right;">
    <h2>About me</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
</section>

Solution

  • Yes, your markup structure is perfectly acceptable. An HTML5 section element can be used at your discretion to contain content related to a particular topic or activity. There are no specific rules about what elements it may include. You might use figure for your image wrapper as well. MDN

    I recommend against using floats (which often lead to unpredictable or undesired behavior) and inline styles (which are just messy), though. Instead, set your elements to inline-block and give them explicit (percentage) widths using CSS classes in an embedded style tag or an external stylesheet.