Basic HTML That Will Make Your Job 4000% Easier

Published by Designzillas on March 13, 2014

View it here!

---

No, HTML doesn’t stand for “Holy Toledo, much letters!” Even though that might be what it seems like sometimes, HTML actually stands for HyperText Markup Language. That’s right, folks — HTML is a language. The native tongue of websites.

Why should you care? Well, you don’t necessarily have to understand everything there is to know about HTML. But a basic knowledge of it can really go a long way, especially if you ever have to make a quick and easy edit to content on one of your website’s pages and your IT guy is MIA. Or maybe you’re a marketer! If this is true, you really don’t have any excuse not to know basic HTML. You use it when uploading blog posts, creating landing pages, e-mail campaigns, pretty much everything. And you shouldn’t rely on your IT team 100%, they have better things to do with their time.

What you really need to understand in order to move on is this: With a combination of HTML, CSS, and a bunch of other abbreviations that don’t really matter to YOU, you can make really awesome websites. But all of that is extremely advanced, so I designed this blog to explain how to make simple edits to website text. If you’re an HTML expert, what are you doing here? Go home. If you’re a beginner, this is just the place for you! Keep reading, and when you’re finished, you should be able to recognize and even edit the HTML of simple website text.

It Doesn’t Have to Be Scary

What you’re reading right now is what HTML turns into once the web browser has read it and done what it’s been told. Don’t believe me? Try this out: Right click somewhere on this page’s screen and select “View Page Source.”

Now there’s an occasion to scream, “Holy Toledo, much letters!” But all of that gobbledegook is just how your browser interprets certain commands and turns them into the beautiful screen you see in front of you.

Guess what? You’ve probably dealt with HTML somewhere if you have any experience with a CMS (content management system). For example, when you edit a blog post you deal with a WYSIWYG — literally, “what you see is what you get.” WYSIWYGs make it easier for the HTML-challenged to do fun things to websites. But there are some things that you just can’t do in a WYSIWYG, and sometimes they can mess everything up. It’s easier if you understand what’s going on in the HTML behind it all.

“BUT HOW DO I SEE ALL THE CODE!?” Somewhere in your WYSIWYG, there is an option to switch to the source view. In Drupal, there is a button that says “Source.” Click that button, or the appropriate one depending on your CMS. All of your normal looking text should now turn into code — how fun! You are now seeing what the browser sees.

For brevity’s sake, here are some definitions and essential bits of information before I teach you the good stuff:

• HTML stands for HyperText Markup Language, remember?
• HTML is made up of “tags” that contain “elements,” or commands that tell the browser what to show you
• Tags always come in pairs; there is a start tag <something here> (at the beginning of the line of code) and an end tag </something here> (at the end, always started off with a forward slash)
• There are a lot of possible tags, elements, attributes, etc…

BUT, let’s start with these:

Headers

All in all, there are 6 “header” tags. They are as follows:

<h1> THIS IS HEADER 1 </h1>
<h2> THIS IS HEADER 2 </h2>
<h3> THIS IS HEADER 3 </h3>
<h4> THIS IS HEADER 4 </h4>
<h5> THIS IS HEADER 5 </h5>
<h6> THIS IS HEADER 6 </h6>

Which results in:

THIS IS HEADER 1

THIS IS HEADER 2

THIS IS HEADER 3

THIS IS HEADER 4

THIS IS HEADER 5

THIS IS HEADER 6

As you can see, each of the header tags makes the text written inside of them look different. Of all the headers, <h1> is the most important and should really only be used once on your page. When search engines read the content on your page, they will interpret the text inside of the <h1> tag as a description of what is on the page. From <h1>, the tags descend in importance. But remember, only use these tags to display headings. Don’t use them for emphasis, there are formatting tags for that.

Paragraphs

If you’re playing around in the source, you might notice that you can’t just write paragraphs like you normally would in a WYSIWYG. The browser will not recognize the space you put between paragraphs unless you add in the very important <p> tag. The <p> tag lets your browser know that you want to start a new paragraph, and it puts a space between the two so you don’t just have one giant paragraph all the way through. And as always, don’t forget to close the tag at the end with a </p>!

This is what your paragraphs will look like 
if you don’t put a paragraph tag in it. 



<p>This is what your paragraphs will look like</p>
<p>if you DO put a paragraph tag in it.</p>

This is what it will look like:

This is what your paragraphs will look like if you don't put a paragraph tag in it. 

This is what your paragraphs will look like if you DO put a paragraph tag in it.

Links

If you’re a marketer, everyone tells you that it’s a good idea to add some links to your blog posts and content, even at the very least to source back to the photographer of that great cow picture you used.

Links have designated tags as well: the <a> tag. But bonus! Tags for links also require the “href” attribute to be included. Don’t worry, it’s not confusing. It looks like this:

<a href="URL GOES HERE"></a>

The “href” attribute tells the browser where to send you when you click on the link. Now, you may notice that links don’t look like that ugly URL that you pasted into the tag. That’s because they use anchor text — this is the sentence, word, or phrase that is clicked on, or the visible part of the link. It goes between the start tag and the end tag:

<a href="URL GOES HERE">INSERT YOUR ANCHOR TEXT HERE</a>

Let’s check if out in action:

<a href="http://www.grumpycats.com/">This is Grumpy Cat and she is a beautiful cat.</a>

This is the result:

This is Grumpy Cat and she is a beautiful cat.

Images

Images work very similarly to links. They require the “img” tag, and a “src” attribute:

<img src="LOCATION OF IMAGE GOES HERE" />

Only difference here? They don’t require an end tag BUT they do require that you end the tag with a forward slash. Another thing that’s important about images? It’s a good idea to include an “alt tag.” This is good for any disabled users, broken images, and search engines. Obviously, search engines cannot physically see your image, so the alt tag lets them know what the photo is depicting. If an image breaks, the alt tag will show up instead, letting the user know what image SHOULD have shown up. For your disabled users using screen readers, the alt tag allows the readers to describe what an image on a page is. An alt tag is just another attribute added into the original tag:

<img src="LOCATION OF IMAGE" alt="This is a description of what the image is." />

<img src="http://placekitten.com/400/250" alt="This is a beautiful cat" />

Which results in:

See? You just add another attribute into your “img” tag. There are many other attributes that can be added, but we won’t get into that just yet.

Formatting

I figured I would end this post on a light note — formatting is pretty simple. This refers to bold, italic, underlined, and deleted text, as well as superscript and subscript. Look how fancy all that looks! Formatted text can really add some personality and extra emphasis to any content you are writing. Here’s what it looks like:

<b>This text is bold.</b>
<i>This text is italic.</i>
<u>This text is underlined.</u>
This text has <sub>subscript.</sub>
This text has <sup>superscript.</sup>
<del>This text has deleted content.</del>

Which results in:

This text is bold.
This text is italic.
This text is underlined.
This text has subscript.

This text has superscript.

This text has deleted content.

That’s simple enough, right?

There’s So Much More Where That Came From

Hooray for you! Now you know how to do very basic HTML edits to your website content. There is MUCH more where that came from, but we’ll get to that some other time. Rome wasn’t built in a day, so calm down.

Want to practice on your own? Here are some great resources, free and paid, that you can use to enhance your HTML skills. Who knows? Maybe you’ll be creating your own websites one day. Practice makes perfect!

• W3 Schools
• Codeacademy
• Code School
• Code.io
• Treehouse

But really. HTML is a great language to understand. Technology is our future and we should understand how to talk to it. It might also help you one day when we are inevitably ruled over by the computers. You’ll know how to beg for mercy.