Editing Talk:1144: Tags

I literally grimaced when I saw the comic, and then I read the title text and my stomach churned, and then I saw the non-breaking space and I wanted to crawl up in a ball and die. [[User:Lcarsos|lcarsos]]<span title="I'm an admin. I can help.">_a</span> ([[User talk:Lcarsos|talk]])  06:01, 7 December 2012 (UTC)

:Most people curl up into a ball to die. Well not most people...  [[Special:Contributions/192.104.231.235|192.104.231.235]] 17:50, 8 May 2013 (UTC)skrame

I'm a web developer and I didn't find this annoying, although I did roll my eyes. Then I came here to see if there was anything I missed that SHOULD annoy me. No, to annoy a web developer you have to use table tags, blink tags(not supported on most browsers for good reason, annoys anybody when it works), and have a stray !-- inside a tag where it doesn't belong. Also, use any html inside your css file. And have it where it only works in IE. [[User:Ferretwilliams|Ferretwilliams]] ([[User talk:Ferretwilliams|talk]]) 06:11, 7 December 2012 (UTC)

:That's okay, it's easy to implement blink with javascript and changing the display value from hidden to inline every half second. And lots of news sites these days re-implement the marquee tag with a bit of javascript too. What Randall really missed here was an opportunity for the center and font tags. [[User:Lcarsos|lcarsos]]<span title="I'm an admin. I can help.">_a</span> ([[User talk:Lcarsos|talk]])  06:18, 7 December 2012 (UTC)

:I'm sure Randall didn't want us to die, that's why he didn't go further. :-p [[User:Ctxppc|Ctxppc]] ([[User talk:Ctxppc|talk]]) 18:16, 7 December 2012 (UTC)

Argh. Almost as bad as unclosed left parentheses.(Y'know, like this.     [[User:DreamingDaemon|DreamingDaemon]] ([[User talk:DreamingDaemon|talk]]) 10:21, 7 December 2012 (UTC)

:You mean like comic [[859]]?
::That's exactly what I meant... People do that to me in emails because they know it presses my buttons! [[User:DreamingDaemon|DreamingDaemon]] ([[User talk:DreamingDaemon|talk]]) 16:56, 7 December 2012 (UTC)
:::I understand your pain.)
It's been a long while since I coded html (I quit about the time style sheets appeared) but I think the annoying part of <code>&amp;nbsp;</code> is the fact that it appears as the 6 characters instead of a space, not just that it's at the end and could push the text to another line. Doesn't this typically mean that someone copied some code but didn't look carefully at the results when they pasted it into an editor? --[[User:DanB|DanB]] ([[User talk:DanB|talk]]) 14:27, 7 December 2012 (UTC)

:Either the title text has been parsed - in which case it's actually <code><nowiki>&amp;lt;A&amp;gt;: Like&amp;lt;/a&amp;gt; this&amp;amp;nbsp;</nowiki></code> (and, yes, probably copy/pasted) - or it hasn't (which seems more likely to me), in which case the <code>&amp;nbsp;</code> will show up as a non-breaking space when it is parsed. [[User:Noëlle|Noëlle]] ([[User talk:Noëlle|talk]]) 00:40, 8 December 2012 (UTC)

::The title text is copy/pasted from xkcd, where he escapes the ampersand so that the non-breaking space escape will show up in the title text. He might just be toying with those of us who know about the non-breaking space, as most people (the kind of people that would mis-match div and span and change the case of their tags) don't even know what a non-breaking space would be used for. [[User:Lcarsos|lcarsos]]<span title="I'm an admin. I can help.">_a</span> ([[User talk:Lcarsos|talk]])  03:37, 8 December 2012 (UTC)

::: I know. :) I was answering Dan's question. Assuming the title text is going into a webpage, either the whole thing is already parsed, in which case the tags will also appear as they currently do, or it's not parsed yet and the <code>&amp;nbsp;</code> will appear properly in the rendered page. :) [[User:Noëlle|Noëlle]] ([[User talk:Noëlle|talk]]) 01:53, 10 December 2012 (UTC)

I wonder if the "answer" in the title text is yet another joke? It goes <A>: Like</A> this&nbsp; — but A used in this way means Anchor, not Answer. Such a line would appear in the browser as "Like this" (with the word Like blue and underlined), making it a clickable "Like" link. {{unsigned|69.158.169.14}}

: I think there is another joke hidden there: It goes »<A>: Like </A>this« instead of »: <A>Like</A> this« which turns not only »Like« but also the surrounding whitespace and punctuation into a link/anchor. That points to WYSIWYG HTML editors, as it's easy there to select a little bit more than the intended word when creating a link/marking text as bold, etc. [[Special:Contributions/178.201.95.76|178.201.95.76]] 01:03, 8 December 2012 (UTC)

::Actually, the Like wouldn't be blue and underlined BECAUSE it lacks the href. At least in firefox. The <a name> and <a href> are so different that browser apparently don't do either when neither are present. -- [[User:Hkmaly|Hkmaly]] ([[User talk:Hkmaly|talk]]) 11:48, 8 December 2012 (UTC)

Similarly, it would be nice to address whether you can close a <code><nowiki><div></nowiki></code> with a <code><nowiki></span></nowiki></code>. Obviously you're not supposed to, but would it work? &ndash;&nbsp;''[[User:Philosopher|Philosopher]]''&nbsp;<sup>[[User talk:Philosopher|Let us reason together.]]</sup> 20:57, 7 December 2012 (UTC)

:Opening but not closing a div tag, depends on how a browser's quirks mode interprets that; I'd expect the browser to have everything fall into that div until it encounters a close tag of an element outside (that the div is nested inside). I'd also expect that encountering a close span without having first pushed an open span tag onto the DOM would simply not be recognized as markup and treated as improperly escaped page content. But, I don't write code for any of the major browsers so this is ''wild'' speculation. [[User:Lcarsos|lcarsos]]<span title="I'm an admin. I can help.">_a</span> ([[User talk:Lcarsos|talk]])  21:24, 7 December 2012 (UTC)

::You can't close a DIV with a SPAN; they're syntactically different and browsers treat them as such. If you try the code above, the major browsers do exactly as Lcarsos suggests with the open DIV (continue until they find a matching /DIV or until /BODY) and completely ignore the /SPAN (Chrome goes so far as to expunge it from the DOM entirely). The DIV behavior exposes a subtler aspect to the comic, actually - because DIV isn't a semantic element, if a /DIV is missing, it can get very, very difficult to track down where the appropriate /DIV is supposed to go, especially when multiple coders are working on a single long (and, in the worst-case scenario, improperly-nested, multi-file) page. [[User:Noëlle|Noëlle]] ([[User talk:Noëlle|talk]]) 00:39, 8 December 2012 (UTC)

:::Note that "multi-file" is common when it's application output and not static page. Even if the files are supposed to be correctly nested, it may be hard to find which of them isn't, especially taking into account "if"s of template engine. The template engine may not really help you, similarly to some interprets or compilers of programming language which tells you they are missing some closing symbol near the end of file even when the place they are actually missing from is somewhere in the middle, because they paired them incorrectly. -- [[User:Hkmaly|Hkmaly]] ([[User talk:Hkmaly|talk]]) 11:48, 8 December 2012 (UTC)

There needs to be a little more explanation of what &lt;div&gt; and &lt;span&gt; tags are. I come here to have the jokes I don't get explained, and after a sentence like "Usage of &lt;span&gt; and &lt;div&gt; tags should be kept low, for they have no intrinsic semantic value," I need a site called "explainexplainxkcd.com." [[Special:Contributions/24.224.110.93|24.224.110.93]] 01:17, 9 December 2012 (UTC)

: I clarified in the explanation. Does that look better? [[User:Noëlle|Noëlle]] ([[User talk:Noëlle|talk]]) 01:53, 10 December 2012 (UTC)

::Yes, thanks. I'm afraid I still don't have much idea what &lt;div&gt; and &lt;span&gt; are, but it looks like that's because it would to hard to absolutely fully explain. Thanks! [[Special:Contributions/98.122.166.235|98.122.166.235]] 04:07, 10 December 2012 (UTC)

:::It would, but I'll give it a shot! First, let's establish that DIV and SPAN are HTML elements that surround text or other elements on the page. You generally don't see <code>&lt;div&gt;</code> by itself; you see <code>&lt;div&gt;Some stuff&lt;/div&gt;</code>. The forward slash in the second tag tells the browser to close the DIV element. (That's the difference between a tag and an element; <code>&lt;div&gt;</code> and <code>&lt;/div&gt;</code> are both tags, but we refer to <code>&lt;div&gt;contents&lt;/div&gt;</code> as a page element.)

:::Now, to extend the metaphor into the real world, you can think of <code>&lt;div&gt;</code> as meaning "container" and <code>&lt;span&gt;</code> as meaning "effect". "Container" doesn't mean very much by itself; it's just "a thing into which you can put other things". Likewise, "effect" just means "a way in which you can change how other things look". ("Effect" isn't necessarily the best term here, but I can't think of a better one.) "Container" provides no clues as to what kind of container it is or what you might find inside; "effect" doesn't really tell you what kind of visual change you're getting.

:::Imagine, then, a Christmas tree. You can put the Christmas tree in a tree stand (<code>&lt;div class="tree-stand"&gt;Christmas tree&lt;/div&gt;</code>) or inside a big box (<code>&lt;div class="big-box"&gt;Christmas tree&lt;/div&gt;</code>), or both at once if you're feeling saucy (<code>&lt;div class="big-box"&gt;&lt;div class="tree-stand"&gt;Christmas tree&lt;/div&gt;&lt;/div&gt;</code>). Note that the closing tag will backtrack through the code and close the first DIV it finds, so that you could put other things inside the big box too: <code>&lt;div class="big-box"&gt;&lt;div class="tree-stand"&gt;Christmas tree&lt;/div&gt;Christmas cookies&lt;/div&gt;</code>. Likewise, you can attach ornaments and tinsel to the tree. Since they're effects that you're adding to the tree, rather than containers into which you're putting the tree, you'd use SPAN: <code>&lt;span class="ornaments"&gt;Christmas tree&lt;/span&gt;</code> and/or <code>&lt;span class="tinsel"&gt;Christmas tree&lt;/span&gt;</code>. 

:::You can even have a Christmas tree with ornaments on the left and tinsel on the right, in a tree stand, inside a big box, with some cookies in the box with it: 
:::<code>&lt;div class="big-box"&gt;</code>
::::<code>&lt;div class="tree-stand"&gt;</code>
:::::<code>&lt;span class="ornaments"&gt;Christmas&lt;/span&gt; &lt;span class="tinsel"&gt;tree&lt;/span&gt;</code>
::::<code>&lt;/div&gt;</code>
::::<code>Christmas &lt;span class="frosting"&gt;cookies&lt;/span&gt;</code>
:::<code>&lt;/div&gt;</code>
:::(I decided to frost half of the cookies while I was putting them in the box.)

:::There's an important distinction to make here, by the way: the ornaments and tinsel can't help you ''move'' or ''position'' the Christmas tree, and they don't tell you anything about where the tree is, which is why we're using SPAN for them. The big box and tree stand, on the other hand, can be used to move or position the tree, which is why we're using DIV.

:::Meanwhile, HTML5 wants us to use <code>&lt;bigtreebox&gt;</code> and <code>&lt;treestand&gt;</code> for the containers, and <code>&lt;ornaments&gt;</code>, <code>&lt;tinsel&gt;</code>, and <code>&lt;frosting&gt;</code> for the effects.

:::Does that make sense? [[User:Noëlle|Noëlle]] ([[User talk:Noëlle|talk]]) 12:14, 10 December 2012 (UTC)

While I'm thinking about it - DIV and SPAN remain very important tags in web development, because even though they're structural and not semantic, the fact remains that there isn't going to be a pre-defined semantic tag for everything you want to do, and not every browser supports making up your own tags (even though they're supposed to). Until HTML5 is finalized (which is currently projected to happen in 2016, if I'm remembering correctly) and everybody starts supporting arbitrary tag definitions (which may be "never"), DIV and SPAN will remain useful as generic "container"/"effect" tags. [[User:Noëlle|Noëlle]] ([[User talk:Noëlle|talk]]) 12:14, 10 December 2012 (UTC)

As an intelligent human, it irks me when other humans are lazy, sloppy, or otherwise stupid. As a developer, I sometimes deal with all three. My annoyance factor is amplified by the fact that developers are (supposedly) educated and should be held to a higher standard. So the question is not "what can you get away with in most browsers", but "what is the established standard." As Mike Holmes would say, "Do it right the first time."  - Ixalmida --[[Special:Contributions/208.95.30.82|208.95.30.82]] 18:10, 10 December 2012 (UTC)

:[http://xkcd.com/129/ My personal feelings] aside, this isn't an appropriate forum to debate the worthiness of contemporary use of HTML5. [[User:Noëlle|Noëlle]] ([[User talk:Noëlle|talk]]) 22:12, 10 December 2012 (UTC)

[http://i.imgur.com/T9UM3.png How to '''really''' annoy a web developer.] (Including the &amp;nbsp; joke, along with another mangling of &lt;A&gt;!) [[User:Noëlle|Noëlle]] ([[User talk:Noëlle|talk]]) 03:19, 11 December 2012 (UTC)

It seems to me that this explanation is missing part of the joke in the title text. The Anchor tags are excluding the word "this", while it is VERY common to make a link ONLY the word "this", such as "It should look like <A>this</A>". I wouldn't be surprised if I saw something declare that the word "this" is the most hyperlinked word in the English language, LOL! I cannot believe that excluding the word was accidental. - NiceGuy1 [[Special:Contributions/198.41.235.209|198.41.235.209]] 09:02, 23 January 2016 (UTC) I finally signed up! This comment is mine. [[User:NiceGuy1|NiceGuy1]] ([[User talk:NiceGuy1|talk]]) 06:03, 9 June 2017 (UTC)

I used to develop web pages.  Now I'm a plain surfer.  This comic has the wrong text.  It should be "How do you annoy a web surfer?"  I cannot count how many sites are ruined by sloppy coding Just Like Randall Illustrated.  And people expect all browsers to cover up their slovenly laziness.  [[Special:Contributions/172.68.3.127|172.68.3.127]] 05:23, 21 August 2016 (UTC)

"Using a non-breaking space at the end of a line, without another word on its trailing end, is only useful in extremely rare and limited circumstances, and does not generally have a purpose."  A dating site I use allows you to use linebreaks on your profile, but any updates get pushed to the "news feed" without linebreaks, resulting in sentences or lists running together.  Excess spaces are removed, so a non-breaking space (while invisible on the profile) will render the text readable in the feed. [[Special:Contributions/108.162.210.196|108.162.210.196]] 20:17, 8 November 2016 (UTC)


''"Before HTML 4.01, all tags were uppercase (technically elements were uppercase and attributes were lowercase "to improve readability" [1]) to make it easier on the browser to parse what was markup and what was content on the page."'' This is simply wrong. HTML tags have never been case-sensitive (XHTML was). The linked page in no way bears out this assertion. My source is having worked on HTML before HTML 4. I will edit this in 24 hours unless someone objects. That will give me time to find better sources. [[User:AmbroseChapel|AmbroseChapel]] ([[User talk:AmbroseChapel|talk]]) 01:46, 4 September 2017 (UTC)


Sources for HTML not ever being case sensitive, either before or after version 4:

* https://www.w3.org/MarkUp/Wilbur/
* http://www.htmlhelp.com/reference/wilbur/quickref.html
* https://www.cs.tut.fi/~jkorpela/HTML3.2/3.6.html
* http://werbach.com/barebones/intro.html
* http://www.daneverard.co.uk/dan/HTML_Book_1.pdf

Those first three are linked from the official W3C spec. I really think someone made a huge mess of trying to understand HTML's relationship with XHTML? Anyway, as that stuff about case and HTML is simply wrong, I will now edit it out. [[User:AmbroseChapel|AmbroseChapel]] ([[User talk:AmbroseChapel|talk]]) 23:36, 4 September 2017 (UTC)

<div> How do you break a website? </span>
<A>: Like </a>this.&nbsp; [[User:PotatoGod|PotatoGod]] ([[User talk:PotatoGod|talk]]) 03:14, 14 December 2017 (UTC)