facebook google plus twitter
Webucator's Free HTML Tutorial

Lesson: Introduction to HTML

Welcome to our free HTML 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 and format of the content on a Web page.

HTML is maintained by the World Wide Web Consortium (W3C). See http://www.w3.org/TR/html4/ and http://www.w3.org/TR/xhtml1/ for the specifications. In this lesson, we will address the differences between HTML and XHTML and discuss the effect of HTML5.

We'll begin the lesson with a simple exercise.

Lesson Goals

  • Create a simple HTML page.
  • Learn about HTML elements and attributes.
  • Learn about the difference between HTML and XHTML.
  • Learn to create the skeleton of an HTML document.
  • Learn about whitespace and HTML.
  • Learn to output special characters in HTML.
  • Learn how the introduction of HTML5 has affected HTML development.

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. Open your editor (e.g., Visual Studio Code).
  2. Save the file as HelloWorld.html in the HTMLBasics/Exercises folder.
  3. Type the following exactly as shown:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <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/HelloWorld.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<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:

Code Sample:

HTMLBasics/Demos/Skeleton.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<!--Content that appears on the page-->
</body>
</html>

Code Explanation

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 or vbscript 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 scope of body tag will be covered thoroughly in this manual.

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.

Code Sample:

HTMLBasics/Demos/Whitespace.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<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

The two sentences in the code above will be rendered in exactly the same way.White Space

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 come in name-value pairs.

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

<tagname att1="value" att2="value">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">

Blocks and Inline Elements

Block-level 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>)
  • Formatting tags (<b>, <i>, <tt>, 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 (i.e., 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

The HTML Version

XHTML 1.0 and HTML 4.0, the precursors to HTML5 consist of the same sets of elements. HTML5, the latest version of HTML, introduces some new elements that will be covered in this course. The only difference between HTML and XHTML is that HTML is fairly flexible, whereas XHTML has strict rules.

HTML has a long history and several versions. Therefore, web pages exist that use deprecated tags and outdated techniques, such as formatting text with <b> or <i> tags to bold or italicize text. But with the introduction of HTML5, there is an easy way out, which we highly recommend as it is both simpler and forward compatible. Older versions of HTML had complicated DOCTYPEs, but these days you can simply use the new HTML5 DOCTYPE:

<!DOCTYPE HTML>

This DOCTYPE is completely backward compatible and will make all browsers work in "standards mode."

HTML5

HTML5 is the latest version of HTML and is in widespread use. HTML5 introduced many useful tags and elements. The DOCTYPE has also been simplified:

  1. Here is the new simpler DOCTYPE: <!DOCTYPE HTML>
  2. Use this simpler meta tag to specify the character set: <meta charset="UTF-8">

The opening of an HTML page should look like this:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">

Many new elements are available in HTML5. Some of the elements improve the readability of the document. For example, the div element in HTML is used to define content regardless of whether the content is a header, a footer, a navigation bar, a section, or some other type of block. In HTML5, we can indicate the block content type more clearly with the following elements: nav, section, and article.

HTML5 also introduces new form input controls by way of new attribute values for the type attribute. For example, input type="date" will cause a date picker to be displayed on browsers such as Edge and Chrome to assist the user with entering a date. If you specify input type="email", then the user must enter a syntactically valid email address. Also, HTML5 supports a range control (input type="range") that allows the user to specify a numeric value using a slider control.

HTML5 contains new media elements. For example the video element displays a control that permits the user to watch a video (e.g., .mp4 file. The audio element displays a control that can be used to play an audio (e.g., .mp3) file.

The need for cookies has been greatly reduced in HTML5 thanks to "local storage" and "session storage" client-side technologies. Local storage can be accessed from within a web page and has no fixed expiration. Session storage is available to a web page within a specific browser tab. Both storage technologies eliminate extra network traffic because the data resides solely on the client.

Local and session storage data is not directly accessible by HTML. Rather, JavaScript must be coded to access the data using the window.localStorage and window.sessionStorage objects.

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>