HTML5 Tutorial

HTML5 is the future. It was created by a loosely knit consortium made up of Apple, the Mozilla Foundation and Opera Software. The key principles of HTML5 are:

  1. It doesn't introduce changes that makes older (HTML 4.01 and earlier) webpages stop working.
  2. Do not obselete widely used, unofficial techniques, no matter how clumsy or over complicated.
  3. Changes should have a practical purpose.

An example of a simple HTML document:

<!DOCTYPE html>
<title>Hello, World</title>
<p>Hello, World!!!</p>

This example has a mandatory <title> tag which is the title of the document and a <p> tag which is for a paragraph. Both have terminating tags of which the paragraph is not required but is good practice. The <!DOCTYPE html> tag is used to describe the document as an HTML5 one. Without this DOCTYPE tag, one could encounter some strange formatting problems.

Tags are NOT case sensitive.

Traditionally, there would be an <html>, <head> and <body> tag, too. The <html> tag is self explanitory but the <head> tag is used to distinguish information about the document from the document's content (the <body> tag).

<!DOCTYPE html>
<html>
	<head>
		<title>Hello, World</title>
	</head>
	<body>
		<p>Hello, World!!!</p>
	</body>
</html>

More on HTML Tags

Pretty much all websites use UTF-8 character encoding which supports all English and non-English characters. Use a <meta> tag to define this. It is a void element which means it has no nested content (and no closing tag).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello, World</title>
	</head>
	<body>
		<p>Hello, World!!!</p>
	</body>
</html>

Use the <meta> tag to redirect a static web page. The 3 represents the number of seconds to wait.

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="refresh" content="3; url=http://www.prowaretech.com/" />
		<title></title>
	</head>
	<body>
	</body>
</html>

Modify the <html> tag to indicate the natural language of the document; "en" is for English.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Hello, World</title>
	</head>
	<body>
		<p>Hello, World!!!</p>
	</body>
</html>

The <b> tag is used to bold text while the <strong> tag is used for text that has strong importance but it looks like bold text.

The <i> tag is used for text in italics while the <em> tag is used for text that has emphatic stress but it looks like text in italics.

Some valid-but-frowned-upon elements are: <blink> and <marquee>

Deprecated Elements

Some deprecated elements are:

  • <big>
  • <font>
  • <center>
  • <tt>
  • <strike> (use <s> for strikeouts, or use CSS)
  • <acronym> (use <abbr> for abbreviations)
  • <applet> (use <object>)

While <big> is deprecated <small> lives on to represent "small print."

<iframe> also lives on because it is used in many AJAX applications. It lets developers put one document inside another.

<< < [Page 1 of 8] > >>