You are here

Concepts of Coding: If you open it, close it

Submitted by Kady on April 1, 2015 - 9:27am

AKA: If you start it, end it

Have you ever thought about doing a little more customization on your website, and just been overwhelmed when you realized you'd need to know HTML, or Javascript, or CSS, or php or... whatever language you needed and didn't have? It's not unlike being in a foreign country and not speaking the language. BUT! When it comes to computer coding, there's good news. There are certain concepts of writing computer languages that are universal to nearly all coding languages.*

Today we're going to start with open and closed. One very basic concept of coding is that if you open something, you have to close it before the end of your file.

Let's take a really functional example, something you will almost certainly do in any website you create: Adding a link. Now, yes, most of the tools you use nowadays will do this for you if you select the text, hit the link button, and then enter the URL. But, if you know what's going on behind the scenes-- what the actual HTML code looks like-- it does an excellent job of demonstrating the concept of opening and closing tags and elements.

So, let's say I want to link to the front page of the Richir Outreach website. I need to know a few things.

  1. The URL. Where is my link going? http://www.richiroutreach.com
  2. The words I want to turn into a link. Let's say "Richir Outreach".
  3. The HTML syntax to make this happen.
  4. HTML thinks of the words as an anchor, and uses greater and less than signs to surround tags. So the open tag is

    <a

    The next part tells what the anchor should reference, i.e., where it should go. So, adding on to our tag,

    <a href=

    Next, we insert the reference link, or URL.

    <a href="http://www.richiroutreach.com">

    Notice that we have a Less Than sign at the beginning of the tag, and a Greater Than sign at the end. We have closed what we opened. But, there's another component to the anchor element. Because now we have to insert the text we want to use as an anchor. So:

    <a href="http://www.richiroutreach.com">Richir Outreach

    Notice, also, that the URL is in double quotes. We opened and closed them. Leaving off a closing piece of syntax is probably one of the easiest ways to make yourself crazy when writing code. They are such small little pieces of text, hard to see with the naked eye (especially when said eyes are bleary from spending too long staring at a computer screen) but so important to making the computer understand what you're trying to say.

    Now, we have completed the open or beginning tag of the anchor element. We opened it, we opened our quotes, we closed our quotes, and we closed the tag. We've inserted what happens in between the code, which is, in this case, the name of the webpage to which we want to link. Next, we have to close our anchor element, so that the browser knows where to stop creating that link. If we didn't close the anchor element, the whole rest of the page would be a link to Richir Outreach. (And while we like visitors, we're pretty sure you don't want ALL the text on your page to link to our homepage!)

    In HTML, the way you close an element is with a forward slash. So, to close an anchor element, use this tag:

    </a>

    And your complete link will look something like this:

    <a href="http://www.richiroutreach.com">Richir Outreach</a>

    Easy, right?

    And here comes the really cool part. Most coding languages have extensive references available on the internet. In the case of HTML, you can go to the w3 Schools HTML Page and learn pretty much everything you could ever want to know. If that seems overwhelming, click the search button (the magnifying glass), and type "a href". This will take you to the w3 page that tells you all about the anchor element.

    Examples in other languages

    In Liquid Markup Language (which is used by NationBuilder), these same concepts apply. Let's take the Liquid "Capture" element as an example. Capture allows you to grab some text and turn it into a variable. We'll talk about why you might want to do this in another post, but for now, just check out how similar the syntax is.


    {% capture color %}
    Blue
    {% endcapture %}

    Although some of the punctuation is different, hopefully you can see that the concept is the same. Open the tag with some kind of parenthetical. Close it with the other side. Put your information in. Then open and close your end tag. It's that simple.

    * Nothing is always true.