COMM 2555: Interactive Digital Communication

Spring 2017

Introduction to HTML

Download lecture slides

Plan for today:

  1. What is a markup language
  2. HTML syntax
  3. Structure of an HTML document

1. What is a markup language

HTML stands for Hypertext Markup Language. Markup is used to annotate text. A markup language is used to annotate text in a systematic way. In the world of print, markup could be editing instructions added to a manuscript by an editor. In school, markup could be the corrections a teacher makes to a student's paper. In a web page, markup is instructions on how to display the content (or, more precisely, a description of that content's structure).

In other words, markup is information about the content.

As you remember, a web page is nothing but plain text. That text consists of (a) text to be displayed, and (b) instructions on how to display it. The browser should be able to tell the difference between the two. And since the browser is a computer program, it will only understand precise instructions. That's exactly what HTML does: it uses a precise syntactic construct, called tags, to separate text from markup - i.e., text to be displayed from text to be interpreted as instructions.

Here's an example:

<p>This is a paragraph

The text "This is a paragraph" is just text - so it will be displayed.

The text "<p>" is a tag - so it won't be displayed. Instead, it will be interpreted by the browser as a "paragraph" tag, so the browser will display everything that follows this tag on a new line.

Thus, HTML is a formal language used for describing the structure of a web page, that is understood by the browser.

2. HTML syntax

Besides the material offered by your textbook, there are lots of HTML tutorials and other resources available online.

Following are a few key points from our class discussion.

Here's an example of an HTML element:

html element

Having learned the syntax of HTML you will be able to read any HTML document you encounter. More importantly, it will be much easier for you to write HTML (regardless of the tags or attributes you use), and it will be much easier for you to debug your code. So, think of HTML syntax NOT in terms of the elements (and tags) you have already seen, but in terms of patterns:

<tag> 

<tag>some content</tag>

<tag attribute="value">

<tag attribute-1="value" attribute-2="value">

...and any combination of the above!

There are lots of HTML elements, and you should not try to learn them all. As you construct more and more web pages, you will come to know more and more HTML elements, many of which you will eventually remember. But there's no need to memorize them on purpose. There are many references available online. When you come across an element you don't know - look it up! Here's an excellent resource.

3. Structure of an HTML document

An HTML document consists of 2 main parts: the head and the body:

html element

Here are a few more detailed resources:

In HTML5, the <html>, <head> and <body> tags are optional. If you don't include them, the html, head and body HTML elements still exist - they are implied, so you can style them with CSS or manipulate them with JavaScript.

Thus, the source code of the smallest valid HTML document would look like this:

        <!DOCTYPE html><title> </title>

(Note the space: the title cannot be empty)

However, my strong recommendation is to include three tags of these elements. Code is written to be read by humans; that includes others who will read your code, and you - for you will be reading (and editing) it over and over again while developing your web site. Separating the head (with information about your content) from the actual content makes coding much easier! In other words, keep the meta data separate from the data!