L.Adlon Posted May 25, 2014 Share Posted May 25, 2014 For example <img src="images/picture.jpg" alt="" /> I thought this was unanimously considered proper, but now I'm reading that there's debate about its validity, since some argue that it's never 'open' in the first place. In the interest of doing things right (as far as proper HTML/CSS standards are concerned), what is the official (if there is such a thing!) stand on this? Link to comment Share on other sites More sharing options...
Ingolme Posted May 25, 2014 Share Posted May 25, 2014 There's HTML, which is more correct without the closing slash, and XHTML, which is invalid without the closing slash. XHTML was abandoned in favor of HTML 5, so I recommend not worrying about XHTML syntax. 1 Link to comment Share on other sites More sharing options...
davej Posted May 25, 2014 Share Posted May 25, 2014 I close everything just to be consistent, but HTML5 is so forgiving that you can do just about anything. Link to comment Share on other sites More sharing options...
Ingolme Posted May 25, 2014 Share Posted May 25, 2014 If you ask the validator, closing an empty element in HTML with /> will give you a warning. Link to comment Share on other sites More sharing options...
L.Adlon Posted May 25, 2014 Author Share Posted May 25, 2014 Wacky... The last few years, I started doing the close tag (ex. <br /> and more recently <img src= .... />. I guess now I'll go back to not using the close tags! What a kooky, zany world this web thing is. Cool. Thanks! Link to comment Share on other sites More sharing options...
Ingolme Posted May 25, 2014 Share Posted May 25, 2014 As long as you have it clear which language you've decided to use to make your website in you shouldn't have a problem deciding which syntax to use. Either you're using XHTML or you're using HTML, it's not wise to mix them together. There's an alternative syntax for HTML 5 which they've called XHTML 5. If you start your HTML 5 document with an XML declaration <?xml version="1.0" ?> then it's valid and preferable to use XHTML syntax. Link to comment Share on other sites More sharing options...
davej Posted May 25, 2014 Share Posted May 25, 2014 With the w3.org validator? I just tried a little sample and didn't see any warnings. Link to comment Share on other sites More sharing options...
L.Adlon Posted May 25, 2014 Author Share Posted May 25, 2014 From what I've seen in articles on the web, it seems that leaving the slashes out is the 'ideal'. Both may or not be valid, but the (seeming) proper method is to leave it out. ...from what I've seen. ....at least for now. Link to comment Share on other sites More sharing options...
Ingolme Posted May 25, 2014 Share Posted May 25, 2014 It seems HTML 5 does support closing tags with />. If you validate as HTML 4.01 it does show a warning. Line 12, Column 8: NET-enabling start-tag requires SHORTTAG YES <p><br /></p> ✉ For the current document, the validator interprets strings like <FOO /> according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5. This warning and related errors may also be caused by an unquoted attribute value containing one or more "/". Example: <a href=http://w3c.org>W3C</a>. In such cases, the solution is to put quotation marks around the value. Link to comment Share on other sites More sharing options...
davej Posted May 25, 2014 Share Posted May 25, 2014 Yeah, HTML5 tolerates all sorts of wacky stuff so I was surprised that closing tags would be an issue. Link to comment Share on other sites More sharing options...
L.Adlon Posted May 25, 2014 Author Share Posted May 25, 2014 ( Head explodes ) So... the ideal then is to keep them in? Link to comment Share on other sites More sharing options...
Ingolme Posted May 25, 2014 Share Posted May 25, 2014 I don't think you'll find a consensus among experts, really, because the benefits or disadvantages of one or the other are insignificant and they're both valid. It's best you don't worry about it. Link to comment Share on other sites More sharing options...
L.Adlon Posted May 25, 2014 Author Share Posted May 25, 2014 Yep. Link to comment Share on other sites More sharing options...
davej Posted May 25, 2014 Share Posted May 25, 2014 I would definitely suggest that you avoid some of the stuff that HTML5 allows -- because it is simply ugly, ugly, ugly. There are rules and then there are conventions, and just because the newest rules may allow something doesn't mean anyone will consider it good looking code. Closing slashes fall into the "don't care" category. Link to comment Share on other sites More sharing options...
L.Adlon Posted May 25, 2014 Author Share Posted May 25, 2014 Damn, I almost made it out..... Okay, davej... so you are saying I am best to leave the closing slash out of standalone tags? Since either ideology 'works', I'm cool with either one... but if one is considered 'more right' (or futureproof), then I'll gladly favour it. No closing tags it is.... (...waits momentarily, then makes a run for the door) Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 10, 2014 Share Posted June 10, 2014 Just my two cents… Personally I find closing ALL TAGS is consistent, while being picky because they are standalone is just well inconsistent. Does it matter? No. Is it valid? Either or. Now think about how we get into habits. If you close all your tags you will for sure never forget to close all your tags, if you get selective based upon standalone, well then after a few years when you forget this discussion you will start doubting yourself again. Conclusion - Close all your tags… Just me. Link to comment Share on other sites More sharing options...
L.Adlon Posted June 11, 2014 Author Share Posted June 11, 2014 Hi, DarkxPunk. Absolutely. My personal philosophy is to do what is correct/valid in HTML/CSS, even if browsers currently allow non-standard things to pass.... partially (as you say) to keep good habits, and partially because as browsers and compatibility evolve, it'll probably bite you in the butt one day. I personally would prefer to close all tags, but I posted this question because I was not sure if doing so was actually valid or fully supported these days. BTW, as a stinging bit of irony, your signature shoots a hole in what I just said about wanting to do what is correct, as I still use tables for some things... but only because previous attempts to do it with <div> have resulted in unexplained weirdness (as I still learn the quirks and details of CSS... as well as my own errors). Slowly getting there, though. Recently, I've been updating my site (which I previously TRIED to do all proper CSS, but couldn't get fully to work... resulting in a bit of a rats nest of new (good), and old (proper) methods) to a fully properly coded site.... aside from the tables. Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 11, 2014 Share Posted June 11, 2014 We'll keep posting on here if you need ideas or help and we all be glad to point you in the right direction. Link to comment Share on other sites More sharing options...
davej Posted June 11, 2014 Share Posted June 11, 2014 Tables are perfectly fine for "some things" but not as the layout for the entire page. If you need a table then it certainly makes sense to use a table. For overall page layout you should learn to use the natural flow and the proper use of float. Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 11, 2014 Share Posted June 11, 2014 Tables are perfectly fine for "some things" but not as the layout for the entire page. If you need a table then it certainly makes sense to use a table.That is sadly true. No matter how hard I have tried to build a proper database table with CSS, ugh it is a pain in the ######. In those cases (and I bet there are others) tables can seem like the only option. But ###### there must be a way to evolve completely from tables! Also more support for davej, never use them for page layout... Link to comment Share on other sites More sharing options...
L.Adlon Posted June 12, 2014 Author Share Posted June 12, 2014 Thanks guys. Link to comment Share on other sites More sharing options...
Ingolme Posted June 15, 2014 Share Posted June 15, 2014 That is sadly true. No matter how hard I have tried to build a proper database table with CSS, ugh it is a pain in the ######. In those cases (and I bet there are others) tables can seem like the only option. But ###### there must be a way to evolve completely from tables! Also more support for davej, never use them for page layout... It's incorrect to not use a table for database information. Tables have a particular use. Link to comment Share on other sites More sharing options...
L.Adlon Posted June 15, 2014 Author Share Posted June 15, 2014 Hello again, guys. Okay, on the subject of using <div> rather than <table> for formatting, could you give me the proper CSS coding for the following example: On one part of the page, I want a photo on the left side, and some paragraphs of text on the right. Done normally (no tables, and no special <div> formatting), it works until the paragraph is longer than the height of the photo, and then you get this ugly text wrap over, underneath the photo.... fine if there's a lot more text following, but pretty gross if you just have a line or two. So, ideally, you'd want the text to stay within the right half of the screen, even after it (vertically) passes the photo. Done with a table, you just do a simple 2 cell table. Done... but, ya, not 'proper'. I've been trying it with <div>, but am still battling it a bit. I've defined an overall wrapper (containging both halves), then I have the photo as a <div> within that (although I'm not sure if that's redundant) floating left, and then I have another <div> containing all the paragraphs, floating right. As I expected, it breaks... Right now, the text AFTER that all (which should be below all this) ends up being placed first, so I really messed something up. I'm sure i's an incorrect use of float, or the <div> nesting. Could someone outline the proper coding for this sort of thing? Again, basically this block of the page is divided in two... Photo on the left, text on the right (with the left edge of it never going further left than the right edge of the photo). Should be really straightforward, but I never really fully grasped proper control of float (...assuming that's what I'm screwing up here). Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 16, 2014 Share Posted June 16, 2014 (edited) http://codepen.io/anon/pen/yGDCA - Check it. http://jsbin.com/jupeseho - Pick your poison. Edited June 16, 2014 by DarkxPunk Link to comment Share on other sites More sharing options...
davej Posted June 16, 2014 Share Posted June 16, 2014 On one part of the page, I want a photo on the left side, and some paragraphs of text on the right. Done normally (no tables, and no special <div> formatting), it works until the paragraph is longer than the height of the photo, and then you get this ugly text wrap over, underneath the photo.... fine if there's a lot more text following, but pretty gross if you just have a line or two. So, ideally, you'd want the text to stay within the right half of the screen, even after it (vertically) passes the photo. Done with a table, you just do a simple 2 cell table. Done... but, ya, not 'proper'. All you do is divide up your window with whatever divs you need. Maybe just two divs as you say you would do with a table. Maybe three divs so that you can center everything in the window. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now