Basic HTML structure for three columns of articles

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:

And this is the HTML5 code I created:

  
    Title
    Subhead
  

  
   
    
       inside each article? -->
      Item 1
      Lorem ipsum...
    

    
      Item 2
      Lorem ipsum...
    

    
      Item 3
      Lorem ipsum...
    
  

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?

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:

  Item
  
    
      
    
    
      Text
    
  

Was a lot harder to understand than something like:

  Item
  
    
      
    
    
      Text
    
  

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.

StackExchange Code Review Q#135152, answer score: 4