Agenda

Character Sets And Languages

The W3C recommends the UTF-8 charset for web development. It includes an impressive array of languages and special characters, and is well supported in common devices.

Assign Character Set

If it is not specified, a web browser will choose the character set it thinks is most appropriate, but it is a better practice for the developer to ensure the correct character set by applying the meta tag to the head section of every HTML page:

<meta charset="utf-8" />

HTML lang Attribute

Use the lang="" attribute to declare the language in HTML. This is usually applied to the html element. Assigning the appropriate language code will apply to all contained content, unless over-ridden with another lang="".

Use the language abbreviations from the standard ISO 639-1 code set (don't use ISO 639-2).

HTML

What started as a language defined by SGML (Standard Generalized Markup Language), HTML is used to mark up billions of pages, making up the bulk of the web.

HTML 4.01 template

The problem with the state of HTML then was its reputation as a loose language. Poorly structured code would be rendered differently across user agents, leading to forked code and less predictable results.

XHTML

The XHTML specification was the result of rewriting HTML 4.01 using the ruleset derived from XML

XHTML Rules:

XHTML 1.0 template

HTML5

As of October 28, 2014, HTML5 is the official W3C recommendation

HTML5 is more evolutionary then revolutionary. The bulk of previous HTML elements and attributes are maintained, with a few deprecations, and several additions.

Significant features include:

HTML 5 template

Paving the Cowpaths

Common developer practices have been simplified

HTML5: Enhanced Semantic Coding

It is crucial for all HTML content to be semantically marked up. This is how browsers, search engines, and screen readers make sense of online content.

HTML5 provides more than just adjustments to the markup, there are new, powerfully semantic elements:

These represent some big changes in HTML, allowing for more flexibility in coding and specifying content. Many of these will replace and reduce the need for many div tags. eg: instead of the typical <div id="header">, use <header>.

Having trouble deciding which tag to use for what content? Try this HTML5 flowchart.

HTML5 Semantic Alterations

HTML5 also brings a few notable semantic alterations to older tags:

HTML5 Content Models

Pre-HTML5, there were basically two categories of tags: inline and block. HTML5 intoduces a more nuanced set of categories that allow for greater semantic sectioning of content. The content model will help the browser to determine the semantics of your content.

Content Models

Sectioning Content

The <section> tag can be used to semantically group content. It can remove ambiguity when a page is being processed by the browser, a screen reader, or search engine.

For example, imagine you have created the following code:

Since content that follows a heading is presumed to be associated with that heading, the code above carries plenty of semantic value already. But, if the small tag's content is intended to apply to all cities, a browser has no way of knowing that. It will instead assume the small tag is associated with the preceding heading (<h3>Tokyo</h3>)

Use the section tag to explicitly demarcate the start and end of the related content:

This new sectioning will inform the browser that the small is associated with the h1

In HTML5, each piece of sectioned content has its own self-contained outline. This means you wont need to worry as much about which level heading tag to use. You can use an h1 inside a section and it will be treated as the heading of the section, and have lesser semantic impact than an h1 that is at a higher level.

Forms

HTML 5 adds several new form attributes that prove quite useful, even if some are as yet poorly supported.

Scaleable Vector Graphics

Scaleable Vector Graphics (SVG) can be embedded into HTML5 documents. SVG are 100% scalable without the pixelated effect that scaled raster images can suffer from. SVG file data is stored as text, so they are much smaller in file size than a raster equivalent.

You can use SVG graphics with the img tag, just as with raster graphics. You can also use .svg as a CSS background-image.

<img src="images/logo.svg" alt="COMP 1950 logo" />

The png on the left is 26KB. The .svg on the right is only 4KB.

Alternatively, you can use SVG code 'inline' with the svg tag. The advantage of doing this is it will result in one less request/response between the client and the server. The disadvantage to inline SVG is that it adds considerable clutter to your your .html code. Just copy the source code from your .svg file and paste it directly into your .html!

<svg viewBox="0 0 55 28">
	<!-- svg code goes here... sometimes there is a LOT of code here! -->
</svg>

SVG Tools

Use an SVG application to help you create and manipulate your SVG code.

Multimedia

HTML5's more responsive multimedia features have made it easier to provide appropriately formatted video and audio to the client.

Audio

The audio element provides a way to offer many audio formats to the client, allowing the browser to choose the one most suitable.

The most common audio formats for the web are: audio/mp3, audio/mpeg and audio/ogg.

Each audio tag may contain:

<audio controls="controls">
	<source src="media/house-a-square.mpg" type="audio/mpeg" />
	<source src="media/house-a-square.mp3" type="audio/mp3" />
	<source src="media/house-a-square.ogg" type="audio/ogg" />
</audio>

Download the audio

Video

The video element provides a way to offer many video formats to the client, allowing the browser to choose the one most suitable.

The most common video formats for the web are: video/mp4, video/ogg and video/webm.

Each video tag may contain:

<video 	preload="none" 
	controls="controls" 
	poster="media/poster-bear-in-water.jpg">
	
	<source src="media/bear-in-water.webm" type="video/webm" /> 
	<source src="media/bear-in-water.mp4" type="video/mp4" />
	<source src="media/bear-in-water.ogg" type="video/ogg" />
</video>	

Download the video

Format Conversion

There are several tools available for creating the required audio and video formats. Some are online and free to use.

HTML5 Today

User agent browsers will have varying support for the HTML5 specification.

To Do

Session #3's quiz will be written, closed book