Revision as of 18:21, 17 April 2009

Acronym. HyperText Markup Language.

HTML is the predominant markup language of the internet. Developed initially by Tim Berners-Lee, the first commercially adopted version of HTML is HTML 2.0, found in RFC 1866.

HTML is a standard currently maintained by the W3C.

Components of HTML

HTML became very popular because of its easy, text-based syntax, and the fact that every web page published on the internet has the HTML Source visible, allowing any person visiting a site to see the code used to generate the page.

HTML Tags

The core of HTML tags are the use of the less-than ( < ) and greater-than ( > ) symbols which are wrapped around words to create "tags". A HTML Tag comes in many forms, depending on the tag name:

Open-Close Tags

A Open-Close tag consists of a open tag "<tag>", and an close tag which has a slash "/" after the less-than symbol "</tag>", as shown here:

<tag-name></tag-name>
<tag-name>Tag content</tag-name>
<tag-name attribute1="attribute1_value" attribute2="attribute2_value>Tag content</tag-name>

Open-Close tags are useful because they can be used to create nested structures. Some examples of real tags are:

<a href="download.pdf">Download the PDF</a>
<ul><li>List item 1</li><li>List item 2</li></ul>
<p>This is a paragraph tag</p>
<p align="right">Paragraph aligned right</p>
<p class="big">The class attribute is related to stylesheets</p>

The "List item 1" line above is a nested structure. The ul tag is short for Unordered List and contains multiple li tags, short for list item.

When this is shown by a web browser it appears like this:

List item 1
List item 2

Single Tag

Single tags have a slightly different syntax, and are intended to stand on their own without a close tag. The basic syntax is:

< tag attribute1="attribute1_value" / >

or less-than symbol, the tag name and attributes, a slash, and the greater-than symbol:

<tag-name attribute1="attribute1_value" attribute2="attribute2_value />
<tag-name />

Some examples of single tags:

<br />
<link rel="shortcut icon" href="/favicon.ico" />

Attributes

Attributes are name-value pairs which can be embedded in any HTML tag. In the above examples, some name-value pairs (name is to the left of the equals sign, value is to the right in quotes) are:

href = download.pdf
align = right
class = big
rel = shortcut icon
href = /favicon.ico

They often change how a tag behaves when displayed on a page, or can be used to identify a tag so it can be referred to elsewhere.

In general, certain tags understand or require certain attributes, and some tags do not. The details of this are beyond the scope of this glossary.

Page Components

head - The head tag in an HTML Document contains the Page Title, Meta Tags, Stylesheets, and JavaScript declarations
body - The body tag in an HTML Document contains the actual page content, typically broken into three sections
- Header - Not to be mistaken for the head tag, the header contains things which typically appear on every page of a site, such as the company logo, navigation, and other common links
- Content - The focus of a page which contains the desired content. Compelling Content is preferred, of course.
- Footer - Additional, less-important navigation or links intended for every page of a site, usually contains copyright information, legal notices, links about the company, etc.

Simple HTML Example

The following example shows a very simple HTML document.

<html>
<head>
<title>A simple document</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>Greetings and Salutations!</p>
<p>Please visit my <a href="/blog">Blog</a>, or send me an <a href="mailto:email@example.com">email</a>.</p>
<p>Come back soon!</p>
</body>
</html>

To learn more

W3Schools offers an excellent HTML tutorial and reference

Navigation menu

Difference between revisions of "HTML"