Announcement

Collapse
No announcement yet.

Doctypes & Validation

Collapse
This topic is closed.
X
This is a sticky topic.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Doctypes & Validation

    Your document should begin with a !DOCTYPE (this tells the browser what sort of HTML
    is in the file) followed by the <html> and <head> tags:

    if you do not know what doctype to use that tells me that you are not using frames or xhtml.
    so if you are unsure which ones to use then it is always: html transitional
    Pick one that best suits your needs
    (transitional)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>

    EDIT: I did not put
    "http://www.w3.org/TR/html4/loose.dtd"
    under the html 4.01 Transitional. that also causes weird things to happen in Internet Explorer 6. it will still validate without it. you can use it but make sure you coding is good and true, not sloppy. for newbies it is best to just to leave it out. if you use scrollbar colors in Internet Explorer it will stop showing colors.

    (strict)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    for frames (not iframes) it is

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
    <html>
    this doctype only goes in the index page that is making the frame, all regular pages will use whatever doctype you decide

    for xhtml it is
    (transistional)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

    (strict)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

    (frameset)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>

    For your page to actually be valid you MUST declare the character encoding (lets the
    browser know whether to use A to Z letters (latin), or Chinese, Japanese, Thai, or Arabic
    script, or some other character set) used for the page, with something like:

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    There are also other schemes such as UTF-8 and many others.

    It is also a good idea to declare what human language the page is in, using:

    <meta http-equiv="Content-Language" content="EN-GB">

    The language and country codes come from ISO 4217 and ISO 3166. This is useful
    for online translation tools as well. Change the "en" and "gb" to whatever
    language and country you need.

    You need a <title> element for the page:

    <title> Your Title Here </title>

    This is displayed at the top of the browser window, and stored as the name of the bookmark if
    someone bookmarks the page URL in their browser. Most importantly, it is the <title> tag
    that is indexed and displayed by search engines in the search results page (SERPs).

    You need the meta description tag, as this is very important for search engines, and it is
    useful but not vital to have a meta keywords tag:

    <meta name="Description" content=" Your Description Here. ">
    <meta name="Keywords" content=" your, keyword, list, here ">



    The last parts of your header should have your links to external style sheets and
    external javascript files:

    Use this if the stylesheet is for all browsers:

    <link type="text/css" rel="stylesheet" src="/path/file.css">


    Use this for style sheet that you want to hide from older browsers, as older browsers often crash on seeing CSS:

    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css"> @import url(/path/file.css); </style>



    End the header with this:

    </head>
    <body>


    and then continue with the body page code.

    It is as simple as that.

    Code within the page:

    I use: <a href="somepage.html" title="some text here"></a> for links.

    I use <img src="somefile.png" alt="some text"> for images.

    Headings are done with <hx></hx> tags, properly used from <h1></h1> downwards.

    Links to the validators.

    CSS Validator
    HTML Validator

    The alternative URLs let you set options before you validate:

    HTML: http://validator.w3.org/detailed.html
    HTML: W3C multi-page validator
    CSS: http://jigsaw.w3.org/css-validator/validator-uri.html

    Useful list of META tags: http://www.geocities.com/CollegePark...all_kinds.html


    Don't forget to validate your HTML code or your site might not be properly indexed, or not
    indexed at all. See: http://www.google.com/search?num=100...=Google+Search
    for loads of sites that have a missing > on the </title> tag, or for some the </title>
    tag completely missing, etc. This has completely messed up the way that the site is indexed.

    remember, for xhtml doctypes you have to make ALL tags and attributes lower case, including some javascript functions, and ALL
    tags need to be closed that do not have a closing tag. />


    <meta .... /> (all meta tags)
    <link type="text/css" rel="stylesheet" src="/path/file.css" />
    <img src="..." alt="" width="" height="" />
    <br />
    <hr />

    onSubmit needs to be onsubmit,
    onClick needs to be onclick... etc.

    just to name a few.

    Some Bugs.
    some people wonder why I didn't add
    <?xml version="1.0" encoding="UTF-8"?> to the Xhtml doctype. it actually causes Internet Explorer to go into quirks mode and it will make things happen you don't want. So please don't use it if you want your code to look/run right, it will still validate as valid xhtml without it.


    If you have something important to add, just tell a moderator and he/she will add it for you.
    Have a Script or Snippet you want to share?

    WWW Standards: HTML 4.01,
    HTML 5, CSS2.1, CSS3, XHTML 1.0
    PHP Standards: PHP Standards

  • #2
    Common errors and ways to fix them

    most of the errors can be easily fixed by using some form of css (cascade style sheets)

    for any errors where you get "there is no attribute "HEIGHT" or "WIDTH" or "BACKGROUND" " you need to do this

    <tag style="height:100px; width:21px; background: #ffffff">


    Line 15, column 49: there is no attribute "TOPMARGIN"

    <body bgcolor="#FFFFFF" text="#000000" topmargin="0">

    for errors like that you have to use css. most common are the topmargin, leftmargin, rightmargin, marginheight, marginwidth. those can be cured by using this
    Code:
    <style type="text/css">
    html, body { 
        margin:0; 
        padding:0;
    }
    </style>
    or you can use a external style sheet. for more information on style sheets you can read Pegasus's tutorial on css here:
    http://www.htmlforums.com/showthread...threadid=39373


    for any errors where you get "there is no attribute "LANGAUGE" you need to do this

    <script type="text/javascript" src="/path/file.js"></script>
    do not use:
    language="javascript"

    that is deprecated and shouldn't be used.
    http://www.w3.org/TR/html4/interact/...ml#edef-SCRIPT
    Have a Script or Snippet you want to share?

    WWW Standards: HTML 4.01,
    HTML 5, CSS2.1, CSS3, XHTML 1.0
    PHP Standards: PHP Standards

    Comment


    • #3
      thanks to coothead

      This has just been released by the ...

      HTML and XHTML Frequently Answered Questions
      Have a Script or Snippet you want to share?

      WWW Standards: HTML 4.01,
      HTML 5, CSS2.1, CSS3, XHTML 1.0
      PHP Standards: PHP Standards

      Comment


      • #4
        This thread will not get updated with html5 doctypes until W3C has made it a standard, currently in DRAFT mode. Browsers can use it but as long as it is not a standard they don't have to. So beware, not all html5 code will work in all browsers. Plus it is still a little buggy
        Have a Script or Snippet you want to share?

        WWW Standards: HTML 4.01,
        HTML 5, CSS2.1, CSS3, XHTML 1.0
        PHP Standards: PHP Standards

        Comment

        Working...
        X