facebook twitter
Webucator's Free HTML Training Tutorial

Lesson: Introduction to HTML

Welcome to our free HTML Training tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

HyperText Markup Language (HTML) is the language behind most web pages. The language is made up of elements that describe the structure of the content on a web page.

HTML is maintained by two separate groups: the World Wide Web Consortium (W3C) and WHATWG. See https://www.w3.org/html/ and https://html.spec.whatwg.org/ for the specifications. In this lesson, we will look at the basics of HTML.

Lesson Goals

  • Learn to create a simple HTML page.
  • Learn about HTML elements and attributes.
  • Create the skeleton of an HTML document.
  • Learn about whitespace and HTML.
  • Learn to output special characters in HTML.
  • Learn about the history of HTML.

A Simple HTML Document

Duration: 5 to 15 minutes.

In this exercise, you will create your first HTML document by simply copying the text shown below. The purpose is to give you some sense of the structure of an HTML document.

  1. Create a new file in your editor.
  2. Save the file as hello-world.html in the HTMLBasics/Exercises folder.
  3. Type the following exactly as shown:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello world!</title>
    </head>
    <body>
    	<p>
    		Hello world!
    	</p>	
    </body>
    </html>
  4. Save the file again and then open it in your browser by navigating to the file in your folder system and double-clicking on it. The page should appear as follows:Hello World

Solution:

HTMLBasics/Solutions/hello-world.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello world!</title>
</head>
<body>
  <p>
    Hello world!
  </p>  
</body>
</html>

The HTML Skeleton

At its simplest, an HTML page contains what can be thought of as a skeleton - the main structure of the page. It looks like this:

HTMLBasics/Demos/skeleton.html
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
 </head>
 <body>
  <!--Content that appears on the page-->
 </body>
</html>

The <head> Element

The <head> element contains content that is not displayed on the page itself. Some of the elements commonly found in the <head> are:

  • Title of the page (<title>). Browsers typically show the title in the "title bar" at the top of the browser window.
  • Meta tags, which contain descriptive information about the page (<meta>).
  • Script blocks, which contain JavaScript code for adding functionality and interactivity to a page (<script>).
  • Style blocks, which contain Cascading Style Sheet rules (<style>).
  • References (or links) to external style sheets (<link>).

The <body> Element

The <body> element contains all of the content that appears on the page itself. Tags that can be placed within the <body> tag will be covered thoroughly in this course.

Whitespace

Extra whitespace is ignored in HTML. This means that all hard returns, tabs, and multiple spaces are condensed into a single space for display purposes.

HTMLBasics/Demos/whitespace.html
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Whitespace Example</title>
 </head>
 <body>
  This is a sentence on a single line.

  This
    is
      a
        sentence with
      extra whitespace
  throughout.

 </body>
</html>

Code Explanation

Open HTMLBasics/Demos/whitespace.html in your browser. You will see that the two sentences in the code above will be rendered in exactly the same way. Notice that all extra whitespace is ignored: White Space

Viewing Page Source

Most browsers will let you view the source of an HTML page. This is a useful way to see what the browser sees. In Google Chrome, you can do this by right-clicking on the page and selecting View Page Source: Google Chrome - View Page Source

You will see the source of the page you created:Google Chrome - Page Source

This demonstrates that Chrome does see all the white space in the page source. But it condenses it when it presents the web page.

HTML Elements

HTML elements describe the structure and content of a web page. Tags are used to indicate the beginning and end of elements. The syntax is as follows:

<tagname>Element content</tagname>

Attributes

Tags often have attributes for further defining the element. Attributes usually come in name-value pairs.

Note that attributes only appear in the open tag, like so:

<tagname att1="value" att2="value">Element content</tagname>

There are some attributes that do not need to take a value. You can think of them as being "on" when the attribute is present and "off" when it is not. For example:

<tagname att>Element content</tagname>

The order of attributes is not important.

Empty vs. Container Tags

The tags shown above are called container tags because they have both an open and close tag with content contained between them. Tags that do not contain content are called empty tags. The syntax is as follows:

<tagname>

or

<tagname att1="value" att2="value">

Shortcut Close

Empty tags may also be written as follows:

<tagname />

or

<tagname att1="value" att2="value" />

The forward slash (/) at the end, just before the close angle bracket (>), explicitly indicates that this tag is closed. It also makes the tag XML compliant. In general, it is not necessary to use this shortcut close, but it also doesn't cause any harm. Our only recommendation is that if you use it, use it consistently.

Blocks and Inline Elements

Block Elements

Block elements are elements that separate a block of content. For example, a paragraph (<p>) element is a block element. Other block elements include:

  • Lists (<ul> and <ol>)
  • Tables (<table>)
  • Forms (<form>)
  • Divs (<div>)

Inline Elements

Inline elements are elements that affect only snippets of content and do not block off a section of a page. Examples of inline elements include:

  • Links (<a>)
  • Images (<img>)
  • Form elements (<input>, <button>, <select>, <textarea>, etc.)
  • Phrase elements (<em>, <strong>, <code>, etc.)
  • Spans (<span>)

Comments

Comments are generally used for one of three purposes.

  1. To write helpful notes about the code; for example; why something is written in a specific way.
  2. To comment out some code that is not currently needed, but may be used sometime in the future.
  3. To debug a page.

HTML comments are enclosed in <!-- and -->. For example:

<!-- This is an HTML comment -->

Special Characters

Special characters (e.g., characters that do not show up on your keyboard) can be added to HTML pages using entity names and numbers. For example, a copyright symbol (©) can be added using &copy; or &#169;. The following table shows some of the more common character references: HTML Entities

History of HTML

HTML has a long history and several versions:

  1. HTML was invented in the early 1990s.
  2. In 1996, the World Wide Web Consortium (W3C) began maintaining the HTML specification. At that point HTML was already on version 2.0.
  3. HTML 3.2 and HTML 4.0 were both released in 1997.
  4. XHTML, a separate XML version of HTML, was released in 2000.
  5. HTML5 was released in 2014, updated to HTML 5.1 (now with a space) in 2016, and then to HTML 5.2 in 2017.

Today, two separate groups, the W3C and WHATWG manage separate HTML specifications, with at least a little tension between the two groups. From WHATWG's website: "Although we have asked them to stop doing so, the W3C also republishes some parts of this specification as separate documents."

As a web developer, you don't need to be too concerned with this history. The important question is: what can you do today? Probably the best, most up-to-date online reference is kept by Mozilla at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference.

Because people have been writing HTML for a long time, web pages exist that use deprecated (phased out) tags and outdated techniques, such as using color and bgcolor attributes instead of CSS to add color to pages. Modern browsers tend to be backward compatible, but you should avoid using any deprecated tags and attributes. To indicate that you are using the latest version of HTML, you should use the following DOCTYPE at the beginning of every HTML document:

<!DOCTYPE html>

This DOCTYPE is completely backward compatible and will make all browsers work in "standards mode," which is almost definitely what you want.

Although they are not required, you should generally use the following meta tags:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

The first specifies the character set and the second makes web pages adjust for different screen sizes.

HTML5 / HTML 5

You may hear a lot about HTML5 or HTML 5 (WHATWG calls it HTML5. The W3C calls it HTML 5 with a space.). For a few years, the distinction between HTML 4 and HTML 5 was important. Today, you can simply think of everything as just HTML. The HTML you use will be determined more by what modern browsers support than by what the specifications specify.

The opening of an HTML page should look like this (assuming your page is in English):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

lang Attribute

The lang attribute is used to tell the browser (or other user agent) the language contained within an element. While it is not required, the W3C recommends that lang be included in the html tag of all HTML documents, like so:

<html lang="en">

According to the W3C, this is helpful in:

  • Assisting search engines.
  • Assisting speech synthesizers.
  • Helping a user agent select glyph variants for high quality typography.
  • Helping a user agent choose a set of quotation marks.
  • Helping a user agent make decisions about hyphenation, ligatures, and spacing.
  • Assisting spell checkers and grammar checkers.

If a portion of the page is written in a different language, you can wrap that portion in a tag that includes the lang attribute, like this:

<span lang="fr">Bonjour, mon ami!</span>