WHATWG Wiki - User contributions [en]

HTML5 tutorial

2007-06-19T21:04:54Z

Beowulf:

This is an HTML 5 tutorial. There's nothing here yet, feel free to add something!

Example simple

2007-06-19T15:05:04Z

Beowulf: /* Web Browser Results */

This tutorial is aimed at a person using a desktop or laptop computer with a basic text editor. The examples below should be saved to a file with the extension .html. This will help your operating system know that the file is one that should be opened and interpreted by a web browser.

== Step 1: The Basics of an HTML5 Document ==

A basic HTML5 document consists of a DOCTYPE, HTML tag, HEAD tag with TITLE tag and a BODY tag; this is the basis for all HTML5 documents. Tags are...
A comment is...
The DOCTYPE is an exception... included because...

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

</pre>

=== How This Looks ===

Opening this page in a web browser would produce a blank page with a title in the browser window "Lost Cat!". (link to example)

== Step 2: Adding a Heading and Paragraph ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

== Step 3: Adding an Image ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

Example simple

2007-06-19T14:02:13Z

Beowulf:

This tutorial is aimed at a person using a desktop or laptop computer with a basic text editor. The examples below should be saved to a file with the extension .html. This will help your operating system know that the file is one that should be opened and interpreted by a web browser.

== Step 1: The Basics of an HTML5 Document ==

A basic HTML5 document consists of a DOCTYPE, HTML tag, HEAD tag with TITLE tag and a BODY tag; this is the basis for all HTML5 documents. Tags are...
A comment is...
The DOCTYPE is an exception... included because...

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

</pre>

=== Web Browser Results ===

Opening this page in a web browser would produce a blank page with a title in the browser window "Lost Cat!". (link to example)

== Step 2: Adding a Heading and Paragraph ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

== Step 3: Adding an Image ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

Example simple

2007-06-19T10:10:55Z

Beowulf:

This tutorial is aimed at a person using a desktop or laptop computer with a basic text editor. The examples below should be saved to a file with the extension .html. This will help your operating system know that the file is one that should be opened and interpreted by a web browser.

== Step 1: The Basics of an HTML5 Document ==

A basic HTML5 document consists of a DOCTYPE, HTML tag, HEAD tag with TITLE tag and a BODY tag; this is the basis for all HTML5 documents. Tags are...
A comment is...
The DOCTYPE is an exception... included because...

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

</pre>

=== Web Browser Results ===

Opening this page in a web browser would produce a blank page with a title in the browser window "Lost Cat!". (link to example)

== Step 2: Adding a Heading and Paragraph ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
== Step 3: Adding an Image ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

Example simple

2007-06-19T10:08:53Z

Beowulf: /* Step 1: The Basics of an HTML5 Document */

This tutorial is aimed at a person using a desktop or laptop computer with a basic text editor. The examples below should be saved to a file with the extension .html. This will help your operating system know that it's something that should be opened with a web browser.

== Step 1: The Basics of an HTML5 Document ==

A basic HTML5 document consists of a DOCTYPE, HTML tag, HEAD tag with TITLE tag and a BODY tag; this is the basis for all HTML5 documents. Tags are...
A comment is...
The DOCTYPE is an exception... included because...

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

</pre>

=== Web Browser Results ===

Opening this page in a web browser would produce a blank page with a title in the browser window "Lost Cat!". (link to example)

== Step 2: Adding a Heading and Paragraph ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
== Step 3: Adding an Image ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

Example simple

2007-06-19T09:54:06Z

Beowulf: /* Step 2: Adding an Image */

== Step 1: The Basics of an HTML5 Document ==

A basic HTML5 document consists of a DOCTYPE, HTML tag, HEAD tag with TITLE tag and a BODY tag; this is the basis for all HTML5 documents. Tags are...
A comment is...
The DOCTYPE is an exception... included because...

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

</pre>

=== Web Browser Results ===

Opening this page in a web browser would produce a blank page with a title in the browser window "Lost Cat!". (link to example)

== Step 2: Adding a Heading and Paragraph ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
== Step 3: Adding an Image ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

Example simple

2007-06-19T09:52:58Z

Beowulf: /* Step 1: The Basics of an HTML5 Document */

== Step 1: The Basics of an HTML5 Document ==

A basic HTML5 document consists of a DOCTYPE, HTML tag, HEAD tag with TITLE tag and a BODY tag; this is the basis for all HTML5 documents. Tags are...
A comment is...
The DOCTYPE is an exception... included because...

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

</pre>

=== Web Browser Results ===

Opening this page in a web browser would produce a blank page with a title in the browser window "Lost Cat!". (link to example)

== Step 2: Adding a Heading and Paragraph ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen My Cat?</H1>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

== Step 2: Adding an Image ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

Example simple

2007-06-19T09:47:39Z

Beowulf:

== Step 1: The Basics of an HTML5 Document ==

A basic HTML5 document consists of a DOCTYPE, HTML tag, HEAD tag with TITLE tag and a BODY tag; this is the basis for all HTML5 documents. Tags are...
A comment is...
The DOCTYPE is an exception... included because...

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

</pre>

== Step 2: Adding a Heading and Paragraph ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen My Cat?</H1>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

== Step 2: Adding an Image ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

Example simple

2007-06-19T09:46:39Z

Beowulf:

== Step 1: The Basics of an HTML5 Document ==

A basic HTML5 document consists of a DOCTYPE, HTML tag, HEAD tag with TITLE tag and a BODY tag; this is the basis for all HTML5 documents. Tags are...
The DOCTYPE is an exception... included because...

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

</pre>

== Step 2: Adding a Heading and Paragraph ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen My Cat?</H1>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

== Step 2: Adding an Image ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

Example simple

2007-06-19T09:44:12Z

Beowulf: /* Step 1: The Basics of an HTML5 Document */

== Step 1: The Basics of an HTML5 Document ==

A basic HTML5 document consists of a DOCTYPE, HTML tag, HEAD tag with TITLE tag and a BODY tag; this is the basis for all HTML5 documents.

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

</pre>

=== DOCTYPE ===

== Step 2: Adding a Heading and Paragraph ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen My Cat?</H1>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

== Step 2: Adding an Image ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

Example simple

2007-06-19T09:41:09Z

Beowulf:

== Step 1: The Basics of an HTML5 Document ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

</pre>

== Step 2: Adding a Heading and Paragraph ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen My Cat?</H1>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

== Step 2: Adding an Image ==

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>

<P><IMG src="" alt="The cat is black with white paws, and is wearing a
white collar with a small bell attached."></P>
<P>Moggy has been missing since 12th June, 2007 if you see her please
notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
</BODY>
</HTML>

</pre>

Example simple

2007-05-28T15:55:29Z

Beowulf:

<pre>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Lost Cat!</TITLE>
</HEAD>
<BODY>
<H1>Have You Seen This Cat?</H1>

<IMG src="" alt="Moggy is a black cat with white paws, she is wearing a white collar with a small bell attached">
<P>Moggy has been missing since 12th June, 2007 if you see her please notify:</P>
<ADDRESS><A href="mailto:ian@whatwg.org">Ian Hickson</A></ADDRESS>
</BODY>
</HTML>

</pre>

Example simple

2007-05-28T15:43:59Z

Beowulf: messing about..

<pre>

<!DOCTYPE HTML>
<html>
<head>
<title>Lost Cat!</title>
</head>
<body>
<h1>Have You Seen This Cat?</h1>

<p>Moggy has been missing since 12th June, 2007 if you see her please notify:</p>
<address><A href="mailto:ian@whatwg.org">Ian Hickson</A></address>
</body>
</html>

</pre>

HTML5 tutorial

2007-05-28T14:56:10Z

Beowulf:

This is an HTML 5 tutorial. There's nothing here yet, feel free to add something!

== Example HTML5 Documents ==

# [[example_simple | Lost Cat, a simple HTML5 page]]

== HTML5 Tags ==

# [[DOCTYPE]]
# [[HTML]]
# [[HEAD]]
# [[BODY]]

HTML5 tutorial

2007-05-28T14:53:41Z

Beowulf:

This is an HTML 5 tutorial. There's nothing here yet, feel free to add something!

== Example HTML5 Documents ==

# Simple page advertising lost cat

== HTML5 Tags ==

# [[DOCTYPE]]
# [[HTML]]
# [[HEAD]]
# [[BODY]]

HTML5 tutorial

2007-05-28T14:51:37Z

Beowulf:

This is an HTML 5 tutorial. There's nothing here yet, feel free to add something!

== Tags ==

# [[DOCTYPE]]
# [[HTML]]
# [[HEAD]]
# [[BODY]]

DOCTYPE

2007-05-28T14:49:27Z

Beowulf: /* Form */

== About ==

DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.

== Form ==

A DOCTYPE must consist of the following characters, in this order:

# A U+003C LESS-THAN SIGN (<) character.
# A U+0021 EXCLAMATION MARK (!) character.
# A U+0044 LATIN CAPITAL LETTER D or U+0064 LATIN SMALL LETTER D character.
# A U+004F LATIN CAPITAL LETTER O or U+006F LATIN SMALL LETTER O character.
# A U+0043 LATIN CAPITAL LETTER C or U+0063 LATIN SMALL LETTER C character.
# A U+0054 LATIN CAPITAL LETTER T or U+0074 LATIN SMALL LETTER T character.
# A U+0059 LATIN CAPITAL LETTER Y or U+0079 LATIN SMALL LETTER Y character.
# A U+0050 LATIN CAPITAL LETTER P or U+0070 LATIN SMALL LETTER P character.
# A U+0045 LATIN CAPITAL LETTER E or U+0065 LATIN SMALL LETTER E character.
# One or more space characters.
# A U+0048 LATIN CAPITAL LETTER H or U+0068 LATIN SMALL LETTER H character.
# A U+0054 LATIN CAPITAL LETTER T or U+0074 LATIN SMALL LETTER T character.
# A U+004D LATIN CAPITAL LETTER M or U+006D LATIN SMALL LETTER M character.
# A U+004C LATIN CAPITAL LETTER L or U+006C LATIN SMALL LETTER L character.
# Zero or more space characters.
# A U+003E GREATER-THAN SIGN (>) character.

== Example ==

<pre><!DOCTYPE HTML></pre>

DOCTYPE

2007-05-28T14:48:22Z

Beowulf: New page: == About == DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in...

== About ==

DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.

== Form ==

A DOCTYPE must consist of the following characters, in this order:

A U+003C LESS-THAN SIGN (<) character.
A U+0021 EXCLAMATION MARK (!) character.
A U+0044 LATIN CAPITAL LETTER D or U+0064 LATIN SMALL LETTER D character.
A U+004F LATIN CAPITAL LETTER O or U+006F LATIN SMALL LETTER O character.
A U+0043 LATIN CAPITAL LETTER C or U+0063 LATIN SMALL LETTER C character.
A U+0054 LATIN CAPITAL LETTER T or U+0074 LATIN SMALL LETTER T character.
A U+0059 LATIN CAPITAL LETTER Y or U+0079 LATIN SMALL LETTER Y character.
A U+0050 LATIN CAPITAL LETTER P or U+0070 LATIN SMALL LETTER P character.
A U+0045 LATIN CAPITAL LETTER E or U+0065 LATIN SMALL LETTER E character.
One or more space characters.
A U+0048 LATIN CAPITAL LETTER H or U+0068 LATIN SMALL LETTER H character.
A U+0054 LATIN CAPITAL LETTER T or U+0074 LATIN SMALL LETTER T character.
A U+004D LATIN CAPITAL LETTER M or U+006D LATIN SMALL LETTER M character.
A U+004C LATIN CAPITAL LETTER L or U+006C LATIN SMALL LETTER L character.
Zero or more space characters.
A U+003E GREATER-THAN SIGN (>) character.

== Example ==

<pre><!DOCTYPE HTML></pre>

HTML5 tutorial

2007-05-28T14:47:29Z

Beowulf:

This is an HTML 5 tutorial. There's nothing here yet, feel free to add something!

# [[DOCTYPE]]

HTML5 tutorial

2007-05-28T14:47:12Z

Beowulf:

This is an HTML 5 tutorial. There's nothing here yet, feel free to add something!

# DOCTYPE