032.1 Lesson 1

Certificate:

Web Development Essentials

Version:

1.0

Topic:

032 HTML Document Markup

Objective:

032.1 HTML Document Anatomy

Lesson:

1 of 1

Introduction

HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure and display web pages. The current version is 5.0, which was released in 2012. The HTML syntax is defined by the World Wide Web Consortium (W3C).

HTML is a fundamental skill in web development, as it defines the structure and a good deal of the appearance of a website. If you want a career in web development, HTML is definitely a good starting point.

Anatomy of an HTML Document

A basic HTML page has the following structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My HTML Page</title>
    <!-- This is the Document Header -->
  </head>

  <body>
    <!-- This is the Document Body -->
  </body>
</html>

Now, let’s analyze it in detail.

HTML Tags

HTML uses elements and tags to describe and format content. Tags consist of angle brackets around a tag name, for example <title>. The tag name is not case-sensitive, although the World Wide Web Consortium (W3C) recommends using lowercase letters in current versions of HTML. These HTML tags are used to build HTML elements. The tag <title> is an example for an opening tag of an HTML element that defines the title of an HTML document. However, an element has two further components. A full <title> element looking like this:

<title>My HTML Page</title>

Here, My HTML Page serves as the element content, while </title> serves as the closing tag that declares that this element is complete.

Note	Not all HTML elements need to be closed; in such cases, we speak of empty elements, self-closing elements, or void elements.

Here are the other HTML elements from the previous example:

<html>: Encloses the entire HTML document. This contains all the tags that make up the page. It also indicates that the content of this file is in HTML language. Its corresponding closing tag is </html>.
<head>: A container for all meta information regarding the page. The corresponding closing tag of this element is </head>.
<body>: A container for the page content and its structural representation. Its corresponding closing tag is </body>.

The <html>, <head>, <body> and <title> tags are so-called skeleton tags, which provide the basic structure of an HTML document. In particular, they tell the web browser that it is reading an HTML page.

Note	Of these HTML elements, the only one that is required for an HTML document to be validated is the `<title>` tag.

As you can see, each HTML page is a well-structured document and could even be referred to as a tree, where the <html> element represents the document root and the <head> and <body> elements are the first branches. The example shows that it is possible to nest elements: For example, the <title> element is nested inside the <head> element, which is in turn nested inside the <html> element.

To ensure that your HTML code is readable and maintainable, make sure that all HTML elements are closed properly and in order. Web browsers may still render your web site as expected, but incorrect nesting of elements and their tags is an error-prone practice.

Finally, a special mention goes to the doctype declaration at the very top of the example document structure. <!DOCTYPE> is not an HTML tag, but an instruction for the web browser that specifies the HTML version used in the document. In the basic HTML document structure shown earlier, <!DOCTYPE html> was used, specifying that HTML5 is used in this document.

HTML Comments

When creating an HTML page, it is good practice to insert comments into the code to improve its readability and describe the purpose of larger code blocks. A comment is inserted between the  tags, as shown in the following example:

<!-- This is a comment. -->

<!--
    This is a
    multiline
    comment.
-->

The example demonstrates that HTML comments can be placed in a single line, but may also span over multiple lines. In any case, the result is that the text between  is ignored by the web browser and therefore not displayed in the HTML page. Based on these considerations, you can deduce that the basic HTML page shown in the previous section does not display any text, because the lines  and  are just two comments.

Warning

Comments cannot be nested.

HTML Attributes

HTML tags may include one or more attributes to specify details of the HTML element. A simple tag with two attributes has the following form:

<tag attribute-a="value-a" attribute-b="value-b">

Attributes must always be set on the opening tag.

An attribute consists of a name, which indicates the property that should be set, an equal sign, and the desired value within quotes. Both single quotes and double quotes are acceptable, but it is recommended to use of single quotes or double quotes consistently throughout a project. It is important not to mix single and double quotes for a single attribute value, as the web browser will not recognize mixed quotes as one unit.

Note

You can include one type of quotation marks within the other type without any problems. For example, if you need to use ' in an attribute value, you can wrap that value within ". However, if you want to use the same type of quotation mark inside the value as you are using to wrap the value, you need to use " for " and ' for '.

The attributes can be categorized into core attributes and specific attributes as explained in the following sections.

Core Attributes

Core attributes are attributes that can be used on any HTML element. They include:

title: Describes the content of the element. Its value is often displayed as a tooltip that is shown when the user moves their cursor over the element.
id: Associates a unique identifier with an element. This identifier must be unique within the document, and the document will not validate when multiple elements share the same id.
style: Assigns graphic properties (CSS styles) to the element.
class: Specifies one or multiple classes for the element in a space-separated list of class names. These classes can be referenced in CSS stylesheets.
lang: Specifies the language of the element content using ISO-639 standard two-character language codes.

Note	The developer can store custom information about an element by defining a so-called `data-` attribute, which is indicated by prefixing the desired name with `data-` as in `data-additionalinfo`. You can assign this attribute a value just like any other attribute.

Specific Attributes

Other attributes are specific to each HTML element. For example, the src attribute of an HTML <img> element specifies the URL of an image. There are many more specific attributes, which will be covered in the following lessons.

Document Header

The document header defines meta information regarding the page and is described by the <head> element. By default, the information within the document header is not rendered by the web browser. While it is possible to use the <head> element to contain HTML elements that could be displayed on the page, doing so is not recommended.

Title

The document title is specified using the <title> element. The title defined between the tags appears in the web browser title bar and is the suggested name for the bookmark when you try to bookmark the page. It is also displayed in search engine results as the title of the page.

An example of this element is the following:

<title>My test page</title>

The <title> tag is required in all HTML documents and should appear only once in each document.

Note	Do not confuse the title of the document with the heading of the page, which is set in the body.

Metadata

The <meta> element is used to specify meta information to further describe the content of an HTML document. It is a so-called self-closing element, which means that it does not have a closing tag. Aside from the core attributes that are valid for every HTML element, the <meta> element also uses the following attributes:

name: Defines what metadata will be described in this element. It can be set to any custom defined value, but commonly used values are author, description, and keywords.
http-equiv: Provides an HTTP header for the value of the content attribute. A common value is refresh, which will be explained later. If this attribute is set, the name attribute should not be set.
content: Provides the value associated with the name or http-equiv attribute.
charset: Specifies the character encoding for the HTML document, for example utf-8 to set it to Unicode Transformation Format — 8-bit.

Add an Author, Description, and Keywords

Using the <meta> tag, you can specify additional information about the author of the HTML page and describe the page content like this:

<meta name="author" content="Name Surname">
<meta name="description" content="A short summary of the page content.">

Try to include a series of keywords related to the content of the page in the description. This description is often the first thing a user sees when navigating with a search engine.

If you also want to provide additional keywords related to the web page to search engines, you can add this element:

<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">

Note

In the past, spammers entered hundreds of keywords and descriptions unrelated to the actual content of the page so that it also appeared in searches unrelated to the terms people searched for. Nowadays, <meta> tags are relegated to a position of secondary importance and are used only to consolidate the topics covered in the web page, so that it is no longer possible to mislead the new and more sophisticated search engine algorithms.

Redirect an HTML Page and Define a Time Interval for the Document to Refresh Itself

Using the <meta> tag, you can automatically refresh an HTML page after a certain period (for example after 30 seconds) in this way:

<meta http-equiv="refresh" content="30">

Alternatively, you can redirect a web page to another web page after the same amount of time with the following code:

<meta http-equiv="refresh" content="30; url=http://www.lpi.org">

In this example, the user is redirected from the current page to http://www.lpi.org after 30 seconds. The values can be anything you like. For example, if you specify content="0; url=http://www.lpi.org", the page is redirected immediately.

Specify the Character Encoding

The charset attribute specifies the character encoding for the HTML document. A common example is:

<meta charset="utf-8">

This element specifies that the document’s character encoding is utf-8, which is a universal character set that includes practically any character of any human language. Therefore, by using it, you will avoid problems in displaying some characters that you may have using other character sets such as ISO-8859-1 (the Latin alphabet).

Other Useful Examples

Two other useful applications of the <meta> tag are:

Set cookies to keep track of a site visitor.
Take control over the viewport (the visible area of a web page inside a web browser window), which depends on the screen size of the user device (for example, a mobile phone or a computer).

However, these two examples are beyond the scope of the exam and their study is left to the curious reader to explore elsewhere.

Guided Exercises

For each of the following tags, indicate the corresponding closing tag:

<body>

<head>

<html>

<meta>

<title>
What is the difference between a tag and an element? Use this entry as a reference:

<title>HTML Page Title</title>
What are the tags between which a comment should be placed?
Explain what an attribute is and provide some examples for the <meta> tag.

Explorational Exercises

Create a simple HTML version 5 document with the title My first HTML document and only one paragraph in the body, containing the text Hello World. Use the paragraph tag <p> in the body.
Add the author (Kevin Author) and description (This is my first HTML page.) of the HTML document.
Add the following keywords related to the HTML document: HTML, Example, Test, and Metadata.
Add the <meta charset="ISO-8859-1"> element to the document header and change the Hello World text to Japanese (こんにちは世界). What happens? How can you solve the problem?
After changing the paragraph text back to Hello World, redirect the HTML page to https://www.google.com after 30 seconds and add a comment explaining this in the document header.

Summary

In this lesson you learned:

The role of HTML
The HTML skeleton
The HTML syntax (tags, attributes, comments)
The HTML head
The meta tags
How to create a simple HTML document

The following terms were discussed in this lesson:

<!DOCTYPE html>: The declaration tag.
<html>: The container for all the tags that make up the HTML page.
<head>: The container for all head elements.
<body>: The container for all body elements.
<meta>: The tag for metadata, used to specify additional information for the HTML page (such as author, description, and character encoding).

Answers to Guided Exercises

For each of the following tags, indicate the corresponding closing tag:

<body>

</body>

<head>

</head>

<html>

</html>

<meta>

None

<title>

</title>
What is the difference between a tag and an element? Use this entry as a reference:

<title>HTML Page Title</title>

An HTML element consists of a start tag, a closing tag, and everything between them. An HTML tag is used to mark the beginning or end of an element. Therefore, <title>HTML Page Title</title> is an HTML element, while <title> and </title> are the start and closing tag respectively.
What are the tags between which a comment should be placed?

A comment is inserted between the  tags and can be put on a single line or can span multiple lines.
Explain what an attribute is and provide some examples for the <meta> tag.

An attribute is used to more precisely specify an HTML element. For example, the <meta> tag uses the name and content attribute pair to add the author and description of an HTML page. Instead, using the charset attribute you can specify the character encoding for the HTML document.

Answers to Explorational Exercises

Create a simple HTML version 5 document with the title My first HTML document and only one paragraph in the body containing the text Hello World. Use the paragraph tag <p> in the body.
```
<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>
```

Add the author (Kevin Author) and description (This is my first HTML page.) of the HTML document.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

Add the following keywords related to the HTML document: HTML, Example, Test and Metadata.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

Add the <meta charset="ISO-8859-1"> element to the document header and change the Hello World text to Japanese (こんにちは世界). What happens? How can you solve this situation?

If the example is carried out as described, the Japanese text is not displayed correctly. This is because ISO-8859-1 represents character encoding for the Latin alphabet. To view the text, you need to change the character encoding, using for example UTF-8 (<meta charset="utf-8">).

After changing the paragraph text back to Hello World, redirect the HTML page to https://www.google.com after 30 seconds and add a comment explaining this in the document header.

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
    <meta charset="utf-8">
    <!-- The page is redirected to Google after 30 seconds -->
    <meta http-equiv="refresh" content="30; url=https://www.google.com">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>