SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Will this DOCTYPE and meta data code be non-problematic for several years?

    I want to put up hundreds of html pages and I don't want to have to make changes to the xhtml for several years.
    The pages I created using the code shown pass W3C. I have used the word "example" in places in the code
    to keep out extraneous info (just for this post).

    Is the code below adequate or in need of extra meta-data, other info, or changes?


    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>example</title>
    <meta name="keywords" content="example" />
    <meta name="description" content="example" />
    <link rel="stylesheet" type="text/css" href="example.css" />
    </head>

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Is there a particular reason you're not going with a strict DOCTYPE?

    The code is technically OK, but I'd put that into a PHP (or any other programming language) include so that you only ever need to edit a single file instead of a hundred or more, should the need arise.

    Example (with your code):

    header.html

    Code:
    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>example</title>
    <meta name="keywords" content="example" /> 
    <meta name="description" content="example" /> 
    <link rel=
    "stylesheet" type="text/css" href="example.css" />
    </head>

    And in your index.php (or any other language):
    PHP Code:
    // Include header HTML document into index.php
    <?php
    include('header.html');
    ?>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason for not making the DOCTYPE strict is my concern that a strict doctype would not be "compatible" with older browsers.

    Is this a possibility or reason for concern?

    I will be learning PHP as well as Javascript in the next few months. For the time being I wanted to make some base pages to be found by search engines.

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Using a strict DOCTYPE won't cause any issues with older browsers, HTML4.01 strict won't even cause problems with messy markup. If you code your HTML document properly, no hiccups can occur, so if that is accounted for then you're absolutely safe using a strict DOCTYPE. It's the way to go. I'd also recommend going with HTML 4.01 strict as that is the current standard (rather than using any flavors of XHTML).
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Kohoutek. I will use this:

    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quick follow up, if I use the above post Strict code should I delete the extra code other than HTML in this line I originally had? --


    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    Last edited by Deinonychus; Oct 18, 2011 at 16:21. Reason: left out info

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    That attribute needs to go as you're using HTML, so something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Add Ttitle</title>
        <meta name="description" content=""">
        <meta name="keywords" content="">
        <meta name="author" content="">
        <link rel="stylesheet" href="/css/main.css" media="screen">
        <link rel="stylesheet" href="/css/print.css" media="print">
        <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
      </head>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Kohoutek. I will use that as a guideline.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The most up-to-date doctype—which will also serve you well into the future—is this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    That's what I use now. It's simpler, and all you need these days.

    It's not a huge issue what doctype you have, as long as you have one, but certainly go for strict if not the one above. Transitional is only for very old websites.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ralph. I studied most of css and html fairly thoroughly over the past few months but then realized I knew little about the stuff goes at the very top of an html page.

  11. #11
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The most up-to-date doctype—which will also serve you well into the future—is this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    I use html5 doctype for all my sites now, is there a downside to doing so?

  12. #12
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Deinonychus View Post
    Thanks, Ralph. I studied most of css and html fairly thoroughly over the past few months but then realized I knew little about the stuff goes at the very top of an html page.
    Just remember that html5 is still in draft mode. The current standard still is HTML 4.01 and the recommended version by the W3C.

    Please note that I'm not in any way recommending against using html5. I use html5 occasionally, many use HTML4.01 with the new html doctype. I'm a bit old-school in that regard. If I use HTML 4.01, I'd like to reflect that in the DOCTYPE. It's a matter of preference and you can't go wrong with either.

    More information:

    HTML 4.01
    HTML5
    Maleika E. A. | Rockatee | Twitter | Dribbble



  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The doctype I included above is really a generic one that is fine for any flavor of HTML, so far as I know. From a browser's point of view, there is either a doctype or there isn't. If no dictype, it goes into quirks mode; if there is a doctype, it assumes it's a modern site. that's my understanding, anyhow.

    Which doctype you use will matter to a validator, but that's kind of irrelevant.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The doctype I included above is really a generic one that is fine for any flavor of HTML, so far as I know.
    It isn't valid for HTML 1 as HTML 1 doesn't allow a doctype.

    It is valid for any version of HTML from HTML 2 through HTML 4 which are SGML based specifications and where that doctype is the short version of the SGML identifier for the type of document that the standard is for.

    It is also valid for HTML 5 which like HTML 1 isn't SGML compatible and therefore doesn't follow the document definition standards but which unlike HTML 1 through HTML 4 actually defines that as an HTML tag. So while the same doctype works for HTML 5 as for HTML 2 - one is SGML while the other is THLM.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Thanks for clarifying, Stephen.

    Quote Originally Posted by felgall View Post
    It isn't valid for HTML 1 as HTML 1 doesn't allow a doctype.
    I'm not losing any sleep over that one.

    one is SGML while the other is THLM.
    Is that last one a typo or another darned initialism I've gotta learn?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  16. #16
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Switching to Strict has caused a problem.

    There were unwanted spaces below several images which I corrected by applying
    Code:
    display: block
    .

    However, some 728 x 90 java script ads that are enclosed in <div> still have the unwanted small space below them despite
    applying
    Code:
    display: block;
    or
    Code:
    vertical-align: bottom;
    to the div.

    These java script ads are reacting like images but not corrected by the same solution as images were.

    Is there some code to put in the div containing the java script to get rid of the space below each ad?

  17. #17
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Is that last one a typo or another darned initialism I've gotta learn?
    A deliberate typo - since HTML 5 isn't SGML it can't be a markup language since SGML is the standard for defining markup languages. Therefore it must be something else - perhaps a Text HyperLanguage Markdown or something instead. Anyway HTML 5 is non-standard where HTML 2 through 4 all followed the standards. Obviously those involved in HTML 5 don't care about standards.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  18. #18
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    I had actually guessed he made that typo deliberately but didn't want to let the cat out. The prior sentences gave a big hint. ;-)

  19. #19
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Deinonychus View Post
    Is there some code to put in the div containing the java script to get rid of the space below each ad?
    Can you provide a link?

  20. #20
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Victorinox View Post
    Can you provide a link?
    Victorinox, here is a link: http://www.nanoweather.com

    It's the small black space below each of the 3 horizontal rectangular ads.

    I also had it below the images on the right and left sidebars but {display: block;} on the images fixed it.


    Here is an enlarged screencap showing the gap or space I refered to:
    space.jpg

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Deinonychus View Post
    It's the small black space below each of the 3 horizontal rectangular ads.
    Add this to your tyle sheet:

    Code:
    ins {vertical-align:bottom;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  22. #22
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ralph. It works like magic.

    I tried googling about ins and css but the info I saw on ins was as it related to html and it appeared to be something entirely different, like an line under text.

    My search was not exhaustive but this is the only link I found that may be related to the problem you solved as it mentions java script and css: http://www.java2s.com/Code/HTMLCSSRe...Properties.htm

    Is this method you showed me not well documented? It worked but I'd like to find more info on why.

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Inline elements (such as img and apparently ins) by default align their baseline with the baseline of the text they could potentially end up sitting next to. That is, they leave space below for the text descenders. (So, if text sits beside them, their bottom will align with the bottom of the text, but any descenders, like that of the p, will hang below.) So it's common to get an annoying gap under images in certain circumstances. You can either use display: block to stop this or change the vertical alignment to "bottom", as I posted.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  24. #24
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanation. The only thing that is confusing to me now is where do I have ins in my html? Was it possibly on some other page the ad company had associated with the java script ads? I've never used ins before in any html document.

    Since adding the vertical-align:bottom; declaration to the ins selector tag on my CSS style sheet corrected the problem I'm assuming that since I don't have any ins tags on my html page that it is on an external java script related page made by the company who makes the ads.

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Deinonychus View Post
    I've never used ins before in any html document.
    The Ads pull in a whole heap of their own code, the out-most of which is a series of ins elements. (View the ads with Firebug or the dev tools of any browser to see what gets pulled in.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •