HTML Tags

A HTML page is built using tags so first I need to explain what a tag is. A tag is a command in a web page that tells the browser to do something. Tags are inclosed in less than (<) and greater than (>) signs. An example of a tag is <html> which you will learn below.

Open up Notepad, Notepad++, or any other plain text editor and type or copy this in it.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

Code explained line by line

We have just written a minimalistic Hello World! HTML program (markup). Let's analize this code line by line.

<!DOCTYPE HTML>	The very first thing is the doctype declaration of the document. In this case HTML5. You should always use this.
<html lang="en">	All this is doing is saying that this is the start of a HTML document. Additionally it specifies the language of the document, which is English.
<head>	Marks the start of the part of a HTML document called the head. This section is not visible on the webpage but it carries important information about the document.
<meta charset="UTF-8">	Declaration of the character encoding: UTF 8
<title>My First Web Page</title>	The page title can be seen in the browser window tab and when you bookmark the site in your favorites. You can put anything you want to in between the title tags. We also see something new here too. The last tag </title>, means that the tag title now ends. You can end any tag by putting a backslash (/) after the less than sign (<).
</head>	Closing of the head section
<body>	We begin the body section. Here is all the stuff is that will be visible on the page.
Hello World!	The part visible in the web browser
</body>	Closing body tag.
</html>	Ending the document

Press Ctrl+U (in Google Chrome) and you can see the HTML code behind any webpage. Open a few web sites and check their HTML code.

Open your HTML document in a web browser

html tags hello world program The next thing to do is you have save your first web page to your hard drive. Click on File then Save. Change the .txt extension of your new file to .html, for example index.html. You might want to make a special folder to keep all of your web page stuff all organized.

Make sure you save all of your web page files something.html otherwise they will be text documents, not web pages. Click on Save. Go to the folder and open it. Double click on the file you just made and it should look something like this.

Congratulations! You have made your first local web page showing a static message in the web browser!

Using HTML Tags

I will now teach you how to make text underlined. Use the online HTML Editor to test these codes.

<u>Check this out!</u>

As you can see when we put the <u> tag, it begins the underline. Where the colosing </u>, tag is it ends the underline. Again if you put a backslash (/) in a tag, it closes that tag.

We are also going to make some text bold.

<strong>Check this out!</strong>

We can even make text in italics.

<em>Check this out!</em>

Nested HTML Tags

You can even put all 3 tags at once!

<b><u><em>Check this out!</em></u></b>

Since we are not using more than one tag at once we run into a thing called Nested Tags. If they aren't they can case some browsers to not display your page correctly and that is called Overlapping Tags.

This is an example of Nested Tags.

<strong><em><u>Hi!</u></em></strong>

Now an example of Overlapping Tags.

<strong><em><u>Hi!</strong></em></u>

Can you see the difference? A good rule to follow is what ever tag you start first, you end last and what ever tag you start last, you end first. Still confused? No worries, you will get used to it as you keep practicing.

Singleton HTML tags

We learned that every HTML tag needs to be closed once opened: <tagname>...</tagname>

There are a few special elements which don't need a closing tag because they never include anytihing else. For example the <hr /> horizontal line never contains a paragraph, images or anything else. We call these Singleton Tags and the closing slash is written like this: <tagname attribute="parameter" />

A list of singleton HTML tags: area, base, br, col, embed, hr, img, input, link, meta, param, source.

List of all HTML tags

Find listed all HTML Tags with examples. This will help you find what tags to use and which ones to avoid because they're outdated.

An example search for the Table tags.