Getting Started With HTML

This tutorial is part of a web programming course for people who have no programming experience.




HTML is a language used to create web pages. There are other programming languages used in creating web pages as well, but we'll start with HTML because it's the easiest one to learn. The letters HTML stand for hypertext markup language. If you do a quick google search for 'hypertext' you'll find that it is text in a document that can be clicked on, which will link to other hypertext documents. You probably already know that web pages (also known as HTML documents) usually contain links to other web pages. If you google 'markup language' you'll find that it is a way of annotating the text in a document so it can be displayed in different ways. For example, if you want some text on a page to appear big and bold you could use HTML code to do so, like this:

<b>This text will be bold.</b>

In HTML, the annotations are called tags, and here we have a pair of b tags that contain the text to be bolded (as you may have guessed the 'b' stands for bold). Note that each tag is is enclosed within a 'less than' and a 'greater than' character. Also note that the ending tag includes a forward slash. These characters make up the syntax of the HTML language.

What is 'Syntax'?

The rules of HTML require that tags must be enclosed within a pair of angle brackets, which is simply a less-than character and a greater-than character. These characters make up the syntax of the HTML language. Every programming language has it's own rules of syntax, which are special characters that are used in writing the code. Syntax for programming languages is similar to grammar for written languages. For example, the English languages makes heavy use of commas, periods, quotation marks, etc. These characters help us to understand the meaning of the words used in a message. Likewise, certain characters are used in programming to help the computer understand the code we write. One of the challenges of learning any programming language is getting familiar with the syntax. Luckily, the syntax rules for HTML are pretty simple. For now, all you need to worry about are the angle brackets and forward slashes that are used to create tags.

Tags Pairs

In the above code sample, the two b tags work together to act as a contianer to mark the beginning and end of the text that should appear as bold. When a pair of tags work together to contain text, the first one is called the opening tag and the second one is called the closing tag. The closing tag should have a forward slash before the tag name. The tag name in this example is simply 'b'. There are many other tag names that you can use to markup the text content of a web page. For example, if you wanted to make text appear in italicized font, you could use a pair of i tags like so:

<i>This text will be italicized.</i>

Again, note how the pair of i tags act as a container to mark the beginning and the end of text that should appear in italics. The concept of containers is very important in HTML, and we'll be digging deeper into this concept later. But for now, note that a pair of tags that work together to act as a container are known as an element.

If you wanted text to appear as both bold and italicized you could do it like this:

<b><i>This text will be bold and italicized.</i></b>

In this example, the b element contains the the i element, which in turn contains the text to appear as bold and italicized. HTML elements often contain many other elements, and even the simplest of web pages are actually a complex hierarchy of elements nested within one another.

HTML Documents are Hierarchical Data Structures

An HTML document is a hierarchical collection of elements. Hiearchical data is based on the concept of nested containers. A great example of hierarchical data is the file system on a computer. A folder acts as a container for other folders (and files). In HTML, the containers are elements (rather than folders), and like a file system HTML documents can become quite complex with elements nested deeply within other elements.

The Structure of an HTML Document

HTML documents must follow a specific structure in order to be valid. The HTML code for a web page must start with an html element, and all of the other elements must be contained within it. This means that the code for a web page must start with an opening html tag, and end with a closing html tag, like so:

<html>
    All other elements must be placed here, nested within the html element
</html>

The opening html tag marks the begining of the HTML document, and the closing html tag marks the end of the document. In other words, the html element contains the contents of the entire document. It is known as the root element.

Nested directly within the html element there should be a head element and a body element, like so:

<html>
  <head>METADATA GOES HERE</head>
  <body>THE VISIBLE CONTENT OF THE PAGE GOES HERE</body>
</html>

Before we discuss the purpose of the head and body elements, take note of how the code is formatted. To help programmers visualize the structure of an HTML document, elements that are nested within another element should be indented. In this example, the head and body elements are indented to show that they are contained within the html element. You should always follow this formatting convention when writing your code, and as you learn more about programming, you'll see that other languages have similar conventions that all programmers should follow. The benefits of formatting your code properly may not be apparent in this simple example, but as your web pages become more complicated (with many more elements) it really pays to keep your code nice and neat.

Now let's discuss the head and body elements, which are required in every HTML document. The head element contains metadata, which is information about the page, and it is not visible when the web page is viewed in the browser window. For example, you might put elements inside the head element that are meant for search engines, so that they can properly index your page.

The body element contains all the content that appears in the browser window when the page is viewed. The b element and the i element that we saw earlier would be placed inside the the body because they provide markup for content that is seen when the page is loaded in the browser. We'll be spending most of our time in the next few lessons working within the body element.

Just like many other types of documents, HTML documents should display some sort of heading at the top which explains the main topic. In order to add such a heading, you would use an h1 element. You'll see other variations of how to add headings (and sub-headings) to your pages in the next lesson.

<html>
  <head></head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

If you viewed this HTML document in a browser you would see a page that simply displays a heading that says 'Hello World!' in big bold letters.

Since we are discussing the structure (of elements) that are required to make a valid HTML document, there's one more element that we need to discuss. Every page should have a title element nested within the head element. The title element, as you might guess, allows you to specify a title for your web page.

<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Search engines will look inside the head element for the title, and every page that you create should include a title that describes the topic of the page. I mentioned earlier that the head element is for metadata that is not visible when the page is loaded in the browser window. The text inside the title element is actually visible, but it appears in the browser tab, which is considered to be separate from the browser window.

There is one final bit of code that we must add in order to make our HTML document valid. It's technically not an element, although it looks a lit bit like one. It's called the document type declaration. At this point, you don't need to know anything about the document type declaration, other than it declares which version of HTML the document is using. The latest version is HTML 5, and the declaration for it should be the first line of code (ironically there is no 5 in this line of code!). The code below is a fully valid HTML document in it's simplest form.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Every page that we create in this course will start out like this, although the text inside the title and main heading (the h1 element) will obviously change. This is the basic structure of elements that are required to make a valid HTML document.

If you put this code into a file, and save it with an extension of .html, you will have created your very first web page. Then you can double-click on the file to open it in your default browser!

Remember that HTML documents are hierarchical data structures, which can be visualized as a series of nested containers. In other words, each element can be thought of as a box that can contain other boxes. The box diagram below shows the structure of the page that we created during this lesson.

html
head
title     My First Page
body
h1     Hello World!

I like this diagram because it not only helps to visualize the basic structure that every HTML must follow, it also shows how elements nested within other elements should be indented. You'll save yourself a lot of trouble if you indent your code properly!

HTML Is Easy!

HTML is easy, from here you just need to learn about the various types of elements you can use. Now that you know the basic structure of elements that all pages must follow, we can explore other elements that you can use to 'markup' the content in a web page.
NEXT LESSON: Everything You Need To Know To Get Started With HTML