HTML 5 Introduction

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Basic Markup [May 22, 2011, 3:23 p.m.]

Lets take a look at several basic elements of the HTML. We will start off by creating a simple resume or other document of your choice. The elements we will start with include:

  • <!DOCTYPE html>
  • <head>
  • <body>
  • <h1>, <h2>, etc.
  • <p>

With this limited set of elements we can begin to construct our own HTML resume.

To begin, create a new, empty text file on your local computer or on HTML Pad.

Once you have a blank document, add a DOCTYPE to the beginning of the document. Doctype is short for 'Document Type Declaration' and associates a particular document with a formally defined mark up definition. Our doctype is html. When a browser, such as Mozilla Firefox, parses a document, the doctype declaration describes the possible tags that the browser may encounter. The HTML5 doctype is below:

<!DOCTYPE html>

Once the DOCTYPE has been declaired, we can place the first structural element in the page called the head. The <head> tag is a container for elements such as CSS and JavaScript. This course does not cover those topics but there are study groups forming here at the School of Webcraft. For now, go ahead and close your head container with a closing tag </head> as below:

<head></head>

In an HTML document, the <body> is usually located below the <head>. The body is a container for most of your content. Lets open the body container.

In the body, we will typically have page sections and paragraphs of content. The sections are usually seperated by headers. Lets create a couple of header sections:

<h1>Header 1</h1>

<h2>Header 2 (sub-section)</h2>

The headers are hierarchical and higher number header levels are generally sub-sections of the lower numbered headers. In this example, the <h2> is a sub section of the <h1> element.

The final step on this short trip through the basic HTML tags is the often used paragraph tag <p>. Paragraph tags are used to designate paragraphs within a document. For example:

<p>The quick brown fox jumped over the lazy dog.</p>

At the end of your document, be sure to close the <body> and the <html> with:

</body>

</html>

As you can see, the HTML elements are designed to be easily understood by humans, as well as parsed by computers.

Please post a working HTML document online. You can do so by posting on HTML pad, pastebin.org, or any other online code pasting/hosting website. If you have your own web hosting feel free to post your HTML files there, or any other reasonable place you know of. Submit a link to your task by replying to this task.