Basic Elements of all HTML Pages

Header - tells the browser what type of file it's loading, and provides keywords, titles & descriptions for search engines

html - this tells the browser it is loading an HTML file (as opposed to a text file or graphic) <html>
head & title - these should be the one and the same, and should be both descriptive (keywords) and concise. <head><title>Title of Page</title>
meta tags - the two I find most useful:
  • keywords - all relevant keywords, no duplicates and no caps.
  • <meta name="keywords" content="">
  • description - a description of the page - this should be 25 words maximum and a literate description/invitation rather than just hype.
  • <meta name="description" content="">
    Close your header after the last meta tag (or javascript, if there is any). </head>


    Body - This tag should contain all the following elements, and be consistent to all pages of the site.
    Background color or wallpaper - you can also specify a color to be used in case viewer's browser doesn't accept graphics, or is slow to load them - this is the preferred, and most accessible, option if you decide to go with a background image <body bgcolor="#......"
    or
    <body background="/img/....."
    or
    <body bgcolor="#......"
    background="/img/....."
    Text and link colors - choose these to not only match/compliment the overall color scheme of the page, but also to show up well on all browsers. Refer to the RGB/HTML color guide for colors that apply to all browsers.
    text="#......"
    link="#......"
    alink="#......"
    vlink="#......">


    Footer - Links to other pages, in image and/or text format(s). Whatever the format, the link to the current page should not be active.
    If multiple images, all should be linked individually.

    If single, mapped, image refer to maps section for mapping details.
    <a href="/nameofpage.html">
    <img src="/img/...."
    height=""
    width=""
    align=""
    alt=""
    border=0></A>
    (as many times as needed)
    If text links, seperate them with space and dividing element '|' is prefered in most cases. <a href="/nameofpage.html">Page Name</A> |
    <a href="/nameofpage.html">Page Name</A> |
    <a href="/nameofpage.html">Page Name</A>
    (as many times as needed - example at the bottom of this page)
    Copyright and contact info Copyright © (Year) Company/Individual
    <a href="mailto:name@site.com">name</A>
    Image Maps (Client Side), with a comment tag to denote them

    These elements (whenever relevant) are to be placed after all contents of the page, and before the body and html tags are closed
    <!-- end of html for the page, the rest is a map (or the maps)-- >

    <area shape="rect" coords="#,#,#,#" href="page.html">
    (as many times as needed)
    Close the body and html tags

    Resources/Guides

    Complete HTML Tutorial List

    </body> </html>


    Basic Elements | Tables | Images | Image Maps | Links | Frames | Fonts