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.

Tag structure

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:

<body>  
    ... Page content ...
</body>

Closing tags

The only difference between opening and closing tags is that closing tags have a forward slash ( / ) preceeding the tag text.

</tag>

As an aside, some tags are self closing. Self closing tags look like this:

<tag />

Basic elements

Lets take a look at several basic elements of the HTML. 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 basic HTML pages.

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

Document type declaration

Once you have a blank document, add a DOCTYPE to the beginning of the document. Doctype is short for 'Document Type Declaration'. The HTML5 doctype is below:

<!DOCTYPE html>

The HTML tag

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 tag yet, we will place the closing <html> tag at the end of the document.

Document header

Next, place the document header with a tag. The <head> tag is a container for elements such as the page title, style (CSS) for layout), and scripts (JavaScript) for dynamic elements.

<head>

Document title

Insert the page <title> inside of the <head> like so:

<title>Page title text</title>

Meta tag with character set

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 with a charset attribute.

 <meta charset="UTF-8" />

Close the document header

Next we close the <head> tag:

 <head>

Document Body

In an HTML document, the contains content.

<body>

Content headers

In the body, we will typically have page sections and paragraphs of content. The sections are usually seperated by headers. Headers are hierarchical, and higher number header levels are generally sub-sections of the lower numbered headers:

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

Content paragraphs

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

<p>Throwup on your pillow, all of a sudden go crazy, swat at dog.</p>

Wrap things up

At the end of your document, be sure to close the <body> and the <html>, in nested order (usually indented to show nesting):

    </body>
</html>

Conclusion

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

Assignment

Post a working HTML document online, demonstrating all elements explained in this document.

You can do so by posting on Mozilla Thimble or any other online code pasting/hosting website.

Submit a link to your task by replying to this task.

HTML Introduction