Intro to HTML

Demo starter files and file path exercise

Today we're diving in head first, with HTML.

HTML stands for HyperText Markup Language. In the simplest terms, it allows us to outline and define the different types of content on a web page. Headings, text, lists, links... everything in an HTML document must be surrounded by "tags" annotating the different parts. In this way, HTML gives us a standardized method for distributing content on a variety of different browsers and devices.

But first...

What's a Browser?

One of the things computers have to establish when talking to each other is what protocol they're using.

"I see you over there! But how should we communicate? Phone, fax, mail, or telegraphs?"

The vast majority of content on the web is transmitted using a method called the HyperText Transfer Protocol (HTTP). HTTP is a request-response form of communication between computers. On one end is the client making a request for information. On the other is a server that dishes it out.

A web browser is a computer program that makes navigating and viewing web content practical and easy. When you direct your browser to a web address, it sends a request to the appropriate server and awaits a response. If all goes according to plan, the server acknowledges and sends back the requested HTML document (and usually a bunch of other stuff). Your browser then interprets and displays the information appropriately, as it downloads.

The modern web is constantly and rapidly changing. You will be reminded of this numerous times throughout our class. Nowadays, browsers do a lot more than simply request and display static pages. They handle advanced animation and graphics, interactive programs, encrypted communications, and more. We'll discuss many of these aspects of the web, but the scope of this class barely scratches the surface!

We are going to focus mostly on front-end development, that is HTML and CSS. Together, they create the visual layout, color and navigation of a web page. Technically HTML and CSS are not programming languages, just markup - a kind of grammar that browsers understand. Back-end development, which we'll touch on later, is more about storing and handling the information itself.

Anatomy of an HTML Document

An HTML document has two main parts: the head and the body.

The head contains mostly metadata - information about the information on the page. This includes things like keywords, encoding, and other resources that the page needs to be displayed. Nothing in the head of an HTML document is ever displayed on the web page.

The body is where all of the content that will be displayed goes. Let's draft our first HTML document and go over some of the basic tags to get started.

Open up a new document in a plain text editor.

We need to declare the DOCTYPE on the first line of every HTML document. This tells the browser what type and version of HTML we're using. You may come across older and more complicated looking declarations than this, but HTML5 is the latest version, and its declaration is very simple:

<!DOCTYPE html>

Tags, or elements, in HTML are delimited from the content itself by < and >. Most tags in HTML enclose text and other tags, so they have an opening <tag> and a closing </tag>.

HTML5 requires that all tags be properly nested. This is very important. The best analogy I can give you is that it's like Russian nesting dolls.

Matryoshka dolls (credit: Joe Lodge https://www.flickr.com/photos/joe57spike/5690570945/)
Matryoshka dolls (credit: Joe Lodge)

Here's the setup for a bare-bones HTML document:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>

    </body>
</html>

Let's take a minute to dissect this.

  • The <!DOCTYPE> is the only tag that ever goes outside of the nested structure of the document, and always on the very first line.
  • One set of <html> tags contains everything in the document's nested structure. <html> is often called the "root element" for this reason.
  • We've got our two main parts, <head> and <body>, inside the <html> tags.
  • Almost every tag has a matching closing tag. There are only a few tags that don't require a matching closing tag because they never enclose other content. <!DOCTYPE> and <meta> are two of them.
  • The <title> tag defines a page title for displaying in the browser's tab or window.
  • There's also a <meta> tag. The character set is almost as important as the doctype, and it tells the browser what kind of text encoding we're using. The details aren't important for now other than to say we will always include this, and we'll always use UTF-8.
  • HTML tags can have attributes which are always defined as <tag attribute="value">. You should always put the value of the attribute in quotes.
  • The attribute in <html lang="en"> is a hint to the browser that this page will be in English. While not required, it's helpful for a lot of things... translation, hyphenation, decimal formatting, screen readers, and more.

Notice the way I tabbed and spaced things. Except for the first space between words, HTML ignores all whitespace. This gives us a lot of freedom to arrange the code in a way that's readable. Even though your browser doesn't care about the whitespace, humans will (including you!). Readability is very important.

Save your file with the name index.html to test it. If you're working off the starter files, save it in the parent folder. Since the body is still empty, you should see a blank page when opened in a browser.

Tag Vocabulary

HTML has many tags for describing different kinds of content. Check out the HTML Tag Reference for a list of the more common tags, with links at the bottom to additional references.

Let's try some of these tags out in the body of our document.