Introduction to HTML
Plan for today:
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.
- Here's a very brief overview of HTML
- Here's a great place to start (look at the guides!)
- And if this looks overwhelming, start simple
Following are a few key points from our class discussion.
- An HTML document consists of text content and HTML elements containing information about that content.
- An HTML element:
- is denoted by one or two (opening and closing) tags
- may contain textual content or other HTML elements.
- A tag contains the name of the element and, optionally, one or more attributes.
- An attribute provides additional information about the HTML element, and has the form of a name/value pair
Here's an example of an 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:
- the HEAD contains information about the web page (not displayed by the browser)
- the BODY contains the web page content (this is what your browser displays)
Here are a few more detailed resources:
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!