HTML 5 Introduction

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

Task Navigation 

Basic Markup

Learning Objectives

  • Describe the general structure of a document. I.e. what are some common elements found in a magazine article, newspaper page, or other common printed materials.
  • Identify key structural, or semantic, elements of several common documents.
  • Label a printed page or article with related HTML elements.
  • Memorize the HTML5 Doctype.
  • Memorize the UTF-8 charset meta tag.
  • Create a page outline using HTML tags.
  • Distinguish content markup from presentation.

Task Materials

HTML tags are used to mark structural elements of a page. Structural elements include paragraphs, headers, articles, images, and other aspects of hypertext documents.

HTML tags are surrounded by less than ( < ) and greater than ( > ) characters. There will typically be an opening and closing tag that surrounds the corresponding page content. For example, to denote an HTML document you surround the entire page with opening and closing HTML tags:

<html>
... Page content ...
</html>

The only difference between many opening and closing tags is that closing tags have a forward slash ( / ) preceeding the tag text. As an aside, some tags are self closing. Self closing tags look like this:

<br />

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>
  • <meta>
  • <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>

After the document type has been declared, we can go ahead and open our <html> tag, which will hold sub-elements of the document:

<html>

Be sure not to close the <html> tag yet, we will place the </html> tag at the end of the document.

Now we will place the document header with a <head> tag. The <head> tag is a container for elements such as the page title, CSS for layout, and JavaScript for dynamic elements. This course does not cover those topics but there are study groups forming here at the School of Webcraft.

<head>

We can insert the page <title> inside of the <head> like so:

Our document will contain encoded characters, in our native language, that web browsers will need to display. It is important for us to tell the browser what character encoding to use. The unicode (UTF-8) standard contains over one million characters from languages around the earth. We set our character encoding as UTF-8 using the <meta> tag.

<meta charset="UTF-8" />

Next we close the <head> tag:

</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 <hgroup>  tag is used for when <h> tags are used consecutively after each other.

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.

Task Assignment

Please post a working HTML document online. You can do so by posting on HTML pad, pastebin, 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.

Task Discussion