You are here

Concepts of Coding: Keep Your Nest Clean

Submitted by Kady on April 8, 2015 - 9:21am

It's not uncommon for words that you thought you knew the meaning of to take on a different connotation when relating to computers. "Embed" doesn't just mean snuggle down into a mass of pillows, there's an actual tag called "embed" which performs a specific (albeit similar) function. Another word coders have misappropriated is "nest." In coding HTML you will often want to do several things to one object. In the case of a website, the simplest example is a piece of text. The example I'm going to give you with HTML is not something you will necessarily do anymore, because you can more cleanly accomplish it with CSS, but it will serve for showing the properties of nesting.

Let's say you have some text.

Hello World.

Being a diligent coder, you surround your text with paragraph tags, like so:

<p>Hello World.</p>

And maybe you are really excited about this text, and you want it to be bold. Here's where we have to start worrying about nesting.

<p><strong>Hello World.</strong></p>

Your tags should be organized by which is closest to the text or object you want to modify. You could have any number of tags, and as long as they are nested from the inside out, it should work. You could also italicize (emphasize) your text, for example.

<p><strong><em>Hello World.</em></strong></p>

See how the tags work from the inside out?

You never want to alternate tags. DO NOT DO THIS:

<p><strong><em>Hello World.</p></em></strong>  <-- BAD CODER! NO COOKIE!

It may work in some browsers, but believe me when I say that only confuses matters. Make sure your tags go from the inside out, understanding that the outermost tag will be applied to everything inside it, and you'll be just fine.