5 Minute HTML Tutorial

For a more comprehensive tutorial, see the full length tutorial.

This HTML Tutorial is for beginners. It teaches you HTML from the ground up - starting with the basics. Coding HTML is actually quite easy, which this tutorial will show.

This HTML tutorial is separated into the following sections:

What does HTML stand for?
What is HTML?
Getting started

Create an HTML file
Type some HTML code
View the results in a browser
Explanation of the code

Create some common HTML elements
- Comments
- Headings
- Bold/italic text
- Hyperlinks
- Images
- Lists
- Tables
- Forms
- End result
More HTML elements
Summary
Next steps

What does HTML stand for?

HTML stands for HyperText Markup Language.

What is HTML?

HTML is a markup language used to create web pages. The web developer uses "HTML tags" to format different parts of the document. For example, you use HTML tags to specify headings, paragraphs, lists, tables, images and much more. HTML is a subset of Standard Generalized Markup Language (SGML) and is specified by the World Wide Web Consortium (W3C).

OK, lets get straight into it.

Getting started

When you create a web page you will usually do something like this:

Create an HTML file
Code some HTML
View the result in your browser
Repeat the previous 2 steps until you're satisfied with the result

Create an HTML file

An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed to a .txt extension).

Open up your computer's normal plain text editor (this will probably be "Notepad" if you're using Windows or "SimpleText" if you're using Macs). You could use a specialized HTML editor such as DreamWeaver or FrontPage if you prefer.
Create a new file (if one wasn't already created)
Save the file as html_tutorial_example.html

Type some HTML code

Type the following code:


<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>

View the result in your browser

Either...

Navigate to your file then double click on it

...OR...

Open up your computer's web browser (for example, Internet Explorer, Firefox, Netscape etc).
Select File > Open, then click "Browse". A dialogue box will appear prompting you to navigate to the file. Navigate to the file, then select "Open".

Explanation of code

OK, before we get too carried away, I'll explain what that code was all about.

We just coded a bunch of "HTML tags". These tags are what tells the browser what to display and where. You may have noticed that for every "opening" tag there was also a "closing" tag, and that the content we wanted to display appeared in between.

All HTML documents should at least contain all of the tags we've just coded and in that order. The <html> tag is kind of a container that all other tags sit inside. The <head> tag contains information that is not normally viewable within your browser, although the <title> tag is an exception to this. The contents of the <title> tag are displayed in the browser's title bar (right at the very top of the browser). The <body> tag is the main area for your content. This is where most of your code will go.

Common HTML elements

There are many HTML elements that can be used in a web page. Some of the common elements are:

Comments
Headings
Bold/italic text
Hyperlinks
Images
Lists
Tables
Forms

This section of this HTML tutorial will incorporate all of the above elements.

Using the previous file html_tutorial_example.html, add the following code anywhere between the <body> tag and the </body> tag.

Comments in HTML

Comments are a part of the HTML code and is used to explain the code. This can be helpful for other HTML coders when trying to interpret someone elses code. It can also be useful for yourself if you have to revisit your code in many months, or even years time. Comments aren't displayed in the browser - they are simply there for the programmer's benefit.

You write comments like this:

Comments always start with . This tells the browser when a comment begins and ends.

Headings

There are 6 levels of heading, specified with the following tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (with h1 being the largest and h6 being the smallest):

Type this HTML code...	`<h1>HTML Tutorial Example</h1>`
It should result in something like this in your browser...	HTML Tutorial Example

Bold/italic text

For bold text, use the <b> tag, for italic text, use the <i>

Type this HTML code...	`<p>This <i>HTML tutorial</i> example is beginning to get <b>exciting</b></p>.`
It should result in something like this in your browser...	This HTML tutorial example is beginning to get exciting.

Hyperlinks

You create hyperlinks using the a tag:

Type this HTML code...	`<p>I'm starting to learn more <a href="http://www.quackit.com/html/tags">HTML tags</a>!</p>`
It should result in something like this in your browser...	I'm starting to learn more HTML tags!

Images

To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor and save them in the correct format. To embed the image into your web page, use the <img> tag, specifying the actual location of the image.

Type this HTML code...	`<img src="http://www.quackit.com/pix/smile.gif" width="100" height="100" alt="Smile" />.`
It should result in something like this in your browser...

Lists

You can create different types of lists in HTML. You create ordered (numbered) lists using the ol tag in conjunction with the li tag. You create unordered (unnumbered) lists using the ul tag, also in conjunction with the li tag. You create definition lists using the dl tag in conjunction with the dt and dd tags.

Lets look at ordered lists and unordered lists:

Type this HTML code...


<!-- HTML Ordered List -->
<ol>
<li>Read HTML Tutorial</li>
<li>Write HTML Code</li>
<li>Publish Website</li>
</ol>
<!-- HTML Unordered List -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

It should result in something like this in your browser...

Read HTML Tutorial
Write HTML Code
Publish Website

HTML
CSS
JavaScript

Tables

You create tables using the table tag, in conjunction with the tr and td tags. There are other tags you can use with tables but these are the fundamental tags.

Type this HTML code...


<table border="1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

It should result in something like this in your browser...

Table cell 1

Table cell 2

Forms

You create forms using the HTML form tag, in conjunction with other tags such as the input tag. There are other tags you can use with forms but these are the fundamental tags.

Type this HTML code...	`<!-- HTML Form --> <form> Name: <input type="input" name="First Name" value="Type your first name..."> <input type="submit"> </form>`
It should result in something like this in your browser...	Name:

End result

Once you've completed the above steps, your code should look something like this:


<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
<h1>HTML Tutorial Example</h1>
<p>This <i>HTML tutorial</i> example is beginning
to get <b>exciting</b></p>.
<p>I'm starting to learn more <a href="http://www.quackit.com/html/tags">HTML tags</a>!</p>
<!-- HTML Image -->
<img src="http://www.quackit.com/pix/smile.gif"
	width="100" height="100" alt="Smile" />
<!-- HTML Ordered List -->
<ol>
<li>Read HTML Tutorial</li>
<li>Write HTML Code</li>
<li>Publish Website</li>
</ol>
<!-- HTML Unordered List -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- HTML Table -->
<table border="1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
<!-- HTML Form -->
<form>
Name: <input type="input" name="First Name" value="Type your first name...">
<input type="submit">
</form>
</body>
</html>

More HTML elements

So far, we've only covered some of the more common HTML tags. There are a large number of HTML tags available to assist you in creating your web pages. For example, you can create frames using the frameset tag in conjunction with the frame tag. You can create an inline frame using the iframe tag. If you require advanced functionality, you can include a script to your HTML page (such as JavaScript) using the script tag.

For more information, see the complete list of HTML tags.

Summary

We started this HTML tutorial by creating an HTML file and saving it with an .html extension. We then added some HTML code to the file, then viewed the result in our web browser. We then added some commonly used HTML elements such as headings, images, lists, tables etc. Finally, we learned what tags can be used to add further elements to our page such as frames, inline frames and scripts.

Next steps

You can build on the knowledge covered in this tutorial to add more advanced features to your web pages. I recommend the following:

Read the full length tutorial
View the complete list of HTML tags
Check out our HTML Help page for suggestions to common
Learn about Cascading Style Sheets (CSS) with our CSS tutorial
View the complete list of CSS properties

Also, check out the massive collection of professionally designed website templates. These can help you get a website up and running in no time. Then, you can customize it using your knowledge of HTML!

HTML