current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 5 down vote favorite
1

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:

Title and subhead, followed by three columns of articles

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 questions:

  • 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).

  • Should I have a header tag inside each article? I heard this is best practice but I feel like this would make the code harder to read and at the same time I feel like it makes the code more organized so I'm kind of confused what to do.

  • About code readability: Should I keep a line break between different items like sections? In a small HTML file I'm aware that like breaks wouldn't be a big deal but in a big HTML file you could have like 200 empty lines making the code way bigger than it has to be. What do people usually do about this?

share|improve this question
up vote 3 down vote accepted

HTML is what's known as a markup language, which means the actual meaning of the elements (whether you choose div or sections) is up to the code to interpret.

Browsers have their own CSS files they apply to every page, so which tag you choose to use for an element doesn't really matter. Except for types like img and video that have special purpose in the browser

That said, using tag names that better suit the purpose increases the readability of your code and improves maintainability for future development.

Standards like HTML5 add more style rules for elements (as well adding more special purpose types like img and a bunch more stuff).

There's not an optimization tradeoff as the CSS engine doesn't treat rules on div different than rules on sections.

Should I have a header tag inside each article?

Yeah, that's exactly what it's for! Mozilla Developer Network says that the header element is for representing heading elements, specifically even quoting usage designed for a wrapped section's header.

I heard this is best practice but I feel like this would make the code harder to read

While code readability is arguably a personal thing, I always felt that this kind of layout:

<div class='section'>
  <h1 class='header'>Item</h1>
  <div class='content'>
    <div class='photo'>
      <img src="logo.png" />
    </div>
    <div class='description'>
      <p>Text</p>
    </div>
  </div>
</div>

Was a lot harder to understand than something like:

<section>
  <header>Item</header>
  <content>
    <photo>
      <img src="logo.png" />
    </photo>
    <description>
      <p>Text</p>
    </description>
  </content>
</section>

Especially seeing as you can now easily see which closing tag is which.

Should I keep a line break between different items like sections?

Again, code readability is up to you, do whatever is easier for you to understand.

in a big HTML file you could have like 200 empty lines making the code way bigger than it has to be. What do people usually do about this?

If you've got that many elements, it might time to use a library (like jQuery, Ember, Angular or React) to manage your data and make the HTML layouts for you.

However for just a normal HTML file, line breaks aren't necessarily bad. Extra lines don't bloat the files, so you don't need to worry too much about the files being bloated.

Like I said before, code readability is an intensely personal thing. While I (and any other reviewers) can take a look at code at tell you how readable it is, you're the one developing it, and it's your creation.

share|improve this answer
up vote 3 down vote

Subheadings/subtitles

Don’t use a heading element for subheadings/subtitles (details).

So instead of 

<header>
  <h1>Title</h1>
  <h2>Subhead</h2>
</header>

better use

<header>
  <h1>Title</h1>
  <p>Subhead</p>
</header>

header in article

Should I have a <header> inside each article?

It makes sense to use a header if you have more than just a heading element (h1-h6), e.g., something like a subheading (like in the example above) or other metadata.

It’s allowed to use header also if you only have a single heading, but it doesn’t really add anything in that case, semantically speaking.

div vs. section/article

Is there a difference between using div instead of sections or articles?

Yes, div is meaningless, while section and article are sectioning content elements (i.e., they create sections).

A section becomes part of the document outline, and sets the scope for header/footer (and in case of article, also for address).

Whenever you would use a heading element (h1-h6), you have an implict section anyway. It’s encouraged to make the sections explicit by adding a section element (or, where it applies, the more specific article, nav, or aside).

share|improve this answer
up vote 2 down vote

I'll try my best to answer. Never replace div with section or article. Div is supposed to be used to create the layout of your website while section and article are supposed to structure your website. Always stick to div inside the elements while building your layout.

You can most definitely use header inside each article. Header should be used to structure and group any heading levels within an article element.

I have no really recommendation about the usage of empty line breaks. I guess large webpages would become slow with excessive use of line breaks, but I guess others are better than me on that topic. :)

As for great guidance please refer to html5doctor.com

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.