Editing 1144: Tags
Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.
The edit can be undone.
Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
| Latest revision | Your text | ||
| 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. | |
| − | + | First, in HTML, all tags should be matched with both an open and close tag of the same type <code><div>Like this</div></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. | |
| − | + | 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 elements | ||
| − | |||
| − | |||
{| class="wikitable" | | {| class="wikitable" | | ||
| Line 38: | Line 32: | ||
|- | |- | ||
|} | |} | ||
| − | |||
| − | 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 | + | 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><article></code> tag contains an article, such as a blog post or news article, while an <code><ol></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><article></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><article></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><article></code>s, and read <code><article></code>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. <code><span></code> and <code><div></code> are structural tags; they can contain anything. Their definitions in HTML simply indicate that <code><div></code> is a block tag | + | 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><span></code> and <code><div></code> are structural tags; they can contain anything. Their definitions in HTML simply indicate that <code><div></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><span></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><div></code> or a <code><span></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 | + | 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. |
The title text makes reference to <code>&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 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>&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 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><A></code> tag, seemingly to indicate an answer. In fact, <code><A></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><A></code> and <code>< | + | The title text also uses an <code><A></code> tag, seemingly to indicate an answer. In fact, <code><A></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><A></code> and <code><a></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== | ==Transcript== | ||
| − | |||
:<code><div>Q: How do you annoy a web developer?</span></code><!-- leave this alone, otherwise your browser will try its hardest to parse it, and it will break --> | :<code><div>Q: How do you annoy a web developer?</span></code><!-- leave this alone, otherwise your browser will try its hardest to parse it, and it will break --> | ||
{{comic discussion}} | {{comic discussion}} | ||
| − | |||
