We will start this HTML tutorial with a look at some small but real fragments of HTML. This is the right place to start if you have little or no previous exposure to HTML.
All the HTML and CSS you encounter throughout these tutorials is real working HTML and CSS.
So what does HTML look like?
HTML is text, just like the text you are reading now. HTML is a set of words that you place in front of and behind headings, paragraphs and other elements of the documents you want to publish on the web. Applying HTML to a document is called to Mark Up the document.
HTML is an abbreviation for HyperText Markup Language.
HTML markup encloses text in HTML documents you publish on the World Wide Web. A small document marked up with HTML might look like this:
<h1>Cobb salad</h1> <p> Cobb salad is a tasty salad, one of my favorites! </p>
The above HTML fragment consists of a heading and a paragraph. The heading is enclosed within an HTML h1 element, and the paragraph is enclosed within a p element.
The h1 element starts with the word <h1> and ends with </h1>. Likewise the p element enclosing the paragraph starts with the word <p> and ends with </p>. This format you will see again and again.
What does this HTML fragment look like if viewed in a User Agent like Microsoft Internet Explorer? Well, it would look somewhat like this:
Cobb salad
Cobb salad is a tasty salad, one of my favorites!
Lets look at a more extended example:
<h1>Cobb salad</h1> <p> Cobb salad is a tasty salad, one of my favorites. </p> <p> The ingredients for Cobb salad include: </p> <ul> <li>bacon</li> <li>egg</li> <li>blue cheese</li> <li>lettuce</li> </ul>
Here we added one more paragraph element as well as a list of items. The ul element encloses an unordered list. Unordered means that the list will be shown to the reader as a bulleted list or in some similar way. Later when we look at CSS I will tell you how you can control precisely how the unordered list is presented visually to the reader.
The ul element starts with <ul> and ends with </ul>. The contents of the unordered list element is a series of li elements; list item elements. Again each element is opened by <li> and closed by </li>. I am sure you recognise the pattern by now!
Here is what the HTML fragment above might look like to a reader:
Cobb salad
Cobb salad is a tasty salad, one of my favorites.
The ingredients for Cobb salad include:
bacon
egg
blue cheese
lettuce
Do you have a feel for what HTML-documents look like?
Vocabulary: Element and Tag
We talked about h1, ul, li and p elements above. Elements are one of the basic building blocks of an HTML-document, somewhat like a sentence is a building block when you write an English language text.
Lets look again at the HTML-fragment we saw at the start of this tutorial:
<h1>Cobb salad</h1> <p> Cobb salad is a tasty salad, one of my favorites! </p>
This fragment consists of two HTML elements. The h1 element starts with <h1> and ends with </h1>. Likewise the p element enclosing the paragraph starts with <p> and ends with </p>.
<H1> is the start tag of the h1 element and </h1> is the end tag. Together with the text between the two tags they form an h1 element. The text between the start and end tags of an element is the contents of the element.
What are the start and end tags of a p element?
I am sure you were able to answer that question quite easily. The start tag of the p element is <p> while the end tag is </p>.
Sometimes the start tag is called an open tag and the end tag is called a close tag. You have already seen both names used in this HTML tutorial.
Vocabulary: Mark Up
To create an HTML document is to apply HTML mark up to a text document. Marking up a document is a process where you specify the structure of the document using HTML tags. You put headings, paragraphs and other structural parts of the document inside the appropriate HTML elements.
Later I will tell you how to use CSS to control the looks of the various elements part of an HTML document.
Of course, you don’t need to wait to apply HTML mark up until you have finished writing a text to be put on the web. Once you are familiar with HTML you will find it easy to type the HTML mark up as you type in the document contents. This is how these web pages were created.
Summary
We started by looking at some simple, but real HTML fragments. You saw how headings are enclosed by the h1 heading element and text paragraphs are enclosed by the p element. I hope this gave you a feel for what HTML documents look like.
We then discussed Element and Tag. HTML elements enclose structural elements of HTML documents, be it a heading, a paragraph or a list item. An Element starts with a start tag and ends with an end tag, like this:
<h1>Cobb salad</h1> ^ ^ ^ | | |—— End tag | |—— Element contents |—— Start tag
Finally we had a look at the phrase HTML Mark Up and the process of marking up a text document for publication on the web.
