1144: Tags

Explain xkcd: It's 'cause you're dumb.
(Difference between revisions)
Jump to: navigation, search
(859)
(4 intermediate revisions by 4 users not shown)
Line 8: Line 8:
  
 
==Explanation==
 
==Explanation==
{{w|HTML}} is a markup language used in web development, and is the subject of this comic. The comic employs multiple poor HTML practices while asking the rhetorical question of how best to annoy web developers, effectively answering the question that it poses.  
+
{{w|HTML}} is a markup language used in web development, and is the subject of this comic. The comic employs multiple poor HTML practices while asking the rhetorical question of how best to annoy web developers, effectively answering the question that it poses.
  
First, in HTML, all tags should be matched with both an open and close tag of the same type <code>&lt;div&gt;Like this&lt;/div&gt;</code>. Previous to HTML 4.01 all tags were uppercase (technically elements were uppercase and attributes were lowercase "to improve readability" [http://www.w3.org/TR/1998/REC-html40-19980424/about.html#h-1.2.1]) to make it easier on the browser to parse what was markup and what was content on the page. As is the case with nearly every change to the HTML specification, many developers slowly got lazy and stopped making every tag uppercase forcing browser developers to check for both upper and lowercase as they parsed the markup. When the specification was bumped to XHTML 1.0 it stated that no one should use uppercase tags any more, everything should be lowercase.
+
First, in HTML, all tags should be matched with both an open and close tag of the same type <code>&lt;div&gt;Like this&lt;/div&gt;</code>. Before HTML 4.01, all tags were uppercase (technically elements were uppercase and attributes were lowercase "to improve readability" [http://www.w3.org/TR/1998/REC-html40-19980424/about.html#h-1.2.1]) to make it easier on the browser to parse what was markup and what was content on the page. As is the case with nearly every change to the HTML specification, many developers slowly got lazy and stopped making every tag uppercase forcing browser developers to check for both upper and lowercase as they parsed the markup. When the specification was bumped to XHTML 1.0 it stated that no one should use uppercase tags any more, everything should be lowercase.
  
Another basic idea of HTML is that all tags, or elements, must be properly nested. (Although they have slightly different meanings, the words "elements" and "tags" are generally used interchangeably.) That is, anything inside a div must be closed before the div is closed.
+
Another basic idea of HTML is that all tags, or elements, must be properly nested - although they have slightly different meanings, the words "elements" and "tags" are generally used interchangeably. That is, anything inside a div must be closed before the div is closed.
  
 
{| class="wikitable" |
 
{| class="wikitable" |
Line 32: Line 32:
 
|-
 
|-
 
|}
 
|}
 +
The rules of proper nesting also put restrictions on which tags can be placed where - "block" elements, such as <code>&lt;div&gt;</code> cannot be placed inside "inline" elements, such as <code>&lt;span&gt;</code>, and inline elements must be placed inside a block element of some kind. Thus, <code>&lt;span&gt;&lt;div&gt;</code> is forbidden, even if the tags are closed in the proper order.
  
Further, web developers make a distinction between ''semantic'' and ''structural'' elements. Semantic elements contain a clue in their name as to what kind of an element they are - for example, an <code>&lt;article&gt;</code> tag contains an article, such as a blog post or news article, while an <code>&lt;ol&gt;</code> tag contains an '''o'''rdered '''l'''ist. (It's wise to note that this is not an absolute rule; it's ''possible'' to put non-article content in an <code>&lt;article&gt;</code>, it's just not recommended.) Semantic tags do not, however, indicate how their contents are to be displayed; your browser might display an <code>&lt;article&gt;</code> in the default font, layout, and placement, while mine, a [http://en.wikipedia.org/wiki/Screen_reader screen reader], might ignore everything on the page <code>&lt;article&gt;</code>s, and read <code>&lt;article&gt;</code>s in a soothing voice.
+
Further, web developers make a distinction between ''semantic'' and ''structural'' elements. Semantic elements contain a clue in their name as to what kind of an element they are - for example, an <code>&lt;article&gt;</code> tag contains an article, such as a blog post or news article, while an <code>&lt;ol&gt;</code> tag contains an '''o'''rdered '''l'''ist. (It's wise to note that this is not an absolute rule; it's ''possible'' to put non-article content in an <code>&lt;article&gt;</code>, it's just not recommended.) Semantic tags do not, however, indicate how their contents are to be displayed; your browser might display an <code>&lt;article&gt;</code> in the default font, layout, and placement, while mine, a {{w|screen reader}}, might ignore everything on the page <code>&lt;article&gt;</code>s, and read <code>&lt;article&gt;</code>s in a [[462|soothing voice]].
  
 
Structural tags, on the other hand, give no clues as to what they contain; they just indicate how a web page is to be laid out. <code>&lt;span&gt;</code> and <code>&lt;div&gt;</code> are structural tags; they can contain anything. Their definitions in HTML simply indicate that <code>&lt;div&gt;</code> is a block tag - it can affect both what the text looks like and where it is on the page; by default, it is displayed in a separate block from the rest of the text in the page, and has at least one line break before and after its display - and <code>&lt;span&gt;</code> is an inline tag - it affects what its text looks like, but not where it is on the page. Without additional attributes, it's impossible for a browser to tell what's supposed to be inside a <code>&lt;div&gt;</code> or a <code>&lt;span&gt;</code>, which means that my screen reader can't just pluck out the blog posts and read those.
 
Structural tags, on the other hand, give no clues as to what they contain; they just indicate how a web page is to be laid out. <code>&lt;span&gt;</code> and <code>&lt;div&gt;</code> are structural tags; they can contain anything. Their definitions in HTML simply indicate that <code>&lt;div&gt;</code> is a block tag - it can affect both what the text looks like and where it is on the page; by default, it is displayed in a separate block from the rest of the text in the page, and has at least one line break before and after its display - and <code>&lt;span&gt;</code> is an inline tag - it affects what its text looks like, but not where it is on the page. Without additional attributes, it's impossible for a browser to tell what's supposed to be inside a <code>&lt;div&gt;</code> or a <code>&lt;span&gt;</code>, which means that my screen reader can't just pluck out the blog posts and read those.
  
Currently, the standard of usage is shifting toward using semantic tags over structural tags, since they provide more information to browsers and people reading the source code of web pages. HTML5, the most recent version of the standard web development markup language, is introducing many semantically meaningful tags that can be styled using [http://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS] to follow the same behavior as a div or span, but that are easier to understand when reading the markup or parsing it with a non-standard browser.
+
Currently, the standard of usage is shifting toward using semantic tags over structural tags, since they provide more information to browsers and people reading the source code of web pages. HTML5, the most recent version of the standard web development markup language, is introducing many semantically meaningful tags that can be styled using {{w|Cascading Style Sheets|CSS}} to follow the same behavior as a div or span, but that are easier to understand when reading the markup or parsing it with a non-standard browser.
  
 
The title text makes reference to <code>&amp;nbsp;</code>, which is the {{w|HTML#Character and entity references|HTML escape code}} for {{w|non-breaking space}} which is a type of space that will keep two words together, and will not allow word wrapping to separate them. If the words come at the end of a displayed line, how this is handled depends on the browser and on the element's styling; some browsers and styles will force the connected words onto a new line, while others will "overflow" the edge of the container to accommodate the linked words. This is useful, for example, for keeping units with a number so it is easy to spot 100&nbsp;km instead of needing to hunt for 100<br/>km. 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.
 
The title text makes reference to <code>&amp;nbsp;</code>, which is the {{w|HTML#Character and entity references|HTML escape code}} for {{w|non-breaking space}} which is a type of space that will keep two words together, and will not allow word wrapping to separate them. If the words come at the end of a displayed line, how this is handled depends on the browser and on the element's styling; some browsers and styles will force the connected words onto a new line, while others will "overflow" the edge of the container to accommodate the linked words. This is useful, for example, for keeping units with a number so it is easy to spot 100&nbsp;km instead of needing to hunt for 100<br/>km. 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.
  
 
The title text also uses an <code>&lt;A&gt;</code> tag, seemingly to indicate an answer. In fact, <code>&lt;A&gt;</code> is an anchor tag, which creates {{w|hyperlink}}s. It is not an answer tag. This tag is generally used with either the <code>href=</code> (which creates a link to another URL) or <code>name=</code> (which creates a named anchor on the page that can be linked to with <code>href=#</code>) attribute (but not generally both at once). In addition, the placement of <code>&lt;A&gt;</code> and <code>&lt;a&gt;</code> (the capitalization here is also irritating to a web developer who values consistency) indicates that ": Like " should be a link or named anchor, but "this." should not. Whether or not to include punctuation in an anchor is a matter of some debate among developers, but including excessive whitespace is generally frowned upon, and the anchor ''should'' include all of the relevant text.
 
The title text also uses an <code>&lt;A&gt;</code> tag, seemingly to indicate an answer. In fact, <code>&lt;A&gt;</code> is an anchor tag, which creates {{w|hyperlink}}s. It is not an answer tag. This tag is generally used with either the <code>href=</code> (which creates a link to another URL) or <code>name=</code> (which creates a named anchor on the page that can be linked to with <code>href=#</code>) attribute (but not generally both at once). In addition, the placement of <code>&lt;A&gt;</code> and <code>&lt;a&gt;</code> (the capitalization here is also irritating to a web developer who values consistency) indicates that ": Like " should be a link or named anchor, but "this." should not. Whether or not to include punctuation in an anchor is a matter of some debate among developers, but including excessive whitespace is generally frowned upon, and the anchor ''should'' include all of the relevant text.
 
[[859: (]] is another attempt to hijack this need for (semantic) closure.
 
  
 
==Transcript==
 
==Transcript==
 
:<code>&lt;div&gt;Q: How do you annoy a web developer?&lt;/span&gt;</code><!-- leave this alone, otherwise your browser will try its hardest to parse it, and it will break -->
 
:<code>&lt;div&gt;Q: How do you annoy a web developer?&lt;/span&gt;</code><!-- leave this alone, otherwise your browser will try its hardest to parse it, and it will break -->
 +
 +
==Trivia==
 +
*[[859: (]] is another attempt to hijack this need for (semantic) closure.
  
 
{{comic discussion}}
 
{{comic discussion}}

Revision as of 15:20, 18 April 2014

Template:comic

Explanation

Template:w is a markup language used in web development, and is the subject of this comic. The comic employs multiple poor HTML practices while asking the rhetorical question of how best to annoy web developers, effectively answering the question that it poses.

First, in HTML, all tags should be matched with both an open and close tag of the same type <div>Like this</div>. 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. As is the case with nearly every change to the HTML specification, many developers slowly got lazy and stopped making every tag uppercase forcing browser developers to check for both upper and lowercase as they parsed the markup. When the specification was bumped to XHTML 1.0 it stated that no one should use uppercase tags any more, everything should be lowercase.

Another basic idea of HTML is that all tags, or elements, must be properly nested - although they have slightly different meanings, the words "elements" and "tags" are generally used interchangeably. That is, anything inside a div must be closed before the div is closed.

Correct Incorrect
<div>
    <ol>
        <li>Correctly nested</li>
    </ol>
</div>
<div>
    <ol>
        <li>Incorrectly nested</li>
    </div>
</ol>

The rules of proper nesting also put restrictions on which tags can be placed where - "block" elements, such as <div> cannot be placed inside "inline" elements, such as <span>, and inline elements must be placed inside a block element of some kind. Thus, <span><div> is forbidden, even if the tags are closed in the proper order.

Further, web developers make a distinction between semantic and structural elements. Semantic elements contain a clue in their name as to what kind of an element they are - for example, an <article> tag contains an article, such as a blog post or news article, while an <ol> tag contains an ordered list. (It's wise to note that this is not an absolute rule; it's possible to put non-article content in an <article>, it's just not recommended.) Semantic tags do not, however, indicate how their contents are to be displayed; your browser might display an <article> in the default font, layout, and placement, while mine, a Template:w, might ignore everything on the page <article>s, and read <article>s in a soothing voice.

Structural tags, on the other hand, give no clues as to what they contain; they just indicate how a web page is to be laid out. <span> and <div> are structural tags; they can contain anything. Their definitions in HTML simply indicate that <div> is a block tag - it can affect both what the text looks like and where it is on the page; by default, it is displayed in a separate block from the rest of the text in the page, and has at least one line break before and after its display - and <span> is an inline tag - it affects what its text looks like, but not where it is on the page. Without additional attributes, it's impossible for a browser to tell what's supposed to be inside a <div> or a <span>, which means that my screen reader can't just pluck out the blog posts and read those.

Currently, the standard of usage is shifting toward using semantic tags over structural tags, since they provide more information to browsers and people reading the source code of web pages. HTML5, the most recent version of the standard web development markup language, is introducing many semantically meaningful tags that can be styled using Template:w to follow the same behavior as a div or span, but that are easier to understand when reading the markup or parsing it with a non-standard browser.

The title text makes reference to &nbsp;, which is the Template:w for Template:w which is a type of space that will keep two words together, and will not allow word wrapping to separate them. If the words come at the end of a displayed line, how this is handled depends on the browser and on the element's styling; some browsers and styles will force the connected words onto a new line, while others will "overflow" the edge of the container to accommodate the linked words. This is useful, for example, for keeping units with a number so it is easy to spot 100 km instead of needing to hunt for 100
km. 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.

The title text also uses an <A> tag, seemingly to indicate an answer. In fact, <A> is an anchor tag, which creates Template:ws. It is not an answer tag. This tag is generally used with either the href= (which creates a link to another URL) or name= (which creates a named anchor on the page that can be linked to with href=#) attribute (but not generally both at once). In addition, the placement of <A> and <a> (the capitalization here is also irritating to a web developer who values consistency) indicates that ": Like " should be a link or named anchor, but "this." should not. Whether or not to include punctuation in an anchor is a matter of some debate among developers, but including excessive whitespace is generally frowned upon, and the anchor should include all of the relevant text.

Transcript

<div>Q: How do you annoy a web developer?</span>

Trivia

  • 859: ( is another attempt to hijack this need for (semantic) closure.

Template:comic discussion

Personal tools
Namespaces

Variants
Actions
Navigation
Tools

It seems you are using noscript, which is stopping our project wonderful ads from working. Explain xkcd uses ads to pay for bandwidth, and we manually approve all our advertisers, and our ads are restricted to unobtrusive images and slow animated GIFs. If you found this site helpful, please consider whitelisting us.

Want to advertise with us, or donate to us with Paypal?