The design of the HTML tags

HTML has tags to define diffent types of elements.

What are tags?

  • HTML has defined keys words inside tags to:
    • inform,
    • design,
    • organize,
    • describe text
    • and establish the basis for functionality
    on a web page.
  • HTML tags are keywords surrounded by angle brackets like <h1>

Start and End Tag.

  • HTML tags are defined normally in the form of a tag-pair, that name is given to be a Start Tag and End Tag.
    Example:
    <h1>This is my site</h1>
    <h1> Start tag.
    </h1> End tag.
    This is my site The inner HTML tag value.

Empty Tag.

  • Some HTML tags can act as Empty Tag.
  • This tag-type is a start tag with end tag included (has no end tag).
    Example:
    <img src="my.jpg" >
    "img" is an Empty Tag and does not have an inner HTML tag value.

Sub-tags.

  • Some HTML elements can contain elements. This is done by defining sub-tags within tags.
  • It is obvious that an empty tag can not have sub-tags.
  • HTML Sub-tags can be of either a pair of Start - End tag or an Empty tag.
    Example:
    <table>
      <tr>
        <td>
          <img src="images/HTMLStructure.png" >
        </td>
        <td>An HTML document can be divided in three main sections.
        </td>
      </tr>
    </table>
    tr Pair of Sub tag to <table>.
    td Pair of Sub tags to <tr>.
    img Empty Sub tag to <td>.
  • In this case <table> defines to be the Parent tag for <tr> tag and <tr> defines to be the Parent tag for <td> tag and so on.

Attributes.

  • HTML elements contains one or more Attributes.
  • Attributes may describe:
    • presentation and layout of the contents of the element (color, width, ...)
    • url to a component that should be included in the presentation (images)
    • action to be performed given a type of event (mouse move, click event ....).
  • Only Start tags and Empty tags can contain attributes (not the end tags) for a HTML element.
  • An Attribute is assigned a descriptive text string surrounded by two double apostrophes or two single apostrophes for what it describes like src="my.jpg"
    Example:
    <table border='20'>
      <tr>
        <td>
          <img src="images/HTMLStructure.png" >
        </td>
        <td bgcolor="lightgrey">An HTML document can be divided
    in three main sections.
        </td>
      </tr>
    </table>
    border The table tag has an attribute, border, with the value "20", which means that the table should be drawn with a 20 pixel thick border.
    src The img tag has an attribute, src, with the value "images/HTMLStructure.png", which means that the browser should load the image with the filename, HTMLStructure.png, existing in the path, images, into that place.
    bgcolor The td tag has an attribute, bgcolor, with the value "lightgrey", which means that background color of the text, "An HTML document can be divided in three main sections", should be shown in lightgrey color.

Comments in the HTML document.

  • Comments are ignored by HTML parsers and may appear anywhere in a document outside other HTML markup. You start a comment with <!-- and end it with -->.
    Example:
    <!-- This document contains address information -->

© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.