| |
|
| HTML Tags and Attributes
1. GLOBAL |
!doctype |
Required. Specifies the Document Type Definition (DTD) to which the document conforms. If omitted, the document will fail
the W3C validator (http://validator.w3.org). |
|
html |
Required. Closing tag. HyperText Mark-up Language. Begins and ends all HTML documents |
|
head |
Closing tag. Contains global information on the document |
| onload | Specify a function call that you want called after document has loaded. |
| type | Specify the scripting language you will be using. Almost always "text/javascript" is indicated
(somtimes abbreviated as "text/jscript"),
although I once saw a complex example where "text/vbscript" was used. Optional – if omitted, javascript is default. |
| language | Specify the scripting language you will be using. Here, similarly, "javascript"
(or "jscript") is almost invariably used. Unsure why the need for both this and the previous attribute. |
| src | You have two choices, regarding where to place your javascript code: 1. Put it directly between the opening and
closing script tags. In that case, omit the src attribute. 2. Put the code
in an external file. If you choose the latter, name the file with a ".js" extension and indicate it as the src attribute
of the script tag. Do not put the script tags inside the .js file – just straight javascript there. |
2. HEAD |
title |
Closing tag. Title of document. Appears at top of browser; in computer toolbar; used by search engines, both
to label page on results list, and, more importantly, to rank page for specified keywords. |
| rel | Required. Specify the type of external document you are linking with this document. The only two I've ever used are: |
| stylesheet |
The most common – for an external css file |
| shortcut icon |
A 16x16 file named 'favicon.ico' (that you upload to your Server),
that you wish to have displayed beside the URL in the address
line of your browswer, instead of the default icon (e.g. the MS logo for IE). Note that it does not always work. For example,
on my computer, it works for firefox but not for IE. |
| href | Required. The URL of the external file. |
| type | For stylesheet, specify the CSS language used. I've never seen anything other than "text/css". |
| name | Specify what kind of information is being indicated here. |
| robots |
Instructions for search engine "robots". |
| description |
A phrase describing the nature of the site. This and the next are meant for search engine
optimization, but much of the literature (as of 2005) indicates that these are by now of minimal value. |
| keywords |
A list of keywords describing the nature of the site. |
| http-equiv | Rquired. This specifies the language of the document. Give it the value Content-Type |
| content | The actual value of the meta tag. |
| noindex, nofollow |
If name is robots, then the instruction here is that search engines should ignore this page.
Useful for pages like secure ecommerce pages which you do not want indexed by search engines. |
| |
For description, content should contain a phrase describing the contents of the site. |
| |
For keywords, content should contain a short list of keywords describing the contents of the site. |
| text/html; charset = ISO-8859-1 |
Use this with http-equiv, for English pages. |
| text/html; charset = windows-1255 |
Use this with http-equiv, for Hebrew pages. |
| type | Specify the CSS language used. I've never seen anything other than "text/css", which seems to be the default. |
| tagName | If you specify an existing html object's tagName, such as div, td, a, img, etc., etc., then you are re-defining
the style for any instance of these objects. |
| .class | If you use the '.' character, then any element defined as belonging to that class will be affected. |
| #id | If you use the '#' character, then the element with that id will be affected. |
| a:hover | Define the style upon mouseover of an a object. Default: nothing happens. |
| a.class:hover | You may have certain a's that you want to have one hover effect and certain a's that you don't want
to have that effect. If so, assign all the a's that you want to get the effect a class, and specify in style that only a's of
that class get the effect. This applies not only to hover, but to the others below as well. |
| a:visited | Define the style for a objects that have been clicked on. Default: purple. |
| a:focus | Define the style for a objects when you click on them. Default: red. |
| src | Specify URL of sound file – mp3, wav, etc. |
3. TABLE | cellpadding | Define padding of cells. Default ~5? I almost always set to 0 |
| cellspacing | Define spacing between cells – subtly different from cellpadding. Default ~5? Again,
I almost always set to 0 |
| border | Define width of border between cells. Default: 0, or no border. Extremely useful for debugging, when it
is difficult to follow the structure of a complex, nested table. Note that if you do use this attribute, it is important to
give empty cells a content of " ", otherwise, the border will 'disappear' for those cells. |
| bordercolorlight | On those rare occasions where you want to give your table a border, you may want to give that border a
color. Table borders are 3D, and are based on two colors. One is this – bordercolorlight |
| bordercolordark | This is the other color used to define the table's border color. You can change either of these two
independently. Personally, I never tried changing bordercolordark – only bordercolorlight. |
| align | Horizontal alignment. |
| right |
Use if you want a table of a few objects one below another to appear at the top-right of an article,
but for the article to continue below the table. Make sure to put the table before the article in your code. |
|
tbody |
Table body. The immediate child of the table, and the parent of the table rows. Created whether or not you specify it,
which is important to know if you are writing code to access a table object relative to a td, using parentElement (or vice versa).
Apparently, tbody is one of three potential parts of a table, the other two being thead and tfoot, but I've never used them. |
|
tr |
Table row. Goes inside a table. |
| colspan | Use if you wish two join horizontally adjancent table cells into one. Be careful to ensure to place correct number of cells
on all rows. Personally, I've seen this – and the next – used, when more planning would have obviated their need. |
| rowspan | Use if you wish two join vertically adjancent table cells into one. Again, be careful. |
| valign | Whenever I use this, it is invariably with the value "top", to ensure that all table cells are top-aligned
with each other. Occasionally, I use "bottom". Although it applies to other objects, I invariably use it with td's.
However, I just now notice that apprently, setting tr to valign top is equivalent of setting each and every td to valign top,
so I may well switch to that! |
4. OBJECTS ON THE PAGE | src | URL of image. Note that URL can be the absolute URL of an external website. This is particularly useful in html emails. |
| alt | Alternative text to graphic. Displayed on mouseover image, or in absence of image. Recommended for SEO. |
| align | Define positioning of image relative to items adjancent to it. |
| left |
Use if you want an image to go at the top-left of an article. If you omit it, the article will begin at the
bottom of the image. Recommended to give the image margin-right and margin-bottom. |
| right |
Use if you want an image to go at the top-right of an article. Recommended to give the
image margin-left and margin-bottom. |
| border | Images have no border by default, by an image inside an a by default has a 1px solid border (blue or purple). To
override this, give border the value of 0. Alternatively, give it the style border:none. |
| usemap | #mapName. Use this when you wish to section off an area within an image and wish to define something specific
to that area – usually an href. You must then make a map with the mapName specified here. |
| name | You must give the map the same name as specified in the usemap attribute of the image in question. |
| shape | Define the shape of the area you are defining within the image. |
| rect |
You are defining a rectangular shape. |
| poly |
You are defining a polygon – a collection of points. |
| coords | Define a series of points which define the area. |
| |
For rect, define two corners: top-left x-value, top-left y-value, bottom-right x-value,
bottom-right y-value. |
| |
For poly, specify any number of points, using x-y pairs. |
| href | Typically, what is desired is to make this area within the gif clickable. Another possibility: title, so
that a different title pops up for each area within the imaage. Useful for maps. |
|
br |
Line Break. Ordinarily, any amount of white space between two characters is always translated into one space. Therefore,
you can use this if you want text to begin one line down. Use two in a row to skip lines between paragraphs. |
5. TEXT |
u |
Underline. I try to avoid this, since by now, underlined text is almost universally regarded as clickable. |
|
strike |
Strikeout. Useful for indicating sales. |
6. CONTAINERS | href | Where you want the browser to go when the link is clicked on. |
| URL |
Specify the URL. This is the most common usage. |
| javascript:code |
Use this when you want javascript code, such as a function call, to be executed upon
clicking on link. |
| #top |
Use this when you to take the user to the top of the page. |
| # |
You can use this when you're first coding your page and want the href to work but haven't yet decided what
the URL of the clickthrough will be. |
| #name |
Use this when you to take the user to a specific a on the page, which you've named accordingly.
Note that this can be used in conjunction with a URL: URL#name. |
| mailto: |
Use this to open up user's client mail program. Typically, the receiver's email address is indicated
immediately after the ":" character. In addition, each of the following may be set, in any order, by preceding each with
the "&" character, with the "=" sign between the parameter and the value: cc, bcc, subject, body. Notes: 1. cc and bcc may be a comma-separated list of email addresses. 2. For a newline within the body, use '%0A'. |
| name | Use when you want to make another a jump to this a, as described in previous item. This
is the one case where an a doesn't necessarily get an href. |
| target | In which window should the clicked-on URL open. |
| _self |
Default. The current window itself will go to the specified URL. |
| _blank |
A new window will be created and will go to the specified URL. |
| name |
A named window will go to the specified URL. A practical difference between this and the above is that
if you had several a's on a page, if you give each a target of _blank, then a new window would be created each time, but if
you use name, then one second window would be created, and that same window would be used for all the a's. |
| text-decoration | CSS. By default, text inside an a is underlined. Set this attribute to "none" to override
the default. |
| display | CSS. By default, an a has a display of "inline", which means that you can't give it styles like padding |
| • Note that a table apparently cannot go inside an a. I tried putting a tr inside an a. While the click works,
the cursor doesn't change into hand on mouseover. |
|
center |
Center objects in the page. |
|
div |
A generic container for objects. |
|
span |
Another generic container for objects. The difference between this and div is
that a div has display block and span
has display inline. Therefore, a div will begin on a new line, while a span will not. Each has its place. |
|
h1 |
A heading. There is also h2, h3, etc. The primary use of this is for search engines. Its effect (bold and large size)
can be negated with css. |
|
ul |
Unnumbered list. This is a container for a list of items. A bullet will appear before each. |
|
ol |
Ordered list. Same as ul, but each list element will be preceded by a number. |
| • Note that if you want your list items to be tables, then don't use li, since the bullets/numbers will be bottom-aligned
with your text. |
7. FORM | action | The page to which the form is submitted. Typically, this will need to be a server-side page (asp, php, etc.). |
| mailto: |
If action is set to "mailto:", this will cause the values of the form objects to be sent by
client-side email program to the specified recipient.
The parameters after "mailto:" are as described under a. I would not necessarily recommend this method, as it cannot be
taken for granted that a client-side email program will be an option for all users.
Note that method=post (see below) must be used in this case. See also enctype. |
| method | Either get (default) or post. |
| get |
The values of the various input objects of the form are passed as suffixes
to the URL. |
| post |
The values of the various input objects of the form are passed in a way which is more hidden from the user. |
| target | Where is the data of the form sent to? |
| _self |
This is the default. The form is submitted to the window itself. |
| name |
The name of a popup window. |
| _blank |
The name of a new blank popup window. |
| enctype | Can generally be left blank, with some exceptions: |
| multipart/form-data |
Use this if one of the objects to be submitted is a file to be uploaded. Also,
method must be set to post. |
| text/plain |
Use this if action is mailto. Otherwise, the form info will be sent as an attachment.
Also, method must be set to post. |
| onsubmit | Typically set to "return expression". Form is submitted only if expression evaluates to true.
Usually, expression will be a function call. |
| elements | A collection of the controls inside the form. Typically used in javascript. |
| type | Define the type of input object: |
| text |
The default. A one-line text field. |
| radio |
A radio button. In order to make a series of radio buttons go together (so that clicking on one makes
the others unclicked), give them all the same name (but typically, give each a different id). Also, give each a
distinct value so when processing form, you'll know which was selected. |
| file |
A file to be uploaded. A text field with a browse button will appear on the page. |
| password |
Similar to text, but circles will appear instead of the characters typed in. Also, you cannot
copy from such a field. |
| hidden |
Unique in that it is an object but is not visible on the screen. Extremely useful for
passing forward information behind the scenes. |
| button |
A button object. This and the one that follow are different
from the previous items in that it is not usually for the purpose of passing information on to the next page
(although the text of the button is actually passed forward!). Typically will have onclick defined. |
| submit |
In appearance, looks like a button. However, clicking on it submits the parent form. Default text on it
is "Submit". |
| image |
Functionally, like submit, except an image appears instead of a button. |
| reset |
In appearance, looks like a button. Functionality: clear all of the fields in the form. |
| name | This is necessary so that the page which processes the form can access the values of the various input objects by name. |
| maxLength | Applies to text and password. Limit the number of characters that can be typed in. |
| checked | Applies to radio and checkbox. Indicates whether item has been checked or not. |
| value | For text and password: the contents of the field. For button: what appears on the button. |
| src | For type=image, specify URL of image. |
| disabled | Default: false. If set to true, then appears muted and user cannot change its value. |
| tabIndex | By default, if user hits the tab character to traverse the fields, he will access them in the order in
which they are defined in the document. Use this to override that. Give items a tabindex value, starting at 1, in order of
desired traversal. |
| size | Dropdowns are typically one line in height. Use this to give the dropdown the desired height, in number
of lines. |
| multiple | Specify this if you wish to allow the user to select more than one option. |
| selectedElement | Indicates which option of the select is currently selected. 0-based. Typically accessed in
javascript. |
| disabled | As defined in input. |
| tabIndex | As defined in input. |
| options | Used in javascript. This is an array whose elements are the individual option objects of this select. |
| value | Value of the option. |
| selected | Is this option selected. |
| label | Specifies the text that will appear. |
| rows | The number of rows of this object. I prefer CSS height – but apprarently rows is required
for W3C! |
| cols | The number of columns of this object. I prefer CSS width – but apprarently cols is required
for W3C! |
| disabled | As defined in input. |
| tabIndex | As defined in input. |
|
button |
Closing tag. I use this instead of input type=button when I want the text of a button to be split onto
more than one line. |
8. GENERAL ATTRIBUTES |
dir |
Default is ltr. I use rtl for Hebrew-language websites. |
|
id |
Very useful if you wish to access a particular object, usually in javascript. You use
document.getElementById. |
|
name |
Same idea as id – giving an object an identifier. Name specifically must be used: a. For objects whose data
is meant to be submitted as part of a form. b. With map. c. With a where the href is another a on the page. Note that unlike id,
more than one object may share the same name – in radio, they often must. |
|
class |
If you define a class in your style section, you may assign any object that defined class. Note:
in javascript, use className. |
|
title |
The contents of the title of an object will appear in a small rectangle when you mouseover the object. |
9. TODO |
applet |
Display java applet. |
|
iframe |
Define a frame in the page. |
|
object |
Display a flash object. |
|
frameset |
Display a frameset. |
|
marquee |
Scrolling object. |
References: http://www.w3.org/TR/REC-html40/cover.html#minitoc http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp http://www.cs.tut.fi/~jkorpela/HTML3.2/index.html
Check this page for W3C Compliancy
Top of Page
|
|