1144: Tags - Revision history

Davidy22 at 10:07, 20 January 2013

2013-01-20T10:07:37Z

Noëlle: /* Explanation */

2012-12-10T01:47:18Z

‎Explanation

Lcarsos: fixing the ghastly explanation of the anchor tag

2012-12-07T23:05:50Z

fixing the ghastly explanation of the anchor tag

Divad27182: /* Explanation */ three more issues in the title..... :-)

2012-12-07T22:33:58Z

‎Explanation: three more issues in the title..... :-)

Lcarsos: /* Explanation */ explaining HTML nesting, it's a bit big if someone thinks it should move, please do

2012-12-07T21:31:42Z

‎Explanation: explaining HTML nesting, it's a bit big if someone thinks it should move, please do

Ctxppc: Improved formatting.

2012-12-07T18:14:04Z

Improved formatting.

Lcarsos: /* Explanation */ working on the wording

2012-12-07T14:05:36Z

‎Explanation: working on the wording

134.130.182.237: /* Explanation */

2012-12-07T11:42:19Z

‎Explanation

Lcarsos: adding a tiny bit more

2012-12-07T06:21:37Z

adding a tiny bit more

Lcarsos: adding more explanation, and bed time, hope everyone has a lovely night

2012-12-07T06:13:33Z

adding more explanation, and bed time, hope everyone has a lovely night

@@ Line 39: / Line 39: @@
 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>&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 /><!-- sic -->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.

@@ Line 12: / Line 12: @@
 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.
-Another basic idea of HTML is that all tags, or elements, must be properly nested. 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" |
@@ Line 33: / Line 33: @@
 |}
-Usage of <code>&lt;span&gt;</code> and <code>&lt;div&gt;</code> tags should be kept low, for they have no intrinsic semantic value. HTML5 introduced many semantically meaningful tags that essentially follow the same behavior as a div or span, but are easier to understand when reading the markup. Said another way, wrapping a chunk of a page (say a blog post) in a <code>&lt;div&gt;</code> tag means someone reading the markup must look at what the tags enclose to find what use they are serving, wrapping the post in an <code>&lt;article&gt;</code> tag means that any person reading through the markup knows instantly that anything inside that tag is related to an article. Most web designers use <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code> and <code>&lt;table&gt;</code> tags excessively simply for design reasons.
+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.
-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. This is useful for keeping units with a number so it is easy to spot 100&nbsp;km instead of needing to hunt for 100<br /><!-- sic -->km. Having a space on the last word that will force it onto a new line if the space character cannot be fit onto the line, would be annoying.
+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.
-The title text also uses an <code>&lt;A&gt;</code> tag which is called an anchor tag which creates {{w|hyperlink}}s. It is not an answer tag. This tag is generally used with either <code>href=</code> or <code>name=</code> attributes.
+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.
 ==Transcript==

@@ Line 37: / Line 37: @@
 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. This is useful for keeping units with a number so it is easy to spot 100&nbsp;km instead of needing to hunt for 100<br /><!-- sic -->km. Having a space on the last word that will force it onto a new line if the space character cannot be fit onto the line, would be annoying.
-The title text also uses an <code>&lt;A&gt;</code> tag with no attributes.  This tag is generally useless without either <code>href=</code> or <code>name=</code> attributes.
+The title text also uses an <code>&lt;A&gt;</code> tag which is called an anchor tag which creates {{w|hyperlink}}s. It is not an answer tag. This tag is generally used with either <code>href=</code> or <code>name=</code> attributes.
-−
-The title also uses the <code>&lt;A&gt;</code> tag to pretend to supply an A for an A: to provide a marked answer.  Tag texts are not in fact part of the document text.
-−
-The title also mismatches the case between the <code>&lt;A&gt;</code> tag and the <code>&lt;/a&gt;</code> end tag.
 ==Transcript==

← Older revision		Revision as of 22:33, 7 December 2012
Line 36:		Line 36:

	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. This is useful for keeping units with a number so it is easy to spot 100 km instead of needing to hunt for 100<br /><!-- sic -->km. Having a space on the last word that will force it onto a new line if the space character cannot be fit onto the line, would be annoying.		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. This is useful for keeping units with a number so it is easy to spot 100 km instead of needing to hunt for 100<br /><!-- sic -->km. Having a space on the last word that will force it onto a new line if the space character cannot be fit onto the line, would be annoying.
		+
		+	The title text also uses an <code><A></code> tag with no attributes. This tag is generally useless without either <code>href=</code> or <code>name=</code> attributes.
		+
		+	The title also uses the <code><A></code> tag to pretend to supply an A for an A: to provide a marked answer. Tag texts are not in fact part of the document text.
		+
		+	The title also mismatches the case between the <code><A></code> tag and the <code></a></code> end tag.

	==Transcript==		==Transcript==

← Older revision		Revision as of 21:31, 7 December 2012
Line 11:		Line 11:

	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.		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. That is, anything inside a div must be closed before the div is closed.
		+
		+	{\| class="wikitable" \|
		+	! Correct
		+	! Incorrect
		+	\|-
		+	\|
		+	<div>
		+	<ol>
		+	<li>Correctly nested</li>
		+	</ol>
		+	</div>
		+	\|
		+	<div>
		+	<ol>
		+	<li>Incorrectly nested</li>
		+	</div>
		+	</ol>
		+	\|-
		+	\|}

	Usage of <code><span></code> and <code><div></code> tags should be kept low, for they have no intrinsic semantic value. HTML5 introduced many semantically meaningful tags that essentially follow the same behavior as a div or span, but are easier to understand when reading the markup. Said another way, wrapping a chunk of a page (say a blog post) in a <code><div></code> tag means someone reading the markup must look at what the tags enclose to find what use they are serving, wrapping the post in an <code><article></code> tag means that any person reading through the markup knows instantly that anything inside that tag is related to an article. Most web designers use <code><div></code>, <code><span></code> and <code><table></code> tags excessively simply for design reasons.		Usage of <code><span></code> and <code><div></code> tags should be kept low, for they have no intrinsic semantic value. HTML5 introduced many semantically meaningful tags that essentially follow the same behavior as a div or span, but are easier to understand when reading the markup. Said another way, wrapping a chunk of a page (say a blog post) in a <code><div></code> tag means someone reading the markup must look at what the tags enclose to find what use they are serving, wrapping the post in an <code><article></code> tag means that any person reading through the markup knows instantly that anything inside that tag is related to an article. Most web designers use <code><div></code>, <code><span></code> and <code><table></code> tags excessively simply for design reasons.

@@ Line 10: / Line 10: @@
 {{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 <code>&lt;div&gt;Like this&lt;/div&gt;</code>.
+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.
-Second, 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.
+Usage of &lt;span&gt; and &lt;div&gt; tags should be kept low, for they have no intrinsic semantic value. HTML5 introduced many semantically meaningful tags that essentially follow the same behavior as a div or span, but are easier to understand when reading the markup. Said another way, wrapping a chunk of a page (say a blog post) in a <code>&lt;div&gt;</code> tag means someone reading the markup must look at what the tags enclose to find what use they are serving, wrapping the post in an <code>&lt;article&gt;</code> tag means that any person reading through the markup knows instantly that anything inside that tag is related to an article. Most web designers use &lt;div&gt;, &lt;span&gt; and &lt;table&gt; tags excessively simply for design reasons.
-Third, the amount of &lt;span&gt; and &lt;div&gt; tags should be kept low, for they are no good markup. A markup language should only use as many elements as necessary, and elements that have a meaning.
+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. This is useful for keeping units with a number so it is easy to spot 100&nbsp;km instead of needing to hunt for 100<br /><!-- sic -->km. Having a space on the last word that will force it onto a new line if the space character cannot be fit onto the line, would be annoying.
-Most web designers use &lt;div&gt;, &lt;span&gt; and &lt;table&gt; tags excessively simply for design reasons. Unlike lists, images or emphasizes, divs carries no semantics.
-−
-Fourth, there are special characters in HTML, which make the page less readable during edit, and should therefore be used with caution. &amp;nbsp; is the 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. This is useful for keeping units with a number so it is easy to spot 100&nbsp;km instead of needing to hunt for 100<br /><!-- sic -->km. The &amp;nbsp; used here is superfluous at that position.
 ==Transcript==

@@ Line 8: / Line 8: @@
 ==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. In HTML, all tags should be matched with both an open and close tag <code>&lt;div&gt;Like this&lt;/div&gt;</code>. Previous to HTML 4.01 all tags were uppercase 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 stated that no one should use uppercase tags any more, everything should be lowercase.
+{{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. In HTML, all tags should be matched with both an open and close tag <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.
 &amp;nbsp; is the 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. This is useful for keeping units with a number so it is easy to spot 100&nbsp;km instead of needing to hunt for 100<br /><!-- sic -->km.