Computer coding can bring a wide variety of imagery to mind. From secret codes for spies (“The pigeon has flown the coop”) to Neo finally realizing his full potential in The Matrix and seeing a stream of strange characters making up everything around him (“Whoa”), there are many kinds of codes.

As someone who’s grown up with computers, I’ve lived my whole life around various types of computer codes or languages. One of the first codes I learned was something my dad got me started on. Called MS Basic, on an old black screen with green text, it was just as simple as its name implies. Let me show you an example:

10: Print “Hello World”
20: goto 10

This simple set of commands instructs the computer to print out the words on line 10, and then go back to line 10 and do it again. I learned a lot more about this code or language over time, and more advanced programmers could do amazing things with this very basic program.

Do you need to learn to code?

If you aren’t a programmer or website designer, you probably don’t need to know a ton of coding. But some basics can come in handy for almost everyone. If you’re managing a website through a platform like WordPress or Drupal (which is our favorite at NBCG), you may run into situations where knowing some basic website code can help.

HTML (hypertext markup language) is the basic building block of websites. And in some ways, it’s pretty simple to learn. Unlike other computer languages, it’s not a series of logic commands, but a way to take normal text, just like you’re reading right now, and make a computer understand the structure.

The above chunk of text you just read is a paragraph. In HTML, you’d use the paragraph tag (<p>) to tell the computer what it is.

<p>The paragraph (or even a small bit of text, sorry, grammar purists!) goes here between the start and end tags.</p>

The <p> and </p> tell the browser where the paragraph starts and ends.

Then you could put a heading above the paragraph.

<h1>This is the title of the page</h1>

Then you can have subheadings down the page, like an <h2>.

These basic commands give you an idea of the kinds of things that are possible through HTML.

Let’s talk the basics of coding.

Every open tag has a closing tag…usually.

Most HTML tags have a start and end tag. You’re marking up text, so you need to tell the computer where things start and end.

So, a paragraph starts with the opening tag: <p>

And ends with the closing tag: </p>

Note the extra “/” slash there in the ending tag. So now the computer knows where the paragraph starts and ends. Leaving off an ending tag is often where problems happen in HTML, but they are easy enough to fix if you know what to look for.

<h1>Heading</h1>

<p>Intro for the page</p>

<h2>A subheading</h2>

<p>Some info explaining the subheading and what it entails</p>

<p>Some more about the subheading</p>

Examples of tags that don’t have a closing tag are the image tag or <img>, or a line break <br>, or a horizontal rule <hr>. Those don’t have a closing tag because they don’t go around anything else like text. But, if that’s too in-depth for you, just remember that most tags need an opening and closing, and the closing tag has an extra slash.

Tags can have attributes.

An attribute is a part of a tag that gives it a bit more info. Anchor tags <a>, the tags that make links to other pages, have an href attribute (or hypertext reference) that contains the URL of the other page. You can see the href’s value in quotes below:

<a href=”http://site.com”>the text goes here</a>

An image tag has an src (short for source attribute that tells where the image file is located — which folder and which file).

<img src=”/images/cat-image.jpg”>

The alt attribute on an image is used to explain what’s in the image (for those using screen readers or for search engines to know what’s in the image).

<img src=”cat-image.jpg” alt=”A picture of cat.”>

Here are examples of other basic HTML tags.

An unordered or bulleted list:
Each <li> is a list item.

<ul>
            <li>This is a list and this is the first item in the list</li>
            <li>Another item in this list</li>
</ul>

An ordered or numbered list:

<ol>
            <li>This is a list and this is the first item in the list</li>
            <li>Another item in this list</li>
</ol>

<p>Some tags can be put inside another tag like <em>the emphasis tag that makes this text italic</em> or <strong>the strong tag that makes this text bold</strong></p>

HTML has a partner: CSS.

HTML is the structure of a web page. It marks up the elements as to what they are, e.g., a link, an image, a paragraph.

CSS (or cascading style sheets) makes it all look good. It adds the colors, the background images and styles. It adds borders and changes the fonts.

<p>This is a basic paragraph.</p>

<p style=”color:blue”>This is a blue paragraph.</p>

Note the style=”” attribute. The info between the quotation marks defines specific things for the HTML element. There are many more things you can do with CSS but that’s where you’ll need to decide whether or not to dive more deeply into the world of coding.

Start learning HTML and CSS for yourself.

When I first started learning websites, it was back when websites were basically new. I started by looking at the code and backwards engineering it. While websites have become a bit more complex over time, the basics are still the same. And learning some HTML and CSS is a good idea, even if you’re not making a whole site yourself. Knowing how to fix common issues can come in handy.

Fortunately, there are some good sites with straightforward tutorials to get you started. You can certainly dive further in if you’ve got the time or need. But even the basic HTML and CSS lessons will get you familiar with how it works. I’d recommend starting at Codecademy. You’ll need a free account. But you’ll be able to keep track of your progress along the way.

Codecademy Learn HTML

Then dive into their CSS class

Then if you want some more, you can dive into Learn-HTML.org. They don’t have as many lessons as Codecademy but it’s a good resource.

Real talk about learning to code.

For most people, there’s no need to know everything about coding — you don’t need to deal with the ones and zeros and more complicated parts of the language. But knowing some basic HTML can certainly benefit you if you’re in charge of a website or looking to know more about the ins and outs of how computers work. Plus, I think websites may just stick around for a while!

So, dive in! You’ll soon begin to figure out how this all works. And perhaps you’ll start to enjoy it like I do.

<p>Hello world! I can code now!</p>

But if you’d rather leave the websites to the experts, we’re here to help!