How To Learn HTML Code Tags

Learning HTML code begins with learning the basic tags.  By studying the examples in this article, you should know all of the basic HTML tags that you will need in creating a simple webpage.

First of all, it is important to know that almost every tag has an opening and a closing.  When this occurs, we open with <tag>, and close with </tag>.  Some tags do not open and close.  These are just simply inserted with <tag> and never closed (though in the XHTML standard, they would be typed <tag/>).  In the following examples, tags with no slashes in them denote that they must be opened and closed, while tags with a slash after the content (<tag/>) only need to be inserted and never closed.

Note:  "<tag>" is not a real tag.

Also, attributes are pieces of information placed inside a tag.  For instance, to use the tag color attribute, we would create this:  <tag color="COLORINFO"></tag>, where COLORINFO would be replaced with the appropriate value and the whole tag would be closed with just a simple </tag> (not </tag color="COLORINFO">).

FRAMEWORK TAGS -- These tags comprise the basic framework for any webpage.

  1. <html>  This tag occurs at the beginning of any page of HTML.  It is part of the basic framework of any page.

  • <head>  This tag comes after <html> and defines the "head" of your document, where you will place information that you don't want directly on your webpage.  Here you can put information such as the title, meta tags and CSS.
  • <title>  This tag denotes the title.  It belongs in between the <head> tags. The words that you want on the title bar of the browser should be placed between the <title> and </title> tags.
  • <body>  This tag opens the body of your webpage, where most of the content will be entered.  It has two important attributes: "background" and "bgcolor."  A background value must be the URL of an image (to create a background image) and a bgcolor values must be a color in word or hexidecimal format (ex: "gray" or #FF55AA).
  • All of the tags at this point are tags necessary to the framework of your webpage (except title, but it is considered standard).  This is what the framework of any HTML code should look like:

    <html>

    <head>
    <title></title>
    </head>

    <body>

    </body>
    </html>

    The words, pictures, and tables that you want on your webpage should fall between the <body> tags.  Later in this article, I will show the source for a very simple webpage.

    TEXT DECORATION -- The following tags are the basic tags used to decorate text.

    1. <b>  This tag makes text bold.
    2. <i>  This tag makes text italicized.
    3. <u>  This tag makes text underlined.
    4. <big>  This tag makes text larger.

    These tags can be used separately, or in conjunction to create more effects.  For example: Thistextisemphasized, while this text is intense!

    1. <font>  Other text effects can be achieved using the <font> tag.  The important attributes here are "color," "size," and "face."  Color values must in word or hexidecimal format (ex. "fuchsia" or #BB6677), size values must be a number one through seven (seven being the largest), and face values can be the name of any font.

    Ex: <font color="green" size="2" face="Georgia">This text is altered.</font>

    This text is altered.

    EXAMPLE WEBPAGE CODE

    The code for an example webpage could look like this:

    <html>
    <head>
    <title>Example Webpage!</title>
    </head>

    <body bgcolor="#AABB33">

    <b>This text is bold!</b>

    This text is not bold.  Nor is it formatted in any other way.

    </body>
    </html>

    TEXT FORMATTING -- The following tags are the basic tags used to format text.

    1. <br/>  This tag creates a break in the text.  Pressing "enter" in your HTML editor won't create an actual break on the page, so you must use this tag to create line breaks.
    2. <h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<h7>  These tags are the "header" tags.  <h1> creates the largest header, while <h7> creates the smallest header.  A header consists of size-altered text with line breaks above and below.
    3. <p>  The paragraph tag creates a line break before and after a paragraph of text.

    INSERTING MEDIA -- The following tags are used to insert various media.

    1. <img/>  The image tag inserts an image.  It has one necessary attribute, "src."  The value for "src" must be the URL of an image.

      Ex: <img src="http://www.images.com/image.jpg">

    2. <a>  The anchor tag inserts a hyperlink.  It also has a necessary attribute -- "href."  The value for "href" must be the URL of the website (or image, or file, etc.) to which you want to link.

      Ex: <a href="http://www.link.org">This website is great!</a>

    CREATING LISTS -- The following tags are used to create lists.

    All lists are made using a main opening tag (<bl>, <ul>, or <ol>), which must be closed after the list is finished, and list item tags (<li>), which must be closed after each individual list item.

    1. <ul>  The unordered list tag creates a list marked by small black circles.  The "type" attribute can have values of "disc," "circle," or "square," which change the small black circles into other markers.

      Note: <bl> (bulleted list) is the same as <ul>, except that the list is pulled to the left (usually not preferred).

    2. <ol>  The ordered list tag creates a list marked by numbers.  The value for the "start" attribute can be any number, and this tells the list where to begin numbering.  The value for the "type" attributed can be A, a, I, i, or 1, which tell the list what type of numbering to use (alphabetical, numerical, or Roman numerals).

    TABLES -- The following tags are used to create tables.

    Tables are the most advanced topic covered in basic HTML.

    1. <table>  The table tag signifies the beginning of a table.  Possible attributes are "bgcolor," "border," "cellpadding," "cellspacing," "width," "align," or "valign." 
      • The value for the "bgcolor" attribute is a color in hexidecimal format (ex. #33AA44).
      • The value for the "border" attribute is a number that denotes the thickness of the border.
      • The value for the "cellpadding" attribute is a number that denotes the distance (in pixels) between the border and the contents of the table.
      • The value for the "cellspacing" attribute is a number that denotes how wide the border will be.
      • The value for the "width" attribute is a number that denotes how wide the table will be (in pixels).
      • The value for the "align" attribute must be "left," "right," or "center," and denotes where the content of the table aligns.
      • The value for the "valign" attribute must be "top," "bottom," or "middle," and denotes where the content of the table aligns vertically.

    2. <tr>  This tag defines a table row.  You must create it before creating a <td>.  You always define rows before defining cells in those rows (which create columns).  You can use the "height" attribute here by giving it a value that, in pixels, will define the height of the row.  You can also use a percentage (ex. "30%") to define how much of the page it will take up (vertically), but this is not recommended for table row.
    3. <td>  This tag defines a table cell.  Information can be placed in a table cell, while the <tr> and <td> in conjunction define what a table will look like.  You can use the "width" attribute here to define, in pixels, how wide the cell will be.  You can also use a percentage (ex. "55%") to define how much of the page it will take up (horizontally).

    Here is an example of some code which could create a table:

    <table>
        <tr>
            <td>This is the first row, first column!</td>
            <td>This is the first row, second column!</td>
        </tr>

        <tr>
            <td>This is the second row, first column!</td>
            <td>This is the second row, second column!</td>
        </tr>
    </table>

    You can copy this code into your own HTML editor to see what the finished product would look like.  Feel free to tinker with it by adding more rows, an unequal amount of table cells in each row and various attributes.

     

    Share this article!

    Follow us!

    Find more helpful articles: