HTML and CSS - Revision history

Alex: Updated all links to HTTPS.

2017-02-11T15:37:43Z

Updated all links to HTTPS.

Alex: /* Validation */ Updated links to HTTPS

2017-02-11T15:36:30Z

Validation: Updated links to HTTPS

Alex: /* Typography */ Updated font recommendation

2017-02-11T15:35:00Z

Typography: Updated font recommendation

Alex: /* Units */ Removed obsolete note about rems.

2017-02-11T15:26:00Z

Units: Removed obsolete note about rems.

Shane at 20:01, 28 October 2014

2014-10-28T20:01:53Z

Shane: /* Tags */ Clarifying definitions and adding citation to the spec

2013-09-12T07:33:32Z

Tags: Clarifying definitions and adding citation to the spec

Shane: /* Content Tags with Optional Closing Tag */

2013-09-06T00:33:44Z

Content Tags with Optional Closing Tag

Shane: /* Content Tags with Optional Closing Tag */

2013-09-06T00:27:59Z

Content Tags with Optional Closing Tag

Shane: /* Content Tags with Optional Closing Tag */

2013-09-06T00:14:17Z

Content Tags with Optional Closing Tag

Shane: /* Content Tags with Optional Closing Tag */

2013-09-05T23:57:48Z

Content Tags with Optional Closing Tag

@@ Line 51: / Line 51: @@
 If you've used BBCode before in online forums, HTML should look familiar, except that it uses angle brackets (less-than and greater-than signs) instead of square brackets.
-'''Note:''' There are actually several different types of content elements, including phrasing content, sectioning content, and flow content.  More details can be found [http://www.w3.org/html/wg/drafts/html/master/dom.html#content-models in the HTML5 spec].
+'''Note:''' There are actually several different types of content elements, including phrasing content, sectioning content, and flow content.  More details can be found [https://www.w3.org/html/wg/drafts/html/master/dom.html#content-models in the HTML5 spec].
 ==== Void Elements ====
@@ Line 86: / Line 86: @@
 </source>
-More information is in [http://www.w3.org/TR/html5/syntax.html#optional-tags the HTML5 spec].
+More information is in [https://www.w3.org/TR/html5/syntax.html#optional-tags the HTML5 spec].
 ===== Why to Always Include Closing Tags =====
@@ Line 109: / Line 109: @@
 === Commonly Used Tags ===
-For reference, below is a list of commonly used tags in HTML.  For a complete list, see [http://www.w3.org/TR/html5/#contents section 4 of the HTML 5 Specification].
+For reference, below is a list of commonly used tags in HTML.  For a complete list, see [https://www.w3.org/TR/html5/#contents section 4 of the HTML 5 Specification].
 Void elements are distinguished from content elements by the presence of a trailing slash.
@@ Line 258: / Line 258: @@
 </source>
-Some common CSS selectors are listed below.  For a complete list of CSS selectors, see [http://www.w3.org/TR/CSS/#selectors section 4.2 of the CSS Specification].
+Some common CSS selectors are listed below.  For a complete list of CSS selectors, see [https://www.w3.org/TR/CSS/#selectors section 4.2 of the CSS Specification].
 * '''foo''' selects an element with tag name ''foo''
@@ Line 279: / Line 279: @@
 </source>
-Some common pseudo-classes are listed below.  For a complete list, see [http://www.w3.org/TR/CSS/#selectors section 4.2 of the CSS Specification].
+Some common pseudo-classes are listed below.  For a complete list, see [https://www.w3.org/TR/CSS/#selectors section 4.2 of the CSS Specification].
 * '''foo:first-child''' selects an element matching ''foo'' that is the first child of its parent (i.e., any ''foo'' that doesn't have older siblings)
@@ Line 298: / Line 298: @@
 Selectors are used to select elements that need to have styles applied to them, and properties are used to actually define those styles.  Throughout this section, you've seen properties including '''color''', '''font-family''', '''font-style''', and '''text-decoration'''.  There are dozens more properties you can define, some of which are listed below.
-For a complete list of CSS properties, see [http://www.w3.org/TR/CSS/#properties section 4.1 of the CSS Specification].
+For a complete list of CSS properties, see [https://www.w3.org/TR/CSS/#properties section 4.1 of the CSS Specification].
 * '''background-image''' sets the background image of an element.  Usage: <code>background-image: url(path/to/image.png);</code>
@@ Line 359: / Line 359: @@
 Note that the ''width'' defines only the ''content width''.  To compute the actual "width" of the element, you need to add the left and right padding border, and margin.
-This is only scraping the surface of the CSS box model.  All advanced web sites utilize the box model to its full extent to produce the complex layouts you have come to expect on the internet.  For more information on the CSS box model, read [http://www.w3.org/TR/css3-box/ the W3C specification].
+This is only scraping the surface of the CSS box model.  All advanced web sites utilize the box model to its full extent to produce the complex layouts you have come to expect on the internet.  For more information on the CSS box model, read [https://www.w3.org/TR/css3-box/ the W3C specification].
 === Typography ===
@@ Line 476: / Line 476: @@
 <source lang="html4strict">
 <!--[if lt IE 9]>
-<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 </source>

@@ Line 497: / Line 497: @@
 * '''More Professional.'''  No seasoned web developer will publish a page with accidental syntax errors.
-The industry standard tool for HTML and CSS syntax checking is the '''[http://validator.w3.org/ W3C Validator]'''.  '''You should ALWAYS validate your code before completing your project!'''  The Validator gives very helpful feedback to help you find and fix syntax errors.
+The industry standard tool for HTML and CSS syntax checking is the '''[https://validator.w3.org/ W3C Validator]'''.  '''You should ALWAYS validate your code before completing your project!'''  The Validator gives very helpful feedback to help you find and fix syntax errors.
-For more information on why it is important to validate, see [http://validator.w3.org/docs/why.html the W3C's recommendation].
+For more information on why it is important to validate, see [https://validator.w3.org/docs/why.html the W3C's recommendation].
 === But why don't… ===
-As you play around with the validator, you may have discovered that household name sites like [http://www.google.com/ Google] and [http://www.yahoo.com/ Yahoo] do not pass the validator.  This is a deliberate act on the part of these web sites because of the following reasons:
+As you play around with the validator, you may have discovered that household name sites like [https://www.google.com/ Google] and [https://www.yahoo.com/ Yahoo] do not pass the validator.  This is a deliberate act on the part of these web sites because of the following reasons:
 * '''Download Speed.'''  Sometimes, but not always, valid code adds bytes to the file size.  Sites that serve tens of thousands of requests per second are highly concerned with the increased file size.

@@ Line 379: / Line 379: @@
 That was it.  Incredibly limiting.
-However, fonts other than these are used widely on the Web.  How?  CSS has evolved to the point where it now allows you to upload a font to your server, and use that font on your site.  My favorite place to go for free Web fonts is [http://fontsquirrel.com/ FontSquirrel].  For more information and more places to get Web fonts, [http://www.sitepoint.com/5-of-the-best-css3-font-tools/ read this article on SitePoint].
+However, fonts other than these are used widely on the Web.  How?  CSS has evolved to the point where it now allows you to upload a font to your server, and use that font on your site, or even include CSS from another server that adds the fonts you want. One excellent resource for a wide variety of fast, appropriately-licensed fonts is [https://fonts.google.com/ Google Fonts].
 == Using HTML and CSS in your Web Page ==

@@ Line 323: / Line 323: @@
 * '''em''', which defines a distance relative to font size.  (Note: an ''em'' is the width of the capital letter M.  No, I'm not kidding.)
 * '''rem''', which defines a distance relative to the font size of the root element.  Compare to '''em''', which defines a distance relative to the font size of the current element (which might have a different font size than the document root).
 * '''pt''', which is a traditional print unit equal to 1/72 of an inch (should appear the same size on all screens regardless of resolution).
 * '''%''', which defines a distance relative to that property of its parent element.  For the most part, you'll only use % when working with the Box Model (see below).

@@ Line 444: / Line 444: @@
 <!DOCTYPE html>
 <head>
 <title>My Web Page</title>
 <style type="text/css">

@@ Line 39: / Line 39: @@
 === Tags ===
-Tags define the content of your page.  Each tag represents an ''element''.  There are two types of elements: content elements and void elements.
+Tags define the content of your page.  Each tag represents an ''element''.  There are two main types of elements: content elements and empty elements.
 ==== Content Elements ====
@@ Line 50: / Line 50: @@
 If you've used BBCode before in online forums, HTML should look familiar, except that it uses angle brackets (less-than and greater-than signs) instead of square brackets.
 ==== Void Elements ====
-A '''void element''' or '''empty element''' represents an element on your page that does not participate in the nesting hierarchy.  A void element looks like this:
+A '''void element''' or '''empty element''' represents an element on your page that does not participate in the nesting hierarchy.  An empty element looks like this:
 <source lang="html4strict">
@@ Line 59: / Line 61: @@
 </source>
-Although the trailing slash is optional on void elements, it is considered best practice to include it, and it also makes it more clear what's a content element and what's a void element when reviewing your code.
+Although the trailing slash is optional on void/empty elements, it is considered best practice to include it, and it also makes it more clear what's a content element and what's a void element when reviewing your code.
 ==== Content Tags with Optional Closing Tag ====

@@ Line 63: / Line 63: @@
 ==== Content Tags with Optional Closing Tag ====
-HTML has a quirk in that a few content tags, such as <nowiki><p></nowiki>, <nowiki><tbody></nowiki>, and <nowiki><li></nowiki>, do not require that the end tag be present.  For example, the following code will pass the validator:
+HTML has a quirk in that a few content tags, such as <nowiki><p></nowiki>, <nowiki><tbody></nowiki>, and <nowiki><li></nowiki>, do not require that the end tag be present.  In addition, <nowiki><html></nowiki>, <nowiki><head></nowiki>, and <nowiki><body></nowiki> may ''sometimes'' be omitted.  For example, the following code will pass the validator as a valid HTML5 document:
 <source lang="html4strict">
-<div>
+<!DOCTYPE html>
-	<p>
+<!-- implicit <html▷ -->
-		Hello
+<!-- implicit <head▷ -->
-	<!-- implicit close paragraph: a new paragraph is starting -->
+	<title>My Miniature Document</title>
-	<p>
+<!-- implicit </head▷ because the <body▷ is starting -->
-		World
+<!-- implicit <body▷ -->
-	<!-- implicit close paragraph: the parent element's end tag is encountered -->
+	<div>
-</div>
+		<p>
 </source>

@@ Line 75: / Line 75: @@
 </div>
 </source>
 But seriously, '''it will make your life easier if you always include closing tags''', even if they are technically optional.  It might be advantageous to take advantage of this HTML quirk is if you are hard-core trying to optimize the load speed of your pages, but in most other cases, omitting closing tags will only cause frustration.  '''Be explicit.'''

@@ Line 68: / Line 68: @@
 <div>
 	<p>
-		Hello World
+		Hello
 </div>
 </source>
-In addition, the following code also passes the validator:
+But seriously, '''it will make your life easier if you always include closing tags''', even if they are technically optional.  It might be advantageous to take advantage of this HTML quirk is if you are hard-core trying to optimize the load speed of your pages, but in most other cases, omitting closing tags will only cause frustration.  '''Be explicit.'''
 === Attributes ===