Making beautiful business applications

HTML Tags and coffee – Tags closing and nesting

coffeeStartAndEnd
If you want to learn about HTML, you need to understand some core concepts about the language. I will here discuss a few, using some pictures I have found online.

HTML is a layout language – it consists of tags, like so:

 

<coffeecup></coffeecup>

This would correspond in coffee terms to something like the big image here =>

You need to think of HTML as a set of containers. These containers will make magical things happen to anything that is on the inside. For now, it could make things italic, bold, explain to the code and the browser that it is a paragraph or a header.

Most tags require you to close it. Think about it – if your coffee cup does not know where to start and end, where will your coffee end…? Quite possibly at a restaurant with bottomless coffee!

Nesting: coffeecups in coffeecups and coffee in coffeecups

But on a more serious note – most layout containers need you to specify the end and the start. There’s a select few that does not have start and end tags, as it would be a bit silly – these will be discussed in a future blog post.

I do want to explain something here about layout though:

mergedCoffee

Does this picture look awkward? It seems like the coffee had some bad experience in Photoshop! It seems like someone tried to merge these coffees into each other, but the cup containers’ start and ends got messed up. In Html, this is very important: you cannot have a situation like this:

 

<coffeecup>
<coffee>
</coffeecup>
</coffee>

Yet, you could have a situation like this:

 

<coffeecup>
      <coffee>
      </coffee>
</coffeecup>

beansinside
or this:
 

<coffeecup>
      <coffeecup>
      </coffeecup>
</coffeecup>

or this:
 

<coffeecup>
      <coffeebean>
      </coffeebean>
      <coffeebean>
      </coffeebean>
</coffeecup>

These are allowed. Remember – HTML is all about layout. You want to define what goes into what – coffee goes into the coffeecup, coffeebeans could go into the cup for the photo, but also into the coffee grinder. Now that you understand the basics of HTML layout, you’re ready to go make another delicious cup of coffee.

Leave a Reply

Your email address will not be published. Required fields are marked *