HTML & CSS Wiki
Register
Advertisement

This article is about HTML (HyperText Markup Language). For other uses, see HTML (disambiguation).


HyperText Markup Language is the main type of markup language used to create web sites. It provides a well organized way to create structured documents by using complex but precise coding to create text, headings, paragraphs, lists, links, quotes and other items. It allows images, sound, and objects to be embedded and can be used to create interactive forms. It is written in the form of elements consisting of "tags" surrounded by angle brackets (<>) within the web page content. It can use scripts in languages such as JavaScript, which affects certain behaviors of the webpage. HTML can also be used to create webpages with the help of CSS, to define the appearance and layout of text and other material without having to directly insert the display codes into the HTML document. CSS can also be integrated into the HTML document, so a separate CSS file will not be necessary.

History[]

A long time ago, in a computer lab far, far away, some guys at IBM developed a language to aid in the production of documents. Features of this language were adopted by the Jedi Sir Tim Berners-Lee for his HyperText Markup Language, or HTML. As indicated by the term hypertext, this was designed around the concept of associating bits of text with the addresses of other documents.[1] These bits of text were (and are) called hyperlinks, and are very simple and versatile so that HTML can evolve to support ever-increasing levels of communication without breaking them. Thus, HTML has become the language, in fact the very essence, of the World Wide Web.

How to create HTML documents[]

In order to create an HTML document, users will need to first figure out if they are using a PC or a Mac.

For PC users
Go to your Start Menu, into All Programs, then Accessories. Search for the application program called Notepad. Open the program.
For Mac users
Download the TextWrangler program. After installing it, open up Finder, go to Applications, search for it by name, and open it.

After you have opened the right text-editing program, save the file with a filename extension of .html. That will make this document an HTML document which you can edit to make webpages.

Visit the Tutorial for more information on creating web documents.

HTML Tags[]

Main article: Tag

HTML tags are positioned within and next to each other in a document, and that placement results in the arrangement of elements on a screen or page. A tag is simply a series of characters between angle brackets, like <p>. Both the tag's name and any attributes (see below) should be lowercase; case is ignored in ordinary HTML syntax but lowercase is required in XHTML.

Most elements are represented by opening (or start) and closing (end) tags, and require both in order to be valid. The previous example is an opening tag; a closing tag is the same as its opening partner, but with a forward slash just after the starting angle bracket:

Some tags, however, are self-closing tags, meaning that they close themselves using a forward slash just before the right angle bracket: <br /> The space is included before the slash for compatibility with older browsers.

Aside: In most HTML5 documents, the slash in self-closing tags is not required, and in fact all previous HTML versions define it as something completely different; they are understood to be self-closing because they are defined that way. But it is required in XHTML (which the HTML5 standard defines a version of), so authors are advised to use it in all documents for both readability (to clarify that no closing tag is to be found) and compatibility (in case the markup gets placed in an XHTML document).

HTML Attributes[]

Main article: Attribute

One or more HTML attributes may be supplied after the element name in the opening (or self-closing) tag, and each one is separated from its previous neighbor by white space. An attribute consists of its name, such as "title," followed by an = (equals sign) and a value enclosed in two " (double quotes). For example, a div element with a title might be specified as:

<div title="Godwin's law">As an online discussion grows longer, the 
probability of a comparison involving Nazis or Hitler approaches 1.</div>

Aside: In XHTML syntax, the quotes are required regardless of what the value is; in HTML and the primary syntax of HTML5, they are only required when the value contains a space. The quotes are valid in all HTML5 documents and recommended for compatibility with XHTML and, more importantly, the freedom from being concerned about attributes with spaces (which makes both reading and writing more difficult).

Boolean attributes do not supply any information other than their own presence or absence, which are interpreted as true and false respectively. For example, the selected attribute of <option> and <input> elements indicates, when present, that its owner should default to being selected. The readonly and disabled attributes of <input> and <textarea> elements cause the browser to prevent an element's contents from being changed by the user. When a boolean attribute is present, its value must be either the empty string or the attribute's name.[2] In HTML syntax, if the = (equals sign) and value are omitted the attribute is known as empty and the value defaults to the empty string[3][4][5]; however, as per XML this is not valid in XHTML[6] and is therefore discouraged.

HTML Elements[]

Main article: Element

The precise definition of an element is the digital representation of a pair of tags or a single self-closing one, an element "object" which keeps track of its attributes and, if applicable, child elements (everything within the tag pair); an element which cannot contain anything (except attributes) is a void element. Yet we normally don't mean the digital representation when we speak of elements (unless we're writing programs which handle it) but the abstract concept of something on a page or screen from which that representation evolved.

See Also[]

External Links[]

References[]

Advertisement