How to organize HTML5 structure for better practices and better code readability?

Question

I'm new to HTML and programming in general and I want to make sure my code is organized and that I'm using the best practices while I go along.

So, I made this example layout I would like to convert to HTML5: https://postimg.org/image/je10syxhz/

And this is the HTML5 code I created:

<!-- Solutions Section -->
<section id="Solutions">
  <header>
    <h1>Title</h1>
    <h2>Subhead</h2>
  </header>

  <!-- Items -->
  <section> 
    <article class="Solutions_items">
      <!-- Should I have a <header> inside each article? -->
      <h1>Item 1</h1>
      <p>Lorem ipsum...</p>
    </article>

    <article class="Solutions_items">
      <h1>Item 2</h1>
      <p>Lorem ipsum...</p>
    </article>

    <article class="Solutions_items">
      <h1>Item 3</h1>
      <p>Lorem ipsum...</p>
    </article>
  </section>
</section>

Now to the question:

Is there a difference between using div instead of sections or articles? I mean, not only in the organization realm but also in optimization realm? Is there a general best practice convention nowadays about this specific topic? Because I feel that using sections and articles makes the code easier to read (and also makes the CSS file cleaner).

Thanks! :)

Hi and welcome to Stack Overflow. While this is a good question in its own right, it is not a good fit for Stack Overflow, it is too broad and could be somewhat opinion based. Please see https://stackoverflow.com/help for a better idea of the questions the best suite Stack Overflow. — Jon P, Jul 18 '16 at 01:37
That question is more correct in a site like **quora** [link](https://quora.com) or similar — Cesar Jr Rodriguez, Jul 18 '16 at 01:54
Please ask only one question per post (otherwise they're reasonable, except for the third which comes down to personal style) — Bergi, Jul 18 '16 at 01:56
You 'section' should have a heading in it. I'd skip the 'id.' Should probably have 'roles' in there too. This is more of a question for http://codereview.stackexchange.com/ This is likely to get flagged and down-voted because it's pretty opinion based. Watch out! : ) — sheriffderek, Jul 18 '16 at 02:00
Sorry guys! I tried to edit my question, I hope it fits the site's rules now. — SnooDucks299792, Jul 18 '16 at 02:07
Hello, Luciano, thank you for posting. While you might receive some decent feedback here, I really want to second @sheriffderek's suggestion that you post on the codereview stackexchange instead. the folks over there are happy to do in-depth code reviews and they are incredibly helpful! And, since it's in the stack exchange network, you can sign in with your stack overflow account. — Woodrow Barlow, Jul 18 '16 at 02:10

score 1 · Accepted Answer · edited May 23 '17 at 12:14

div vs section

If the content within the part of the page is thematically similar, use section, contents of a div do not require thematic similarity, the purpose of a div is for styling not content similarity

More details -> What is the difference between <section> and <div>?

div vs article

article signifies "syndicated" content such as "a forum post, a magazine or newspaper article, a blog entry".

More details -> Section, Article, or Div? and Smaller text in a section and article tag?

header tags allow for "semantic organization", if you have a lot of variable content on one page, it is a good idea to organize sections with header tags

More details -> http://html5doctor.com/the-header-element/

If you are adding br tags between sections to indicate a new structural area of the page, adding br in the html is permissible, however, for purely style based objectives, use style sheets

More details -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

Nesting section tags is ok, but remember the proper use of a section tag (thematic similarity), nesting sections for styling purposes is not advised, use div

More details -> Nesting HTML5 section tags

Also, I would only have one h1 per page, this goes along with keeping the html organized

You said you only use one h1 per page, right? But what if I'm working on a single-page website (like a fancy landing page)? In this case would it be ok to use h1 as heading for each section? If not, what would be the best thing to do? To use the h1 as the main heading in the page's header and to create a specific
to be used as title for all sections? — SnooDucks299792, Jul 18 '16 at 03:13
@LucianoInfanti - definitely don't use h1 for each inner section or article if you're using h1 for the page or a higher level section. See http://html5doctor.com/computer-says-no-to-html5-document-outline/ for details. — Alohci, Jul 18 '16 at 06:42

How to organize HTML5 structure for better practices and better code readability?

1 Answers1