HTML Overview

This lesson is part of the Web Programming 1 Course.

A web page displays content much like a news paper. If you look at a news paper you'll see that the content on the front page is structured in a way that makes it easy to read. The title of the headline story is big and bold and appears at the top of the page. There may be a short description of the main story just below the title, which will be a smaller text size. The titles of other articles on the page will probably use bold font, but smaller than the title for the main story. The page will be laid out in such a way that it's easy to read and skim for the new stories that interest you.

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. And 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.

When programming a web page, we can use various elements to structure the content, much like we would for a news paper. In the last lesson we learned how to use an h1 element to add headings to a page (every page on your website should have a big heading near the top so that your visitors know what the page is about). There are also h2 and h3 elements, and the text that you put inside them will be smaller than the text in an h1 element.

In the video for this lesson, we created a web page named overview.html that looked like this early on:

<!DOCTYPE html>
<html>
  <head>
    <title>Overview of HTML</title>
  </head>
  <body>
    <h1>This is an H1 element</h1>
    <h2>This is an H2 element</h2>
    <h3>This is an H3 element</h3>
  </body>
</html>

If you load this page in your browser, you'll see that the content inside the h1 element is the biggest. The h2 displays it's content slightly smaller. And the content in the h3 is smaller yet. You can use these elements to create headings and sub-headings for the content on a web page.

By the way, in the video our starter code began with this line of code:

<!DOCTYPE html>

This is known as the document type declaration. And it just indicates that we are using the latest version of HTML, which is version 5 (ironically, there is no '5' in the document type declaration - I don't know why).

Another way to structure the content of a page is to divide it into paragraphs. To add a paragraph of content to a web page, use a p element.

Add these two paragraphs to the body of the page we have created (you can put them just under the h3 element):

<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>

Save your changes and view the page in the browser. Note that the browser puts some space between the paragraphs, which makes it easy to see when one paragraph ends and another begins. So the p elements tell the browser when one paragraph ends and another begins.

If you have a long paragraph, with multiple sentences in it, you could format the HTML code like this:

<p>
   This is a sentence in the paragraph.
   This is another sentence in the paragraph.
   And this is yet another sentence in the paragraph.
</p>

Extra whitespace is ignored

When you view the paragraph above in the browser, you'll see that the line breaks between the sentences do not appear in the browser. White space in your code (such as line-breaks and tabs) are ignored when the page is displayed in the browser. Luckily, a single space will be displayed (so that you can separate words), but if you put more than one space between two words, then you'll only see one of them when you view a page in the browser.

To illustrate this behavior, add this paragraph to your page:

<p>
   This is a sentence      with a few spaces in it.
   		This is sentence starts with a tab.


   There are a few line breaks before this sentence.
</p>

If you save your changes, and then view the page in the browser, you'll see that the extra white space is ignored. 'Extra' white space means anything more than a single space.

The reason why the extra white space is ignored is because it allows you to format your code so that it's easy to read. And this formatting will not be seen when the page is displayed in the browser. We'll talk about how you should format your code much more as the course progresses.

Structuring content within a paragraph

If you want to make some text bold within a paragraph, you can use a b element.

<p>
   We have a <b>big sale</b> going on today!
</p>

In this paragraph, we have used a b element to structure the words 'big sale' as bold content.

If you wanted to make text both bold and underlined, you could use both a b element and a u element like this:

<p>
   We have a <b><u>big sale</u></b> going on today!
</p>

In this example we have nested the u element inside the b element. We could have also done it so that the b element was nested inside the u element.

But the following code sample is NOT correct because it goes against the concept of elements acting like containers:

<u><b>THIS IS NOT CORRECT!</u></b>

Can you see the problem? It's not clear if the b element contains the u element, or if the u element contains the b element. It's very important to keep the proper container structure in place when you add elements to your HTML code.

If you put this code in your page and viewed it in the browser, you might not notice that the code incorrect. That's because the browser will try to deal with bugs in the code. But, it is a bug, and depending on what do with the rest of the code on the page, it may not work correctly when viewed in the browser.

HTML Documents are Hierarchical Data Structures

An HTML document is a hierarchical collection of elements. Hierarchical 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), they can contain content (text) and other elements. And like a file system, HTML documents can become quite complex with elements nested deeply within other elements.

HTML element box diagram

I like this diagram because it not only helps to visualize the basic structure that every HTML file 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!

Formatting Your HTML Code

As mentioned earlier, it's important that you format your code properly so that you can read it and see the container structure of the page. This will become more and more apparent to you as you learn more about HTML. Actually, every programming language has guidelines for how you should format your code. You should follow these guidelines so that you (and your fellow programmers) can read and understand the code.

If an element only contains a small amount of content, then you can put the tags and the content on the same line, like we did for the h1, h2, and h3 elements:

<h1>This is an H1 element</h1>
<h2>This is an H2 element</h2>
<h3>This is an H3 element</h3>

But, if an element contains a lot of content (which could be text, or other elements), then you should put the element's tags on their own line. And all of the content inside the element should be indented, like so:

<p>
	This is a sentence.
	This is another sentence.
	This is yet a another sentence.
</p>

Make sure to notice the following points about this code:

  1. The opening p tag is on it's own line.
  2. All the lines of text within the paragraph are indented, and vertically aligned.
  3. The closing p tag is on it's own line, AND it is vertically aligned under the opening p tag.

It may not be clear from this little code sample, but I can't stress enough how important it is to format your code properly. So far in this course we have not created any complex web pages, but imagine a web page that has thousands of lines of code, and many elements nested within other elements. If the code is indented properly, then it makes it easy to scroll down the page and understand the container structure of the page. Proper indentation allows you to see the content that is contained within an element.

Questions

  1. What does HTML stand for?
  2. How would you mark up some text content so that it appears bolded?
  3. What is a 'hierarchical data structure'?
  4. True or false - extra white space that appears in your code will not appear when you load the page in the browser.
  5. If you add an element to your page that has many lines of content in it, how should your format (indent) the code for that element?