Basic HTML Codes

Posted on December 13, 2010 by admin

Basic HTML codes are HTML codes (or tags) that you’ll use very frequently. The purpose of this article is to provide a brief overview common HTML tags that you will need to use in just about every website project that you do.

Below I will name each tag and briefly describe what it does. For most of these basic HTML codes, a brief description is all that is needed. Some of the tags may merit more detailed descriptions. For those, I will try to write up a separate page, but here, the information will be summarized.

The HTML Tag (<html></html>)

The HTML tag the most essential of the basic HTML codes. You cannot even have a webpage without the HTML tag: it defines the webpage itself. Everything in the webpage must be placed between the opening HTML tag and the closing HTML tag.

The HEAD Tag (<head></head>)

The HEAD tag defines the head section of an HTML document. The HEAD section is where we put information that relates to the page but that we don’t want to be displayed in the page itself. Some things commonly put in the HEAD section are: page title, javascript, styling information (called CSS), and meta tags. (You’ll learn about meta tags in a moment.)

The TITLE Tag (<title></title>)

The TITLE tag is always placed within the HEAD tags and contains the title of the page. The page’s title is usually displayed in the browser window’s title bar. If your webpage gets indexed by Google, your page’s title will be used by Google to form the clickable link to your page in the search results.

The BODY Tag (<body></body>)

The BODY tag defines the body section of the page, which is the part that the browser will display.

The DIV Tag (<div></div>)

We’ll go into more detail about the division or DIV tag later, but, for now, I’ll give you a brief overview. It is just a general container. It helps to separate your HTML page into “divisions” (like header, footer, side bar, etc.). The DIV tag can contain just about any other HTML tag. It’s main use is in creating the general layout of a webpage. Again, you’ll see the DIV tag in action later.

The HEADING Tags (<h1></h1>, <h2></h2>, etc.)

The heading tags are used to define headings for the text—they work a lot like newspaper headings. By default, they also cause a break in the text before and after them. That is to say, the heading will be on a line all by itself. However, you can use styling information to change this default behavior.

There are six different heading tags: h1, h2, h3, h4, h5, and h6. The headings get progressively smaller as the number gets bigger. The first one, h1, makes the largest headings while the last one, h6, makes the smallest headings. Below are examples of all six headings (well, at least showing how they are styled here at this site…you can actually make the h6 heading bigger than the h1 heading…if you wanted to).

  • Heading 1

  • Heading 2

  • Heading 3

  • Heading 4

  • Heading 5
  • Heading 6

The P (Paragraph) Tag (<p></p>)

The paragraph tag, or P tag, simply defines a paragraph. Each paragraph of your text should be contained within a set of paragraph tags.

The UL (Unordered List) Tag (<ul></ul>)

In general, the unordered list is used to make bulleted lists such as that seen below. A more advanced use of the unordered list is to make horizontal, vertical, and tabbed navigational menus. We will get into that later, though.

  • Point 1
  • Point 2
  • Point 3

The OL (Ordered List) Tag (<ol></ol>)

In general, the ordered list is used to make numbered lists such as those used in outlines. Several ordering systems can be used including numerical, letters, roman numerals, and some other ordering systems used in certain non-English language systems.

  1. Point 1
  2. Point 2
  3. Point 3

The LI (List Item) Tag (<li></li>)

The LI tag is used to define an item within either an unordered or ordered list. The code for an unordered list is shown below.

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

The A (Anchor) Tag (<a></a>)

The ANCHOR tag, or the A tag, may be the most famous of all the tags. It is the tag that makes clickable links to other HTML pages or Internet resources, which may be the most useful feature of the World Wide Web.

The anchor tag actually has two uses. The first one, as mentioned above, is to make clickable links. The other use is to create an anchor, or a place within a document that you can click to. These anchors are also commonly called bookmarks. However, they have nothing to do with using your browser to bookmark a page.

You can learn more about the anchor tag on the anchor tag page.

The IMG Tag (<img />)

This is the image tag. It is used to insert an image into your HTML document. The most important attribute for the image tag is the src attribute. In fact, it is required. The src attribute takes the URL of an image file as a value. It tells the browser where to find the image that you want to insert. You can learn more at the image tag page.

Well, Now You Know Some Basic HTML Codes!

Well, there ya go. You are now familiar with a handful of some of the more common or basic HTML codes or tags.

This entry was posted in HTML Tutorials. Bookmark the permalink.

Comments are closed.