Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Closing tags in HTML vs. XHTML

    Hi guys, I'm sure there are many answers to this out there but I'm having trouble finding anything definite. I've done a lot of research but tend to get confused by all of the different options when it comes to this exact doctype.

    I am currently finishing up a site which I began with a template. I've heavily edited the template to create a new design but the doctype of course remains the same. This is the info specified in the template:

    <!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

    Even after reading tons of pages on the subject, I can't for my life confirm what type of coding to use when it comes to closing tags. For this particular doctype, do I use:

    <br>, <br/> or <br />
    <a href="url.com">, <a href="url.com"/> or <a href="url.com" />
    <img src="img.jpg">, <img src="img.jpg"/> or <img src="img.jpg" />

    Or does it not matter at all? Is it optional or can it cause problems to use the wrong syntax? I'm sure the answer is quite obvious and yes, I have read through the FAQs, etc. but I'm still a little unsure of the exact rules.

    As of now, my pages uses <br/>, <a href="url.com"> and <img src=img.jpg" /> so they are all possibly following different rules and I just want to clarify whether or not I need to touch that up before the site goes live or if it won't make much of a difference either way.

    Thanks so much!

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    When it comes to closing tags there are three kinds of tags.

    Tags that have no closing tags aka singleton tags.
    e.g. <br>, <hr>, <img>.
    These tags requires the closing slash:
    <br/> , <hr/> , <img src="2"/>, (a space before the slash is optional)

    Normal tags with optional closing tags:
    <td>, <option>
    In xHtml, the closing tag is required:
    <td></td>, <option></option>

    And then the normal tags that also reqiures to be closed in Html:
    e.g <a href=""></a> , <div></div>
    These tags are the same in Html and xHtml.

    Simple rules:
    ALL tags MUST be closed in xHtml.
    If there exist no closing tags (singletons), then the slash is used to close the tag.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay, so I should just tweak the code to make sure that the img tags end with /> as well then...

    And the space before the slash (for img, br, etc.) is always optional? I keep reading contradictory information (ie. that it's a style/taste thing, that some browsers will get mixed up with a space, some will get messed up without a space and so on) so I was getting a bit confused. But what you're saying is that as long as there's a slash before the closing bracket, it makes no difference whether or not there's a space in there, right?

    Thanks so much, I appreciate the assistance.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    I believe that recommending space before the slash, is because you have to separate attributes with a space:
    eg:
    <div id="MyDiv"style="color:blue"/> (invalid)
    vs
    <div id="MyDiv" style="color:blue"/> (valid)

    but the slash is not an attribute.

    AFAIK no major browser care if you use a space or not.
    Last edited by Lerura; 07-29-2012 at 01:27 AM.

  • Users who have thanked Lerura for this post:

    thegingerkid (08-01-2012)

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks!

  • #6
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,350
    Thanks
    13
    Thanked 349 Times in 345 Posts
    one more note: XHTML doesn’t care whether a tag is self-closing or uses a closing element. i.e. the following are equivalent: <br/> & <br></br> or <script ...></script> & <script ... />.

    though be aware that if you serve XHTML as HTML, then you may get invalid HTML or HTML with a different structure (e.g. <div/> in HTML is interpreted as <div> and thus the following code becomes a child of the <div> rather than a sibling)
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by thegingerkid View Post
    And the space before the slash (for img, br, etc.) is always optional?
    The space is only required if you are serv ing the page as HTML to Netscape 4. It was that browser that led to people inserting the space. It is completely unnecessary for any more modern browser (such as IE4+). Of course you can't serve it as XHTML to IE8 or earlier as those browsers don't understand XHTML.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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