Acronym. HyperText Markup Language.
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.
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:
An Open-Close tag consists of a open tag "<tag>", and n 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 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 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.
- 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:firstname.lastname@example.org">email</a>.</p> <p>Come back soon!</p> </body> </html>
To learn more
- W3Schools offers an excellent HTML tutorial and reference