Web|Loyola University Chicago

Web

searchform
This siteLUC.edu

HTML Tags

 

What is HTML?

HTML (Hypertext Mark-Up Language)is a coding system that formats documents so they can be viewed on the web. Web pages are made of text files, with extra HTML codes placed in and around the text. You can use HTML to specify the appearance of your text (increasing the size of a header, for example), or to insert elements such as tables, graphics, or links to other Web pages. When someone wants to see a page you've created using HTML, they use a Web browser, such as Netscape or Internet Explorer, which interprets the HTML codes and renders the file as a formatted page.

This document is intended to be a quick reference to basic HTML codes. Once you have read this document, try Creating an HTML Document.

HTML Tags

HTML codes are referred to as tags. Tags open with a less-than sign and close with a greater-than sign. The less-than and greater-than signs are called brackets. There are two kinds of HTML tags: paired and unpaired.

Paired tags require an opening tag that turns a formatting feature on and a closing tag that turns the feature off. Paired tags must surround the text you want formatted with that feature. For example,anddefine a page's title. You must include the slash in the closing tag in order for the pair to work. Always remember to close paired tags! Unpaired tags work alone, and are usually placed before the text you want formatted.

 
Paired Tags Function
<html>, </html> Indicates the page is coded in HTML.
<head>, </head> Indicates part of the document that contains information about the page.
<title>, </title> Always located in the head, the title provides the name of the document to be displayed by search engines and on browser title bars.
<body>, </body> Indicates part of the document that contains formatted text, images, and links.

<h1>, </h1>

Level 1 of 6 headings;  <h1> is the largest, <h2> is the next largest, etc.
<em>, </em> Emphasis accentuates text, usually by italicizing it.
<strong>, </strong> Strong stresses text, usually by making it bold.
<a href=>, </a> Links to another Web page or another location in the current Web page.
<a name=>, </a> Serves as an anchor for the tag to link to. For more about and
<blockquote>,
</blockquote>
Indented margins; used for material quoted from an outside source.
<ol>, </ol> Ordered list (1, 2, 3, 4....)
<ul>, </ul> Unordered list (bullet points)
<li>, </li> List item; indicates individual items in an ordered list

<p>, </p>

Paragraph break; creates a blank line before subsequent text.

 

Unpaired Tag Function
<img> Inserts an image into your text. See Image Tags below for more information.
 <br> Line break; moves subsequent text to the beginning of the next line.

Link Tags (Anchors)

  • <a href=> marks the start of a hypertext link. This tag must be closed by the </a> tag.

    Example: <a href="http://www.ci.chi.il.us/Tourism">Exploring Chicago</a>

    The anchor, "Exploring Chicago" will appear blue in the text. If you click on the anchor, it will jump to the location http://www.ci.chi.il.us/Tourism.

  • <a name=> marks text that will be linked to from another part of the same page. It must also be closed by </a>.

    Example: <a name="top">Welcome To My First Web Page!</a>

    Use <a href=> to link another section of your page to the <a name=> anchor.

    Example: <a href="#top">return to top</a>

    This link will return viewers to the top of your page.

    Remember: the <a name=> tag does not require a pound sign (#), but the <a href=> tag does when you are linking to an <a name=> anchor.

Look for uses of anchor tags in Creating an HTML Document. Seeing how links are created in a real HTML document will make learning the anchor tags much easier.



Image Tags

The image tag inserts an image into your page. You must specify three attributes to complete this tag:

  src The source contains the name and path of the image file to be embedded in the page.
  align Align text in three different ways; choose from top, middle, bottom.
  alt Specify what alternative text to display if the viewer cannot display graphics.

While image files can be saved in many different formats, the popular Web browsers (Netscape and Internet Explorer) only display two: .gif, and .jpg. Save your image as a .gif file if it consists of only a few colors, like a cartoon. Use .jpg for photographs and images with a large spectrum of colors. Following these guidelines will help keep your image files small and decrease the time it takes your page to download to a viewer's screen.



Graphic Characters

Some characters have special meanings in HTML. For example, the less-than and greater-than signs denote the beginning and end of tags. To avoid confusing your Web browser, use the following codes to list special characters when you are using them outside of tags:

< Less-than sign ("Double quote mark (")
> Greater-than sign (>) & Ampersand (&)

If you copyright your pages, use © to list the copyright symbol (©).



Edit this page