The Basics of HTML

Ricky Telg, Laura M. Fischer, Kevin Kent, and Tracy Irani

This publication on learning HTML basics is the third of a four-part series on writing and designing for the web. This series also covers how to write and design a basic web page, understand the difference between good and bad websites, and integrate the basics of HTML.

The Language of the Web

HTML stands for hypertext markup language, which is the programming language or code used to create pages on the web. Originally, programmers who knew code typed out the basic HTML codes into a text editor, like Windows Notepad or Winpad, and saved the files with an .htm or .html extension to create a web page. These days, web developers use HTML editors (referred to as web-editing software programs), which automatically generate the HTML code, or they use cascading style sheets, also known as CSS. CSS styles were developed in the 4.0 version of HTML as a way of defining how to display HTML elements in a web browser. CSS is beyond the scope of this factsheet, but it helps to know that there are multiple ways to code a Web page. The current version, HTML5, includes features for natively handling multimedia and graphical elements.

HTML codes are sometimes called tags because the actual code must be placed inside a container tag or bracket (see Table 1 for some examples and explanations of common HTML tags). Spaces and returns do not matter, as HTML will not read them. Commands are not case sensitive, but there are rules that must be followed in order to have the pages display properly. The tags are often nested, so, for example, all the code for a given page must be placed inside the <html></html> tag. This is read as "open html" and "close html." Anytime you see a slash mark inside the brackets ( </> ) it means "close the tag." Inside this tag, the head information—which gives the web page a title that shows up in the browser display—must be placed inside the <head></head> tag, while everything displayed on the page itself must be contained in the <body></body> tag. HTML format tags can express attributes such as font color and style, can be nested inside of each other, and can be used to format how the page looks or to insert a graphic of a particular size.


Given the option to use a web-editing program, you may wonder why anyone needs to learn to use HTML. In fact, understanding the basic structure of a web page is useful, and when things go wrong, it is often much easier to look at the code to find the problem and adjust accordingly. The leading web-editing programs, like Adobe Dreamweaver, let you display both the code itself and the actual page at the same time to make it easier to toggle between the code and page view. These programs can also generate CSS, which include specialized code that allows you to define and create the formatting and design of a web page with great precision.

Using Web-Editing Programs

Using web-editing programs, like Adobe Dreamweaver, can save time and produce attractive websites. With web-editing software, you do not have the control that web designers who know CSS (cascading style sheets) or HTML coding have, but web-editing programs allow you to create web pages quickly. You can also find free editing programs on the web, sometimes called "shareware" because users share the software for free.

Web-editing programs let you make pages, insert images and text, create links and tables, add a background image or color, and publish or upload the site to a server so others can access it by typing the web address in their browser. The following steps explain how to make a basic site.

  1. Create a defined site. To create a defined site, first create a folder somewhere on your hard drive. Then, within that named file folder, create another folder. This one should be named “images.” Place all of your photographs and graphics you want to use for the site in this folder. Once you have done this, you can then use the web-editing program to define the site so that all of the pages you create will be saved to the original file folder. You will insert images on your Web pages from the photographs that are saved to your images folder. Note that many online programs allow you to create a site completely online, without creating a defined site on your computer. However, for high-end programs, such as Adobe Dreamweaver, maintaining a “defined site” on a local computer from which you can then upload is a good practice.
  2. Establish a home page. After you have created a defined site, you can start creating web pages in the software program. Your main page is your home page. This is the page your web viewers will access first. The file name that you use to save your home page should be "index.html" or "index.htm." It should not be "homepage.html" or "firstpage.html" or anything else like that. Only use "index.html" or "index.htm" because web browsers have been set up to recognize "index" to be a home page. When you visit a website, the home page's actual web address hides the "index.html" portion of the address, so you do not have to type it. For example, if you visited CNN's website, the actual address is "," but because the Web browser recognizes "index.html" as the home page, all you have to type is "" If you save your home page as something other than "index.html," you will have to type the entire web address—like ""—in order to access the home page.
  3. Create your home page and its navigation. Create your home page and its navigation first. Spend time designing this page and then use it as a template for other pages on your site. Again, please note that many online programs offer templates that create navigation buttons automatically. In naming your web pages, you should never use capital letters or use spaces between letters. You may use underscores if you want to put in two words, but never leave a space between letters. A space between two words in HTML is actually the code "20%," so if you see this in a web address, you will know that a space was included in the actual address.

Most HTML editors have a publish or upload function, also called FTP, or file transfer protocol. Once your pages are all created and linked to each other, you can use this function to upload your site to a server.

If you want to develop a website but do not want to learn HTML code or use a Web-editing program, other options include web-based drag-and-drop builders or no-code platforms.  A website template gives you an already coded design with appropriate images, links, and style into which you can insert your own information. More sophisticated websites utilize content management systems, such as Wordpress,  allowing you to manage content within a template and use tools like blogs, discussion forums, and mailing lists on your website. An advantage of using a template is that it will have built-in standards, such as what is required to make a website useable by someone with a disability. Usability refers to the general ease or difficulty your users have in navigating your website and finding what they need. Creating a website from an existing template like those offered by web-based builders and content management systems helps ensure that your website meets usability standards.

Figure 1. A WordPress blog page.
Figure 1.  A WordPress blog page.
Credit: UF/IFAS Blogs


Figure 2. The HTML(highlighted) that generates the blog page in Figure 1.
Figure 2.  The HTML(highlighted) that generates the blog page in Figure 1.
Credit: UF/IFAS Blogs



Telg, R. & Irani, T.A. (2012). Agricultural communications in action: A hands-on approach. Delmar: Clifton Park, NY.

Table 1. 

Common HTML tags.

Tag Type


Used for...


HTML Code Tag

<html> </html>

marking the beginning and end of each HTML coded page




descriptive information




putting a title in the top line of the Web page




all text, graphics, and photos

<body></body> must be between these two HTML tags on a page. The only tag that comes after the close body tag </body> on the page is the close HTML tag </html>.



putting lines in on a web page

You do not have to have a "close paragraph" tag </p>. This is the only tag that does not require a "close" tag.

Heading sizes for text


creating different heading levels

The smaller the number (#), the bigger the heading (1-6).


<a href>

linking to other web pages and making your web pages interactive

<a href> stands for anchor hypertext reference. Put quotation marks around the linked page file you are referencing. You also need a "close anchor" </a> to close the hypertext link tag.

Example: <a href="gallery.htm">Gallery Images </a> means that the words "Gallery Images" will be hyperlinked to the page "gallery.htm."


<img src>

inserting graphics

You have to use an image source <img src> tag to insert graphics. Example: <img src="balloon.gif"> means that the image (graphic) "balloon.gif" will be inserted on your web page.

Linking a graphic

<a href> and <img src>

linking an image to another page

Do not forget the </a> (close hyperlink) tag.) Example: <a href= "index.htm"><img src= "ballon.gif"></a>

means that the image "balloon.gif" will be hyperlinked to the page "index.htm."


<body bgcolor="#colorvalue">

setting the background color for the page as a whole

You can have different colors for text and backgrounds. Certain word colors or numeric combinations can be typed in to represent different colors. Colors are explained in more detail later in this chapter in the "Web Color" section.

Example: <body bgcolor="white">

<body bgcolor="008080"> (for dark cyan)

<body text="#colorvalue">

setting the text color

<body link="#colorvalue">

setting the unvisited link color

<body vlink="#colorvalue">

setting the visited link color

Unordered lists

<ul></ul> and <li>

creating bulleted lists

You must put <li> before each line of the list.

This is an unordered list:


<li> First line

<li> Second line

<li> Third line

<li> Fourth line (add as many as necessary)


The unordered list above would look like this on your Web page:

• First line

• Second line

• Third line

• Fourth line (add as many as necessary)

This is an ordered list:


<li> First line

<li> Second line

<li> Third line

<li> Fourth line (add as many as necessary)


An ordered list, like the one above, would look like this on your Web page:

1. First line

2. Second line

3. Third line

4. Fourth line (add as many as necessary)

Ordered lists

<ol></ol> and <li>

creating numbered lists



making text bold




putting text in italics


Block quote


putting text into a block quote (indenting text on both sides)


Publication #AEC568

Date: 2021-11-15
Agricultural Education and Communication

Related Topics

Fact Sheet

About this Publication

This document is AEC568, one of a series of the Department of Agricultural Education and Communication, UF/IFAS Extension. Original publication date August 2015. Revised November 2021. Visit the EDIS website at for the currently supported version of this publication.

About the Authors

Ricky W. Telg, professor, Department of Agricultural Education and Communication; Laura M. Fischer, assistant professor, College of Agricultural Sciences and Natural Resources, Texas Tech University; Kevin Kent, lecturer, Department of Agricultural Education and Communication; and Tracy Irani, professor, Department of Family, Youth and Community Sciences; UF/IFAS Extension, Gainesville, FL 32611.


  • Ricky Telg