The 10 Basic HTML Codes You Should Know

Business Owners

The 10 Basic HTML Codes You Should KnowHTML is the basic building block of the internet – the most basic way we communicate to a computer what we want to show up on the screen.

And the best part? It’s far easier than you might expect! Here are the 10 most basic HTML codes you should know how to recognize.

Beginning and Ending Tags (ie. Grammar)

Before we get into the actual code, you’ll need to know about the HTML language. Anytime you’re talking/coding in HTML, you add it in between the less than “<” and greater than “>” symbols.

For example:

<code>     </ending code>

The code above has what’s called an opening and closing tag. The closing tag is almost always exactly the same code, just with a “/” at the beginning.

<i> This text is in between tags </i>

The code above stands for italicized. The opening tag is simply an “i” and the closing tag is the same, but with a “/” before it. The text in between the tags is then made italicized and would be seen like this:

This text is in between tags

So now that you know the basics, here’s the top 10 HTML tags you should know!

1) Links

Links are one of the most popular items seen in HTML. It’s a fairly simple tag – just an “a”:

<a>Link Title</a>

Now that might tell the computer that the “Link Title” is a link, but it doesn’t tell it where to go. So we add an attribute:

<a href="http://kimjoyfox.com">Link Title</a>

Now the computer knows, by using the “href” attribute, where to send the user.

2) Iframes

You’ll see iFrames primarily when you embed Youtube videos. The code you’ll copy will look something like this:

<iframe width="560" height="315" src="//www.youtube.com/embed/5mJ08-pyDLg" frameborder="0" allowfullscreen></iframe>

Above you’ve got the basic tag “iframe” and then quite a few attributes including “width”, “height”, “src” (source), “frameborder”, and “allowfullscreen”. And at the end, the closing “/iframe” tag.

3) Bold Text

To make some text bold, we’ll use a tag much like our example italicized tag.

<strong>This text bold</strong>

4) Head

Head, unlike the other tags, deals with the layout of the page. On every website you have the head and the body. The body is for actually displaying content, while the head keeps information that’s loaded but not just seen.

The head tag is extremely simple:

<head></head>

5) Body

And of course we need to mention the body tag now:

<body> </body>

While the head tag doesn’t have attributes, the body tag can. Some of these aren’t supported in the most modern version of HTML (HTML5), so be careful!

6) Images

In HTML, we tell the computer to show an image by this code:

<img src="" >

Unlike most, this is one of those HTML tags that doesn’t have a closing tag. While the tag itself is “img”, the attribute “src” (source) tells the computer where the image is found. You can also add additional attributes like “width” and “height” etc.

<img src="http://kimjoyfox.com/category/programmers/" width="253" height="88">

7) Paragraph

The paragraph is perhaps the most common HTML tag of all.

<p></p>

There’s something very important to remember about this tag. Paragraph tags usually have margins above and below that give it the appearance of “skipping” a line. For example, the difference between this line and the next one.

This is the next one. On the internet, if you hit the ENTER on your keyboard, it translates that automatically to a paragraph.

8) Line Break

The line break, unlike the paragraph, forces the sentence onto the next line, but doesn’t add that extra skipped line:

<br>

This is another tag that doesn’t have a closing tag.
To start this sentence on the next line, I hit SHIFT ENTER. That automatically creates a line break, not a new paragraph.

9) Headings

If you’re trying to get higher in google, heading tags are very important. There are six of these, each with a closing tag:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

These are like an outline for when Google reads your page. Heading 1 is the most important, and so forth. As a side note, you should only have one Heading 1 on the page.

10) Lists

Finally, HTML has two types of lists: a numbered list and a bullet list.

The first one, a numbered list, is created using the following tag:

<ol>
<li>item 1</li>
<li>item 2</li>
</ol>

The bullet list is created using this:

<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

Notice that the only difference between the two are the opening and closing tags – “ol” verses “ul”. Each item in the list should also be enclosed between the opening and closing “li” tags. Like many tags, these can also have additional attributes.

Summary

Congratulations! You now know the basic HTML tags you’ll need to get you through working on the internet; whether that includes WordPress, another CMS, or even Tumblr.

 

Comments