9 Tips for Learning HTML Basics

If you’ve ever tried to learn a new language, you know that the most challenging aspect is determining how the words and sentences are structured and work together to create proper syntax. HTML is similar, and just as with a foreign language, you must first start learning HTML basics before you can move to more advanced coding.

Even if you don’t plan to design websites for a living or you want to use an out-of-the-box solution, such as Wix or WordPress, learning HTML basics allows you to tweak standard designs to match your needs. A customized website simply looks more professional and put together than a cookie-cutter template.

Out of the websites that use HMTL, about 88 percent of them use HTML5. There is an upward trend in the number of websites overall using HTML. As a designer, it’s smart business sense to add learning HTML basics to your wheelhouse. Here are nine tips to help you learn some HTML basics you’ll use often:

1. Elements

One of the first things to learn about HTML is that it is made up of elements that all work together. Just as when you learn any language, you must first learn the order to put elements in and how they work together to create sentences or commands.

For the purposes of knowing how to structure an HTML element, you need to know what it’s made up of. You’ll need an opening tag, content and a closing tag. Opening and closing tags are enclosed in angle brackets, or < and >. The closing bracket starts with an angle bracket, a forward slash, the tag name and a closing angle bracket.

Example:

<p>This is my website.</p>

Note that the tag is for a paragraph and that there is an opening tag and a closing tag.

2. Text

One of the most basic things you can create with HTML is simple text on a page. Fortunately, this is easy to code. Now that you know the language of HTML, you need to know what tags to use to create different types of text. Let’s stick with the basics for now. Further down the page, we’ll talk about how you can change the font and its size.

You’ve already learned the paragraph tag above. Use this to set text into its own paragraph or separate blocks of text into paragraphs, putting each paragraph within its own HTML element.

• Bold — <b>Text here.</b>. Can also use <strong> tag.
• Italics — <i>Text here.</i>. Some people use <em> tag or emphasis tag.
• Underline — <u>Text here.</u>.

You’ll notice that there are variations, such as using either bold <b> or strong <strong> tags to essentially do the same thing. The differences in using either are negligible for basic purposes, so use whichever you’re most comfortable with.

3. Nesting Commands

Another part of learning basic HTML is determining how to nest different commands together. For example, let’s say you want to type a paragraph, and within that paragraph you want to italicize one sentence and bold a couple of words. Here is how that would look:

<p>This is a paragraph. <i>I would like to italicize this sentence.</i> However, I don’t want to italicize all the sentences in <b>this</b> paragraph. I would like to create a couple of <b>bold</b> words.</p>

Or, you could write it like this:

<p>This is a paragraph. <em>I would like to italicize this sentence.</em> However, I don’t want to italicize all the sentences in <strong>this</strong> paragraph. I would like to create a couple of <strong>bold</strong> words.</p>

Both ways work the same, but keep in mind that <b> and <i> is much quicker to type. There are proponents on both sides of this issue, so go with what works best for you.

4. Always Close Your Tags

In the midst of writing code, it’s easy to forget a forward slash or closing angle bracket. When you do, your page won’t look right. For example, you may have wanted a single word bolded and the entire page is in bold. Go back and look for the beginning of the issue. In the case of a page being bolded, do a search through your code for <b> and then carefully look to see where the closing tag is, which should be </b>. You’ll find that you’ve missed some portion of that element and can easily fix the issue at hand.

5. Basic HTML Structure

Now that you know how a sentence and paragraph are put together in HTML, let’s step back and take a wider view of HTML page structure. Each page in HTML is made up of specific elements. It helps to learn a very basic code that shows you the structure. We’ll break it down and talk about what each portion does.

<html>

<head>

<title>website name</title>

</head>

<body>

website content

</body>

</html>

• Your HTML tags tell the user’s browser the language of the webpage. In this case, the page is in HTML.
• The head tag is where you place elements such as meta tags and things that work behind the scenes to tell search engines what your site is about. They don’t technically appear on the actual page for the site visitor to view.
• The title tag is similar in that tells the search engine what the title of your website is. This is also what your visitor will see in the search engine bar, and is particularly important if the person has a number of tabs open so they can easily navigate back to yours.
• The body is what site visitors see when they land on your page. This is where your paragraph that you learned how to write above would live, along with images, hyperlinks and any other content you want site visitors to see.

Make sure every single tag is closed before finishing the code for a page.

6. Creating Hyperlinks

Most webpages have at least a few hyperlinks on them, even if only to another page on that website. Knowing how to create hyperlinks is a basic skill you’ll need when coding in HTML. Here is how a hyperlink is formed in HTML:

<a href=”URL”>Text</a>

The command a href is a hyperlink command. However, you also have to input the actual hyperlink between the quotation marks, and then close that with an angle bracket and share the text that will appear as the hyperlink. Finally, you must close the entire hyperlink with a closing command. Here is another example with a sample HTML:

<a href=”http://sampleurlhere.com>Visit Sample URL</a>

Now, try it with your own URL and see if you can formulate a hyperlink command that works.

7. Adding Images

Images are another basic element on a webpage. Adding images doesn’t have to be difficult, but is a little more involved than some other types of HTML coding. A basic image tag looks like this:

<img src=”url” alt=”text”>

That will put the image on the page and place alt text inside. Of course, there are many other tags you can nest inside that basic tag to define the size of the image and other attributes.

In the basic tag listed above, img src stands for image source. This the URL where the image lives on your website. An example of this address is http://sampleurlhere.com/sampleimage.jpg. The alt text is simply a description of the image itself. This helps those who have images turned off or those with reading devices, such as vision-impaired people.

Other tags you can utilize to further define your images include:

• Align = “alignment” — Use left, right or center
• Width = “define by pixels”
• Height = “define by pixels”
• Border = “size of border thickness in pixels”
• Vspace = ”space above and below image”
• Hspace = ”space to each side of image”

Whenever you’re defining size, you typically will use pixels, so for width, you might choose 250 pixels. The command would then look like this:

<img src=”http://sampleurlhere.com/sampleimage.jpg” width=”250” alt=sample image with blue background>

Note that you don’t have to define both height and width. You can if you’d like.

8. Creating Advanced Text Elements

There are times when you’ll need to know some additional details for creating text on a page, such as if you want to make some of the text red or blue. You might also wish to use a larger size for some elements or a specific font for headers. If you’re using a content management system, such as WordPress, then you may only need to know how to choose a specific header and use the WYSIWYG — what you see is what you get — environment. However, knowing the actual coding is still helpful when making adjustments to a stylesheet or for customized solutions.

If you want to add additional features to your text, you’ll need to add those commands inside the basic text commands you learned above. You do this in a similar way to how you added bold or italic text.

In order to specify a color for text, you simply need to add the tag to indicate that. Let’s say you want some of your text red. The tag for this command is within the text elements. First, understand that HTML5 does not support the font command, so it’s probably best to just get used to using CSS commands instead. It’s just a matter of using different words.

In basic HTML, you write the code like this: <font color=”blue”>Sample text.</font>. However, for CSS, you change it to <p style=”color:blue”>. You will need to define the exact color within your stylesheet or choose a theme that has it defined for you.

9. Making Lists and Tables

It isn’t quite as common to use lists and tables. However, these are still basic skills you’ll need if you want to neatly organize lists or set things off with bullet points. The coding for a list looks like this:

<ul>

<li>List item #1</li>

<li>List item # 2</li>

</ul>

The command for bullet points or list is simply <ul>. Note how the command is closed at the end of the list. The command for a list item is <li>. You close this command at the end of each item and add as many <li> commands as needed to create the length of list desired.

A table command is a bit different and requires more definition.

<table>

<tr>

<td>first row, cell 1</td>

<td>first row, cell 2</td>

</tr>

<tr>

<td>second row, cell 1</td>

<td>second row, cell 2</td>

</tr>

</table>

The command to start a table is <table>. Again, note that the command is closed at the end of the table.

The <tr> command defines a row.

The <td> command defines a cell within that row.

There will be one or more cell commands within a command for a row, as above with two cells.

Once you’ve completed the cells across for the row, you close the row with </tr>.

To start a second row and so on, begin a new row command with <tr>.

Repeat.

Basic HTML

Those are the basics of HTML and are enough that you could easily edit a page in HTML code or define some basic code on your own. Obviously, there are many other elements to coding that you’ll need to learn if you want to code professionally, but starting with the basics gives you a nice foundation on which to build.