Learning HTML 1/3 (“Hello World!” and all kind of stuff)

 
HTML5_Logo_512.png
 

Learning HTML at the time of HTML5 feels a bit like discovering JRR Tolkien’s world through Peter Jackson’s trilogies ; you do enjoy it a lot but every time you meet someone with more mileage than you in the field, they’ll make you understand that all the good stuff has been removed from it.

Looking at how structured and coherent the latest edition of HTML is, it’s hard to imagine that not too long ago, entire sites were formatted though <table> tags with rows and columns.

Now that I think about it, I ca remember some old sites that surely used to be coded that way.

The most important thing to understand about HTML is that it’s not really a programming language. I mean, imagine yourself stepping into a Hackathon and stating:

“Hey guys! I’m a programmer (don’t even think of saying “hacker”)!!

Silence in the room, every dude here is having their eyes pointed right at you. Some are even starting to call your bluff.

“…. yeah … I know HTML…”

…. 

… everyone burst into laughter … that 4-year old with a popsicle over there is laughing … there’s even a Japanese guy who only understood ‘HTML’ in your sentence and he’s laughing the most…

Let’s be clear, HTML is not a programming language, it’s used for referencing and structuring part of a webpage, it’s like preparing your lunch box for an OCD-person, labelling one box with <ham> another one with <cheese> and another one with <bread>, the <ham> and <cheese> boxes being smaller and fitting right into the <bread> box. 

You get the picture.

Now, imagine an elaborate lunch with starter, main course and desert (and a drink too). You are having a <salad class=”rocket watercress”> with a <dressing class=”balsamic”>


<div class="rocket watercress">
  <div class="balsamic vingar">
    Here's your salad!!! :)
  </div>
</div>

The main concepts you should make sure to understand before you move on to another language are the following ones:

  • How to link an HTML file to a CSS stylesheet.
  • How to link an HTML file to a JS script.
  • The header contains information about your webpages and is not visible on the actual page (title, meta-information, etc.)
  • What’s visible when you’re on a site is the content of the <body> tag.
  • Classes should be used to style several elements while IDs should be used on unique elements. For example, if you want your header, main area and footer to have the same width you can use a class on them of .wrapper for example but you should use an id of #header for your header, #footer for your footer, etc.
  • In HTML5, you should use as much as you can semantic tags instead of just divs with a given class, here’s a link to the new semantic tags in HTML5.

More will follow!

Feel free to comment and tell me what you think about that or how you learned HTML yourself.