3.25.14

Learn basic HTML in 10 minutes or your money back

BY JON SYU

There’s kind of a dark secret when it comes to websites that everyone knows but nobody admits openly. Even though websites are easier to edit than ever before - the reality is that CMS editors often do weird things and break for no particular reason.

A good chunk of my job as a developer is going in and fixing basic HTML issues that exist in the code. This often becomes a nuisance for clients, and if you don’t have anybody in-house with some web development experience, you’re pretty much left in the dark on what to do. If you are responsible for updating your company’s website - learning HTML will be a basic skillset that will go a long way in solving the VAST majority of your problems.


So, let’s get going on learning HTML. First off, HTML stands for Hyper Text Markup Language, which really doesn’t mean anything useful. The key word in the acronym is “Markup”, like marking up a book or when your 5 year old nephew goes to town on your walls with a box of crayons. HTML is referred to as a markup language, as opposed to a programming language, because all it does it define where things on the site are supposed to go through a series of tags. So, let’s look at some code (keep in mind, browsers read code the same as people, left to right, top to bottom):

<p>hi</p>
<p><strong>hi</strong></p>
<p style="color:red;"> hi </p>
<p style="color:red; margin-left:10px; font-size:30px;">hi</p>
<h1>hi</h1>

So, look at the code above and compare it with the result, and let’s go through this line by line.

<p>hi</p>

This is HTML on the most basic level - the and <p> and </p> are opening and closing tags. The <p> at the beginning doesn’t show up in the browser, because it’s not supposed to - the <p> tells the browser, "Hey, everything starting here until the closing tag </p> is part of the same paragraph". So the browser understands that the “hi” is a paragraph (albeit a short one), and will display it with some default styling, which includes font, size, color (black), and some padding on top and bottom of the text.

<p><strong>hi</strong></p>

This is slightly more complicated - it uses what’s known as "nested" tags. You still the opening <p> and closing </p> tags, but now there is a <strong> and </strong> tag stuck in there to. Always remember - an opening tag always affects EVERYTHING until the closing tag. In this case, the <strong> tag only does one thing Ð it bolds everything up until the </strong> tag. So, the browser sees the <p> tag first, and goes - "Okay, this is a paragraph, display it as such", but then it sees the tag, and goes "Okay, this is still a paragraph, but this text is supposed to be bold".

<p style="color:red;"> hi </p>

Okay, now we have a gibberish in the <p> tag. So, every HTML tag has a few options it’s allowed to play with, since it’s likely that people want to customize their content to look slightly different. In this case, I’m adding a parameter called "style", which allows me to change how I want this particular <p> tag to display. As you can see above, the style option lets me change stuff like the text color, which in this case, I defined as "red". When the browser sees this, it’ll go, "Okay, this is a paragraph, but wait, it looks like they want change the style of this particular paragraph so everything looks red". Keep in the mind that the closing tag never has any parameters assigned to it - it’s just for the browser to know when to stop.

<p style="color:red; margin-left:10px; font-size:30px;">hi</p>

Okay, so this is just a slightly more exaggerated form of the last example. Still messing only with the style, but now I’m adding a "margin" that pushes the text over to the left a few pixels, and increasing the font size. As you can see, there’s a semicolon after every definition - that is important for the browser to tell when one definition end and the other begins.

<h1>hi</h1>

So, here’s just an example of a different tag besides <p>. The <h1> tag stands for "Header 1". You can also have an <h2>, <h3>, and <h4> tag as well, but don’t worry about that quite yet. All you need to know is that the <h1> tag tells the browser that this text is important text, so the browser automatically stylizes it to be bigger and bolder than a normal <p> tag. You’ll see a bunch of different tags like this in your code sometimes, but all you need to know is that a tag simply affects everything in between its opening tag and closing tag.

So why know this?

If you made a change in the editor of your CMS, and things don’t look right on the page, even though you did everything right - consider switching to the source code and looking at the html. What you’ll often find is that tags are not "closed" correctly, or that HTML exists that doesn’t need to be. As you get more comfortable with what tags do what, eventually you’ll be able to troubleshoot most HTML problems yourself.

Jon Syu
written by JON SYU

Jonathan is the senior technology manager at Carbon8, with years of experience working with various nonprofits and businesses in technical, development, and marketing positions. He began his programming career at 12, when he realized that he could create games on his graphic calculator instead of learning math. At Carbon8, he is responsible for all things technical, providing direction to Carbon8's development offerings and overall strategy.

share this
iamges