Basic HTML
Computing Resources >> Tutorials >> Web Development >> Basic HTML 

What is HTML?

Basic Tags

Text Formatting Tags

Links & Images

Additional Resources

Evaluate this Tutorial

 

Basic HTML Tags

To being writing an HTML document, you can simply open up a text editor such as NotePad (on a PC) or Text Edit or BBEdit Lite (on a Mac). BBEdit Lite is available for download for free from Bevoware with your UT EID and password. After all, a web page really just consists of text, so this is all you really need. So open up a new document with your text editor and we'll get going.

First, let's talk about good coding style. The first thing you need to understand is how to next tags. What do I mean by that? Take a look at the following code example:

         <html>
            <head>
                <title>
                  My First HTML Page
                </title>
            </head>
            <body>
            This is my first HTML page.                                             
            </body>
         </html>

These are the core tags that ALL HTML documents need to have. We'll go through what each one does in a minute, but first, notice how one set of tags is nested within another. First, you open the HTML tag by writing <html>. You don't close it until the end of the document (</html>). The forward slash denotes a closing tag (e.g. </html>). Within those two tags (the opening and closing HTML tags), you nest the rest of them. And within those, you also nest other tags. For instance, take a look at the <head> and <title> tags. The <title> portion of the html code is nested within the <head> section. You always open and close tags like this. If you don't nest them correctly, your web page won't display correctly in many cases. As a general rule, you should close all your tags (there are some notable exceptions though).

You should also notice that these tags are indented in places. Technically speaking this is not necessary. However, it is good style to do it this way and it makes editing large web pages easier.

So you're wondering how these tags work, right? Well, this is the easy part of things. The <html> tag tells the browser that this is an HTML document. The <head> tag is well, the head of the document which can contain data about the document (such as the title). In many cases, the head of an HTML document will contain metadata describing the document or stylistic data (such as an embedded style sheet). The <title> tag is, you got it, the title of the document. Actually, what you put in the title of your document is what most web browsers display in the top left corner of your browser window. For example, the title of this HTML document is "Basic HTML:: Libby Peterek & Chad Hutchens::School of Information." The <body> tag is the body of the document where you will put the text that you want people to see in the web browser window. All the content you want people to see is placed within the <body> tags. That's easy enough, right? Next we'll show you some basic text formatting tags to get you started.

next section >

Watch the video
screenshot
choose format/speed
real media dial-up | broadband

Tutorial Transcript

© 2004 Chad Hutchens & Libby Peterek | iSchool | UT Austin | webmaster