1) HTML Embedded Tags:
You might have noticed that every words (say text) are display in the browser except those which are found inside a pair of less-than (<) and greater-than (>) characters.
HTML is an embedded (and/or interpreted) language: we insert the language's directions (instructions) or tags into the document that we load into a browser to view. The browser uses the information (directions/instructions) which are enclosed within less-than (<) and greater-than (>) characters also called HTML tags to decide how to display or treat the subsequent contents of your HTML document.
For example <i> tag that precedes the word "Hello" in previous example tells the browser to display the following text in italics.
Mostly tags comes in pair opening tag like <i> and its closing tag </i>. Remember closing tag name starts with forward slash (/) indicating it is ending tag. Effect of particular tag is confined between the opening and closing tag.
There are fews tags that comes along or say having no closing tag.
2) Types of Tags:
There are basically two (2) types of tags: They are-
(i) Empty tag/Singular tag:
Tag that only have opening tag is called empty/singular tag. For example <br>, <hr>
(ii) Paired Tag (content tags)/Plural tag:
Tag that have both opening and closing tags is called paired/plural tag. For example <i>, <b>
Yes, remember if tag is paired type and its closing tag is omitted and mis-placed will bring undesirable consequent (result).
But still there are some paired tag even if omitted doesn't effect at all. Example of such a tag is <p> tag.
3) Syntax of Tags:
Every HTML tag consists of tag --name--, sometimes followed by an optional lists of tag --attributes--, all placed between opening and closing angular bracker (< >).
Simple tag is nothing more that a name appropriately enclosed in brackets, such as <head> and <i>.
More complicated tags have attributes, which may have specific value. They appear as attribute="value".
If value is number than double-quotes can be eliminated. But to keep things simple it is good to use double-quotes in all cases.
Tag writing rules (convention):
(i) Tag names and attribute names are case insensitive. In some cases attributes are case sensitive depending on browser and server. Similarly the values may be case sensitive like URI/URL's.
(ii) Tag attributes, if any, belong after the tag name, each separated by one or more tab, space, or return characters. Their order of appearance is not important
(iii) A tag attribute's value, if any, follows an equal sign (=) after the attribute name. You may include spaces around the equal sign, so that width=6, width = 6, width =6, and width= 6 all mean the same. For readability, however, we prefer not to include spaces. That way, it's easier to pick out an attribute/value pair from a crowd of pairs in a lengthy tag.
(iv) If an attribute's value is a single word or number (no spaces), you may simply add it after the equal sign. All other values should be enclosed in single or double quotes, especially those values that contain several words separated by spaces. The length of the value is limited to 1024 characters
(v) Most browsers are tolerant of how tags are punctuated and broken across lines. Nonetheless, avoid breaking tags across lines in your source document whenever possible. This rule promotes readability and reduces potential errors in your HTML documents.
Sample Tags:
Here are some tags with attributes:
<a href="http://www.ora.com/catalog.html">
<font face="arial" size=10 style="italic">
4) Nesting Tags (Proper and Improrer):
When tags appears between the other tags then we need to follow proper nesting rules. The rule is the last opened tag need to be first closed and so on.
Otherwise result will be not as expected. In some browser the case is more worst. Nothing will be displayed on the browser.
Eaxmple:
<b>Ram <i>went</i> to market</b>
Here <i> is opened last so closed first.
It is example of proper nesting.
As a result: we get "Ram went to market" bold and the word "went" in italic as well.
Let's make improper nesting.
<b>Ram <i>went</b> to market</b>
As a result: Here we get "Ram went" bold and "went" italic as well and "to market" will be displayed regular.
Improper nesting most be avoided, sometime they may may bring very worst scenario.
No comments:
Post a Comment