Introduction to HTML

Lesson One

In today's lesson, we will be teaching you the basics of HTML, or HyperText Markup Language. Every web page on the internet is written in HTML, so it's pretty important that you have a firm grasp on what HTML is, what it can do, and how to use it appropriately.

Why HTML?

Imagine that you have a Rich Text File from a client that they want turned into a website. All you are given is the content, seperated with headings, lists, paragraphs, and the like. You may be thinking, "I'll never be able to make this look good as a web page!" That's not the case at all! In fact, every semantically correct web page on the internet will look something like a Rich Text File if you take away the CSS (see our Introduction to CSS, coming soon).

HTML Elements

To use HTML, we simply encapsulate certain words, phrases, paragraphs, or sections with something called tags, or elements. If we had, for instance, the main heading of a page that says 'My Website' we could mark it up as follows:

<h1>My Website</h1>

Opening Tags

Here you see the <h1> tag. This is an opening tag, which tells the browser to display the following text as a certain element. H1 is one of the elements defined in the HTML Specification, and it simply means that is is a heading, level 1. It is the most important heading on the page, and as such is usually not used more than once or twice on a page.

The Content

Next, we have the actual text. Any sort of plain text can be included in here, but special characters must be encoded into something called HTML Entities. One example of a character that must be encoded as an HTML Entity is ©, which is encdoded as © in HTML pages.

Closing Tags

Following the text, we have </h1>, which we must have to close the tag. Every element in HTML must have a matching closing tag, unless it is a special self-closing element. A closing tag tells the browser that we are done displaying the text as the element we specified in our opening tag. The syntax for a closing tag is nearly identical to opening one - just insert a slash after the less-than (<) sign, retype the element, and type the greater-than (>) sign.

Self-Closing Elements

Self-closing elements, often used for images and the like, cannot contain any text or other tags. As such, there is no reason to have distinct opening and closing tags. Instead, the tag is closed by inserting a space and a slash before the greater-than sign in the tag. For example, the <br /> tag self-closes.

Conclusion

That's all for today, folks! Be sure to read the rest of the series, Introduction to HTML.

Further Reading

• W3Schools Reference: HTML Element List
• A Brief History of HTML
• Useful HTML Elements and How to Use Them

Lesson Two

In today's lesson, we will be teaching you all about HTML Syntax. Syntax is the specific way things must be written in a markup language such as HTML. Syntax is extremely important - if you use improper syntax, your pages will not be valid HTML and could break when displayed in browsers.

If you have not already, please read the previous lessons in our Introduction to HTML.

Standard HTML Syntax

Most HTML tags have the same basic syntax. An opening tag is declared with a less-than (<) sign followed by the element name. Optionally, it can have any number of attribute/value pairs, each separated by a single space. Finally, the opening tag ends with a greater-than (>) sign. The content of the element follows. After the content goes the closing tag. A closing tag is declared with a less-than (<) sign and a slash (/), followed by the element name, followed by a greater-than (>) sign. No matter what attribute/value pairs were in the opening tag, the closing tag contains only the element name. See below for an example.

<element attribute="value" otherattribute="value">Content</element>

Note the formatting used. An attribute/value pair is expressed as the attribute name in all lowercase, followed by an equals (=) sign, followed by the value surrounded by quotes. It doesn't matter if they are single- or double-quotes, but it's good practice to pick one and stick with it. Also, the value can be capitalized or lowercase, because it has been "escaped" by quotes.

Standard Attributes

What attributes you can use depends on the element you are using them in. There are, however, standard attributes that can be used in nearly every tag*. They are listed below:

• class
• id
• style
• title

The class attribute specifies a classname for an element. It can be anything you like*, and can contain more than one class. Multiple classes are separated with spaces. For example, <p class="important user-information"> opens a paragraph with two classnames: important and user-information. Classes are useful to apply styling to a large amount of elements.

The id attribute specifies a unique ID for an element. It can be anything you like*, but each element can only have one ID. In addition, there can only be one occurrence of any given ID on a page. IDs are useful to apply styling to a specific element, and to link to a specific part of a page.

The style attribute allows you to have inline styles for its element. We deal with inline styles in our Introduction to CSS (coming soon). Style tags are useful if you are not allowed to edit the CSS file.

The title attribute allows you to denote extra information about an element. Most of the time, browsers will display the information you put in the title attribute when the element is hovered over. For example, hover over the following block of code: <p title="This is the value for the title attribute.">Yay HTML!</p>. Titles are useful for giving extra information about elements that does not need to be written in the page flow.

Nested Elements

HTML pages consist of multiple tags. In order to have tags inside one another, you must nest them. An example is:

<p>This is a paragraph about <em>nested elements</em>.</p>

You'll notice that inside the content of the <p> tag, we nested an <em> tag. If you open a tag inside another element, you must close it before the other element. The following block of code would be invalid HTML. Invalid HTML is just plain bad.

<p>This is a paragraph about <em>nested elements.</p></em>

Special Elements

There are certain HTML elements that have special syntax. The following tags are self-closing:

• <br />
• <hr />
• <input />
• <img />
• <area />
• <link />
• <col />
• <base />
• <param />

In addition, there are two more tags that have special syntax.

1. The <!doctype> tag defines the page as HTML, and is simply expressed as <!doctype html> on the first line of an HTML document.

2. An HTML comment does not show up when a user views a page, but is visible in the source code. The purpose of a comment is to document your HTML code for you (or your peers) to reference later. Comments are marked up beginning with <!-- and ending with -->.

<!-- This is an HTML Comment. Visitors to my web page will not see it, but I have written it to remind myself how I organized my code later, in case I forget. -->

Conclusion

That's all for today's lesson. I know it was a lot, but now you know how to properly write HTML! In the next few lessons, we'll cover how to write an HTML document, how to use the most common and useful tags, and semantics.

Further Reading

• W3Schools Reference: Standard Attributes
• WorldWide Web Consortium Official HTML 5 Syntax

<head>, <html>, <meta>, <param>, <script>, <style>, and <title>

must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_")

Lesson 3

In today's lesson, you will learn how to create a new HTML document, which will serve as a web page. Once you have an HTML document, you can fill it with tags and content, and you'll have a full-fledged internet-ready web page!

If you have not already, please read the previous lessons in our Introduction to HTML.

Doctype Declaration

Every HTML document begins with a doctype declaration. This serves two purposes:

1. The W3C HTML Specifications says you have to have it, so it serves to make your HTML document valid.
2. Internet Explorer will go into "quirks mode" if you don't have a doctype declared, so it serves to keep your page from breaking in IE.

A doctype used to be long and complicated, but in the new HTML 5 specification, it is simply <!doctype html>, placed on the first line of an HTML document.

HTML, Head, and Body

There are three sets of tags that every single HTML document must have after the doctype declaration. These are <html>, <head>, and <body>. The <html> tag encloses every other tag in your document. The first element in your head should be the character encoding declaration, which usually reads:

<meta charset="UTF-8" />

The second element in your head should be the <title> tag. The <title> tag declares the title of the HTML document. For example, the title of this web page is "Learn with Kerrick – Introduction to HTML [Part 3]" - you can see it if you look at the top of your browser window. Here is an example title tag:

<title>My nifty web page</title>

The <head> also tag holds meta information such as the page title, links to resources such as the CSS file and favicon, and any additional information you want to put in the HTML document. The <body> tag holds what is actually shown on the screen. All of your content must go in the body of the HTML document.

So far, our new HTML document looks like this, and it is technically a complete and valid, albeit empty, HTML document:

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>My nifty web page</title>
	</head>
	<body>
 
	</body>
</html>

A Note on Formatting

If you look at the above example, some of the tags have been indented, and some elements are on one line while others span multiple lines. In HTML documents, white space characters (spaces and tabs) get condensed. A string of any number of tabs and spaces are rendered as one single space in the browser. As such, we are allowed to write HTML in any formatting style we like. I personally prefer to have any lines that are nested inside another tag indented, so I can easily trace the opening and closing tags to each other. It's up to you how to format your HTML documents, but most of the examples on this site will be in my own personal style.

Filling our head

Pun intended! Nested in the <head> tags, most documents have certain elements.

Another set of tags that needs to go into the head of our document are <meta /> tags. Meta tags are self-closing elements with one required attribute (content) and three optional ones (name, http-equiv, and scheme). Meta tags can hold any information you want! Simply insert a <meta /> tag with name and content attributes, and you can give them values of anything you'd like. Common uses for meta include:

<meta name="author" content="Kerrick Long" />
<meta name="revised" content="October 23, 2009" />
<meta name="description" content="This is my nifty web page written in HTML! I am so glad that I know HTML now that I just had to create my own website to show my skills!" />
<meta name="copyright" content="http://creativecommons.org/licenses/by-nc-sa/3.0/us/" />

Yet another element that is often found in the head of an HTML document is the <link /> tag. Link tags are self-closing elements with a few optional attributes: rel, type, href, and media. Link tags tell the browser that there are additional documents that this web page needs. Common uses for <link /> include:

<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="icon" type="image/icon" href="favicon.ico" />
<link rel="canonical" href="http://www.example.com/page.html" />

Conclusion

Now that you've got yourself a full-fledged HTML document with information in the head, all you have to do now is fill the body with content! In our next few lessons, we'll be going over the HTML elements that you'll need to do that.

Further Reading

• Eric Meyer on Quirks Mode
• Useful Meta Tags
• Wikipedia on the Meta Element
• All About Favicons

Lesson Four

In today's lesson, you will learn some of the most common HTML elements used for textual markup. This includes paragraphs, headings, and the like.

If you have not already, please read the previous lessons in our Introduction to HTML.

Block and Inline Elements

Block-level elements are those that default to being on their own line, such as paragraphs and headings. Inline elements are those that default to being inline and not affecting page flow, such as tags that denote links and emphasis.

Headings

The first elements we'll cover today are the six heading elements. Much like different headings in a term paper, these headings often act as titles for different sections in a web page. The codes for the six headings are <h1>, <h2>, <h4>, <h4>, <h5>, and <h6>. <h1> is the largest, most important heading on the page, and <h6> is the smallest, least important heading on a page. All headings are block-level elements. Here is an example heading:

<h1>My Nifty Website</h1>

Paragraphs

Paragraph tags, which are simply written as <p>, are used to mark up paragraphs. Each paragraph gets wrapped in a set of <p> tags, and the browser (or later, CSS) will insert the proper line breaks, because they are block-level elements. Here is an example paragraph:

<p>Now that you’ve got yourself a full-fledged HTML document with information in the head, all you have to do now is fill the body with content! In our next few lessons, we’ll be going over the HTML elements that you’ll need to do that.</p>

Emphasis

Two tags in HTML define emphasis. The <em> tag denotes emphasis on its contents. The <strong> tag denotes strong emphasis on its contests. Both <strong> and <em> are inline elements. Here is an example of their use inside a paragraph:

<p>Even though you may <em>think</em> you know everything about HTML, you still have a <strong>long</strong> way to go.</p>

Specific Types of Text

Specific types of text can be marked up with their appropriate HTML elements. Below you'll find a short bit of information about each of them, followed by an example of their use. Unless otherwise noted, they are all inline elements.

<code> tags can be used for computer code. On our site, for example, all the HTML elements that have the monospaced font, grey background, and dashed border are wrapped in <code> tags.

<p>The <code>title</code> attribute is very useful!</p>

<ins> is for inserted text and <del> is for deleted text. These are especially useful if you need to show document revisions, such as comparing old and new versions of a page.

<p>My favorite kind of ice cream is <del>strawberry</del><ins>rocky road</ins>.</p>

<sup> and <sub> are for superscript and subscript text. You'll often find these tags used in technical, mathematical, or scientific web pages.

<p>H<sub>2</sub>O is water. &pi; r<sup>2</sup> is the equation to find the area of a circle.</p>

<abbr> and <acronym> are used for abbreviations and acronyms. The title attribute should hold the full version of the abbreviation or acronym in its value.

<p>I know that <abbr title="Doctor">Dr.</abbr> Monroe is a member of the <acronym title="American Heart Association">AHA</acronym>.</p>

<address> is a block level element used for addresses. This is one of the few places is HTML where the <br /> tag will be used to insert a line break. Because addresses must be written on envelopes with line breaks in specific places, it is semantically correct to insert <br /> tags in an address.

<address>Southeast Missouri State University<br />One University Plaza<br />Cape Girardeau, MO 63701</address>

Quotations and Citations

If you are in a situation where you would like to quote another source, you'll find these next few tags handy. It is good karma (and usually the law) to give credit where credit is due, so you may want to pay attention.

If you are quoting a large amount of text, the <blockquote> tag should be used. It is a block-level element that shows you did not originally write the text - it is a direct quote from somewhere else. If you can link to its source, use the cite attribute, with the URL of the source as its value. Here is an example:

<blockquote cite="http://articles.sitepoint.com/article/html-5-snapshot-2009">The reason that opinion is so divided is that HTML 5 is more than just a markup syntax for documents, like HTML 4 is. One clue is in the working group’s original name, before it was brought into the W3C camp: Web Hypertext Application Technology Working Group. The original goal for HTML 5 was to make it easier to develop Web applications. There’s evidence of this in the rash of new JavaScript APIs and support for offline development, some of which are already available in a browser near you.</blockquote>

If, instead, you are quoting a small amount of text, you should use the inline <q> tag. It, too, can hold the cite attribute to link to its source. Here is an example:

<p>Even though HTML 5 is not yet a finalized specification, <q cite="http://articles.sitepoint.com/article/html-5-snapshot-2009">we can use HTML 5 elements right now, even though the main browsers are yet to support HTML 5, because CSS allows you to style anything.</q></p>

When you are citing a source in your document, you can use the <cite> tag. Its content should be who you are citing, and its title attribute should be where you got the information from. Here is an example:

<p>According to <cite title="The Hitchhiker's Guide to the Galaxy">Douglas Adams</cite>, humans cannot imagine interstellar distances.</p>

Conclusion

Now that you know the main text formatting codes, you can finally begin to mark up HTML pages that actually mean something! Content is the meat and potatoes of HTML, so knowing these tags is essential to successful HTML markup.

Further Reading

• Semantic HTML Examples
• The Importance of Semantic HTML Markup

Lesson Five

Now that we've covered the basics of HTML elements, tags, attributes, values, syntax, markup, document structure, and all those other fancy buzzwords, we get to do some really interesting stuff! Today, we'll be working with pre-formatted text, lists, and tables.

If you have not already, please read the previous lessons in our Introduction to HTML.

Pre-Formatted Text

Preformatted text is text that, when shown on the screen, needs to retain all spaces, tabulations, and line breaks. Remember back in part three of this series, when I said that HTML will condense extra white space? The way to prevent this is by using the <pre> tag. Be careful though! This is an often-abused element that should only be used under adult supervision! Seriously, though, there are very few uses for the <pre> tag, but when you need it, you need it. HTML is for content, so you should only use this tag when your content absolutely dictates that these spaces must be left in, no matter what you want your site to look like.

A perfect example of good use for the <pre> tag is how this site primarily uses it! Notice in our examples, how we have managed to preserve our line breaks and indenting? We use the <pre> tag around the code snippets, which we intend to have spaced a certain way no matter what design our site has. What better way to show how a <pre> tag works than just show you?

<pre>
	&lt;h1&gt;This is a header, level one&lt;/h1&gt;
	&lt;p&gt;Here is a paragraph. Pretend it is full of content!&lt;/p&gt;
</pre>

Lists

If you ever need to mark up information on the web as a list, you'll have to figure out what kind of list it is. There are three types of lists you can mark up with HTML:

1. Unordered Lists
2. Ordered Lists
3. Definition Lists

Unordered Lists

Unordered lists are for any list information that can be rearranged without consequence. If you are marking up a list of your favorite foods, for example, you could write the foods in any order. An unordered list (<ul>) must contain one or more nested list items (<li>).

<ul>
	<li>Apples</li>
	<li>Bananas</li>
	<li>Pears</li>
</ul>

Ordered Lists

Ordered lists are for list information that needs to be kept in priority, chronological, or any other order. When you're listing steps to making a peanut butter and jelly sandwich, it's pretty important to have the bread before the jelly. An ordered list (<ol>) must contain one or more nested list items (<li>).

<ol>
	<li>Get bread out</li>
	<li>Spread peanut butter on one slice of bread</li>
	<li>Spread jelly on another slice of bread</li>
	<li>Combine slices of bread</li>
</ol>

Definition Lists

Definition lists are for terms and definitions. A definition list (<dl>) must contain one or more nested pairs of definition terms (<dt>) and definitions (<dd>).

<dl>
	<dt>Coffee</dt>
	<dd>A beverage consisting of an infusion of ground coffee beans</dd>
 
	<dt>Milk</dt>
	<dd>A white nutritious liquid secreted by mammals and used as food by human beings</dd>
 
	<dt>Water</dt>
	<dd>A liquid necessary for the life of most animals and plants</dd>
</dl>

Tables

Tables have a long and dark history on the internet. We won't go into it, but let's just say this much: Tables are to be used for tabular data. Anything that would do well in a spreadsheet would do well in a table.

Tables are built of the following components:

• <table> is the tag in which all the other elements of the table are nested
• <caption> is the caption or title for a table
• <tr> is a table row.
• <td> is a single data cell.
• <th> is a header cell.

The nesting order of a table is important. On the outside, you need the <table> element. The <caption>, and usually the <tr>, elements need to be a direct child of the <table> element. There can be only one <caption> per <table>, and there must be at least one <tr> per <table>. Either <td> and <th> need to be direct children of the <tr> elements. The easiest way to understand this is by seeing the markup and its results.

<table>
	<caption>Courses Offered</caption>
	<tr>
		<th>Course</th>
		<th>Department</th>
		<th>Professor</th>
	</tr>
	<tr>
		<td>Drawing 101</td>
		<td>Art</td>
		<td>Mason C. Alvarado</td>
	</tr>
	<tr>
		<td>History 200</td>
		<td>Social Studies</td>
		<td>Tyson S. Bradley</td>
	</tr>
	<tr>
		<td>Chemistry 101</td>
		<td>Science</td>
		<td>Jonathan V. Trogdon</td>
	</tr>
</table>

Conclusion

Through the use of tables, lists, and pre-formatted text, you can portray all sorts of specialized information via HTML. In our next lesson, we'll cover the use of links, anchor tags, and images.

Further Reading

• Advanced Tables in HTML
• Examples of proper usage of HTML Lists

Lesson Six

You now know most HTML tags. The two that you will learn today, however, can be the two you may love the most! This article covers the HTML tags used for embedding images into a web page, and linking two web pages together. Both of these tags use hypertext references - yes, the same hypertext of HTML.

If you have not already, please read the previous lessons in our Introduction to HTML.

Hypertext References

If you remember from lesson one, HTML stands for HyperText Markup Language. A unique ability of HTML is to reference other pages, documents, and files on the internet. In order to reference these files, you use a Uniform Resource Locator, or URL. There are two ways to reference files: Absolute and relative.

Absolute Links

Absolute links are complete URLs that include the protocol (usually http://), the domain (such as www.example.com), and the file path (something like /files/image.png). An example of an absolute link is:

http://www.example.com/files/image.png

Relative Links

If you are linking to files on your own domain, you can take a shortcut by using relative links. By omitting the protocol and the domain from the hypertext reference, the browser will simply use the protocol and domain of the current page. Here is an example of a relative link:

/files/image.png

Because you included the beginning slash, the file is assumed to be in the files folder, which is at the root of your site. If you would like to reference a file without knowing exactly where on the domain it will be, but you know where it will be in comparison to the file you are referencing from, you can do that too. Simply omit the beginning slash, and the file path will be started in the directory your file is in.

For example, if you are referencing a file called image.png that is in the files folder that sits in your daily folder, from an HTML file in the daily folder, you can reference it as:

files/image.png

Images

What would a website be without a few pretty pictures? If you ever want to insert an image into your page, there is an HTML element to do just that. The <img /> tag is what you're looking for - but pay attention! There are some special requirements. Please keep the following in mind:

1. The <img /> tag is self-closing
2. There are four required attribute/value pairs:
   • src - A relative path or absolute path to the image on the internet
   • width - The width of the image in pixels
   • height - The height of the image in pixels
   • alt - A brief description of the image to be show if the image cannot load or when read by a screen reader

3. Images take longer to load than text, so don't use images that are words.

4. If you find an image you want to use in your HTML page (and have permission to use it), please host it yourself. Including an image that is on somebody else's server is bad manners because it leeches their bandwidth without bringing them visitors.

Here is an example of an image embedded in a web page:

<img src="http://www.google.com/logos/090909.gif" width="276" height="110" alt="Google Logo for 09/09/09 at 09:09:09" />

Here is how the image would show normally:

And here is how the image would show if, for some reason, it couldn't be loaded:

Links

HTML was originally written to mark up documents with links to other documents. In order to link to other documents (web pages), you need to use the anchor tag, which is simply <a>. To point to a specific web page, you use the href attribute. Its value should be an absolute or relative path to another web page on the internet. The anchor tag should always have the following:

1. The href attribute to link to the page or file
2. The title attribute for more information on hover
3. Good, informative anchor text

Let's take a look at an example. I'm going to link to the Google website. In case somebody doesn't know what Google is, I'll put a short description in the title attribute, and when they hover over the link that description will show. The anchor text (the content of the element) will be something useful - never use "click here."

<p>I love to search the internet with the <a href="http://www.google.com/" title="Google is a website to search web pages on the internet">Google search engine</a>.</p>

That code would produce the following:

I love to search the internet with the Google search engine.

You can also link to a specific section of a document. If the document has an element with a certain ID, you can link to that individual element with a hash (#) tag at the end of the hyperlink. For example, you can visit the Tables section of Part 5 of this series by linking to http://learn.kerricklong.com/archives/introduction-to-html-part-5/#tables. When the page loads, it will already be scrolled down to the "Tables" section, because the <h4> has an id of tables.

Conclusion

Now that you know how to use images and links, you can create an entire website full of rich content - not only useful text, but images to go along with them, and links from page to page.

Further Reading

• What is hotlinking images, and why is it bad?
• How to link to an email address, and even pre-fill the subject and body!

h1 {color: orangered;}

selector {
	property: value;
	other-property: value;
}