Editing 1144: Tags

{{comic
| number    = 1144
| date      = December 7, 2012
| title     = Tags
| image     = tags.png
| titletext = &lt;A&gt;: Like &lt;/a&gt;this.&amp;nbsp;<!-- leave this alone, otherwise your browser will try its hardest to parse it, and it will break -->
}}

==Explanation==
First of all, this comic clearly annoyed enough web developers to get them to write this long explanation about this comic.

{{w|HTML}} is a markup language used in the development of websites, and is the subject of this comic. Most distinct elements of a webpage – like this paragraph of text, the title of this section, or the logo in the top-left of this page – are enclosed in HTML tags which describe the type of object they are. 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.

In HTML, all elements (except self-closing elements like <code>&lt;img&gt;</code>) should consist of an open and close tag of the same type <code>&lt;div&gt;Like this&lt;/div&gt;</code>.

HTML (except in its formulation as an XML language—XHTML) has never been case-sensitive, but the practice of using uppercase tags for readability is long outmoded, and the mixing of cases in this example would definitely annoy a developer.

Another basic idea of HTML is that all elements should be properly nested. That is, any element whose open tag occurs inside a div must be closed before the div is closed.

NB: In practice, web browsers will error-correct nearly all these problems.

{| class="wikitable" |
! Correct
! Incorrect
|-
|
 &lt;div&gt;
     &lt;ol&gt;
         &lt;li&gt;Correctly nested&lt;/li&gt;
     &lt;/ol&gt;
 &lt;/div&gt;
|
 &lt;div&gt;
     &lt;ol&gt;
         &lt;li&gt;Incorrectly nested&lt;/li&gt;
     &lt;/div&gt;
 &lt;/ol&gt;
|-
|}
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 {{w|screen reader}}, might ignore everything on the page except <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.

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. For example, <span style="background: #eeeeee;">this is in a span</span> and <div style="background: #eeeeee;">this is in a div.</div>

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.

==Transcript==
:[The two tags are colored in grey.]
:<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 -->

{{comic discussion}}
[[Category:How to annoy]]