HTML5 and CSS3

HTML

Tim Berners-Lee-Knight-crop Sir Tim Berners-Lee, knighted for his efforts to create the World-Wide-Web.
HTML, or Hyper-Text Markup Language, has become one of the core technologies of the web. It was originally created by Sir Tim Berners-Lee while working at CERN (the European particle physics lab) to share scientific papers. It drew heavily on ideas from Standard Generalized Markup Language (SGML), with the addition of the anchor tag which allows for the linking of documents (the basis for hyper-text). It also briefly flirted with XML-based formats (XHTML), which bear much similarity to SGML with a stricter application of the rules. Like all markup languages, HTML provides additional structure and presentation to plain text.

HTML Version 5

The current version - HTML5 - has broken with both these roots; it does not conform to either the SGML or XML standards though it retains many similarities (in fact, it can often still be parsed by a lenient SGML or XML parser - but definitely not a strict one). There have been many changes to HTML since Tim Berners-Lee’s first draft, including many tags that have been added or depreciated. The authoritative source of which tags are current is the HTML5 standard, which is published by the World Wide Web Consortium.

The World Wide Web Consortium

The World Wide Web Consortium, or W3C as it is often called, is the standards-generating body for most Web technologies. Their website is http://www.w3.org. Membership in the W3C includes many of the stakeholders in the industry - browser manufacturers, web developers, researchers, graphic designers, etc. The W3C provides standards for a family of technologies which they refer to as the Open Web Platform. Rather than being a single monolithic standard, the Open Web Platform is broken into technology categories, which, while interdependent to a certain degree, can be developed separately.

The Standards Adoption Process

These categories are organized around working groups - W3C members and invited stakeholders and experts that are responsible for developing the standards. The process begins with interest in a topic, which is reflected by member submissions. When significant interest is generated, a workshop may be organized around the topic. A Working Group is formed to carry out developing standards around the topic. The Working Group develops standards through an iterative process of publication and public review:

  1. Publication of a First Public Working Draft
  2. Publication of subsequent Public Working Drafts
  3. Publication of a Candidate Recommendation
  4. Publication of a Proposed Recommendation
  5. Publication of a W3C Proposed Recommendation
  6. Possibly, Publication as an Edited Recommendation

It is not uncommon for more active browser manufacturers to begin adopting or even pre-empt working drafts (usually because they are active in the Working Group and trying out ideas). Once a standard reaches Candidate Recommendations, most browser manufacturers begin to at least implement the easier parts. A full W3C Proposed Recommendation is generally adopted into browsers or at least on the manufacturer’s roadmap for adoption - but do note, even at this stage the standard remains a recommendation - there is nothing (other than market pressures) which can force a manufacturer to follow the standard.

The HTML5 Standard

HTML5 became a W3C Recommendation on October 28, 2014, and can be found here: https://www.w3.org/TR/2014/REC-html5-20141028/. Much of the same information is also presented in Wiki form by the w3c community - of especial interest is the HTML Elements page: https://www.w3.org/community/webed/wiki/HTML/Elements.

Syllabus HTML5 Activity

Like most classes, we’re going to cover the syllabus - however, in our case the syllabus is in raw HTML5 (visit the link, right click on the page, and choose "view source" from the context menu). Your task is to take on the role of a http user agent (i.e. a web browser) and use the markup to generate a finished page. Use the w3c standard or wiki to help determine what the page should look like, and draw your finished page on the blank piece of paper provided.

Styling Tags

If you had your start with earlier versions of HTML, you may notice a lack of styling tags - those that affect how text is presented (like font, center, strike, tt, blink, marque). This is intentional, as HTML is now intended primarily to provide structure and semantics (meaning) to the underlying text. Style is to be accomplished with CSS.

CSS

CSS, or cascading style sheets, are a sister technology to HTML that provide guidelines to browsers on how HTML content should be displayed. They do so by providing a set of rules to be applied to specified elements as the page is rendered. Moreover, these rules are typically collected in an external document (the style sheet) that is linked into the HTML document via a link tag. This allows the same style sheet to be used by multiple webpages, leading to faster development and more consistency across multiple pages of the same website.

CSS3

The latest version of CSS - Level 3 or CSS3 - is a bit different than the HTML5 standard, as CSS3 is split thematically into multiple documents and working groups. For example, there is a CSS Color Module Level 3 recommendation, A Media Queries Recommendation, a Selectors Level 3 Recommendation, a Namespaces Module Level 3 Recommendation, etc. This can make navigating the CSS3 standards more challenging (a complete list is available at https://www.w3.org/TR/#tr_CSS). Instead, the developer will likely find the community wiki CSS properties page (https://www.w3.org/community/webed/wiki/CSS/Properties) and selectors page (https://www.w3.org/community/webed/wiki/CSS/Selectors) more useful.

Syllabus CSS3 Activity

Return to your syllabus HTML document, and, with one of the stylesheet handouts, re-draw your syllabus onto a blank sheet of paper following the properties specified in your CSS document.

Media Queries

One increasingly important CSS3 recommendation is Media Queries (W3C Recommendation as of June 19, 2012). This allows the inclusion of a media query in a CSS document to conditionally apply properties based on the display media - its media type (all, aural, braille, handheld, print, projection, screen, tty, tv, embossed, and speech), features (color, monochrome, width, height, device-width, device-height, orientation, aspect-ratio, resolution, scan, and grid). While these were largely adopted to differentiate between screen and print versions of a webpage, they are heavily used in responsive web designs - web pages that display differently based on the size of the device used.

For example, the following CSS code:

@media print { h1 { display: none; } }

will hide all h1 elements when this web page is printed. We'll see this technique leveraged when we talk about responsive web designs.