HTML is the universal markup language for the Web. HTML lets you format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display.

The key to HTML is the tags, which indicates what content is coming up.

For more information on HTML, please take a look at our HTML reference.

Now You Know HTML, What’s Next?

The next step is to learn XHTML and CSS.

XHTML

XHTML reformulates HTML 4.01 in XML.

If you want to learn more about XHTML, please visit our XHTML tutorial.

CSS

CSS is used to control the style and layout of multiple Web pages all at once.

With CSS, all formatting can be removed from the HTML document and stored in a separate file.

CSS gives you total control of the layout, without messing up the document content.

To learn how to create style sheets, please visit our CSS tutorial.

URL – Uniform Resource Locator

Web browsers request pages from web servers by using a URL.

The URL is the address of a web page like: http://JaffnaCampus.com.

URL Encoding

URLs can only be sent over the Internet using the ASCII character-set.

Since URLs often contains characters outside the ASCII set, the URL has to be converted. URL encoding converts the URL into a valid ASCII format.

URL encoding replaces unsafe ASCII characters with "%" followed by two hexadecimal digits corresponding to the character values in the ISO-8859-1 character-set.

URLs cannot contain spaces. URL encoding normally replaces a space with a + sign.

URL Encoding Examples

For a complete reference of all URL encodings, visit our URL Encoding Reference.

If you want to learn more about programming with these events, you should study our JavaScript tutorial and our DHTML tutorial.

Window Events

Only valid in body and frameset elements.

Form Element Events

Only valid in form elements.

Keyboard Events

Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.

Mouse Events

Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title elements.

Core Attributes

Not valid in base, head, html, meta, param, script, style, and title elements.

Language Attributes

Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

Keyboard Attributes

Insert a Script into HTML Page

A script in HTML is defined with the <script> tag. Note that you will have to use the type attribute to specify the scripting language.

The script above will produce this output:

Hello World!

Note: To learn more about scripting in HTML, visit our JavaScript School.

How to Handle Older Browsers

A browser that does not recognize the <script> tag at all, will display the <script> tag’s content as text on the page. To prevent the browser from doing this, you should hide the script in comment tags. An old browser (that does not recognize the <script> tag) will ignore the comment and it will not write the tag’s content on the page, while a new browser will understand that the script should be executed, even if it is surrounded by comment tags.

Example

The <noscript> Tag

In addition to hiding the script inside a comment, you can also add a <noscript> tag.

The <noscript> tag is used to define an alternate text if a script is NOT executed. This tag is used for browsers that recognize the <script> tag, but do not support the script inside, so these browsers will display the text inside the <noscript> tag instead. However, if a browser supports the script inside the <script> tag it will ignore the <noscript> tag.

Example

Script Tags

When you click on a link in an HTML document like this: Last Page, an underlying <a> tag points to a place (an address) on the Web with an href attribute value like this: <a href="lastpage.htm">Last Page</a>.

The Last Page link in the example is a link that is relative to the Web site that you are browsing, and your browser will construct a full Web address like http://JaffnaCampus.com/html/lastpage.htm to access the page.

URL – Uniform Resource Locator

Something called a Uniform Resource Locator (URL) is used to address a document (or other data) on the World Wide Web. A full Web address like this: http://JaffnaCampus.com/html/lastpage.htm follows these syntax rules:

scheme://host.domain:port/path/filename

The scheme is defining the type of Internet service. The most common type is http.

The domain is defining the Internet domain name like JaffnaCampus.com.

The host is defining the domain host. If omitted, the default host for http is www.

The :port is defining the port number at the host. The port number is normally omitted. The default port number for http is 80. 

The path is defining a path (a sub directory) at the server. If the path is omitted, the resource (the document) must be located at the root directory of the Web site.

The filename is defining the name of a document. The default filename might be default.asp, or index.html or something else depending on the settings of the Web server.

URL Schemes

Some examples of the most common schemes can be found below:

Accessing a Newsgroup

The following HTML code:

<a href="news:alt.html">HTML Newsgroup</a>

creates a link to a newsgroup like this HTML Newsgroup.

Downloading with FTP

The following HTML code:

<a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a>

creates a link to download a file like this: Download WinZip.

(The link doesn’t work. Don’t try it. It is just an example. W3Schools doesn’t really have an ftp directory.)

Link to your Mail system

The following HTML code:

<a href="mailto:someone@w3schools.com">someone@w3schools.com</a>

creates a link to your own mail system like this:

sathees@JaffnaCampus.com

As we explained in the previous chapter, the head element contains general information (meta-information) about a document.

HTML also includes a meta element that goes inside the head element. The purpose of the meta element is to provide meta-information about the document.

Most often the meta element is used to provide information that is relevant to browsers or search engines like describing the content of your document.

Note: W3C states that "Some user agents support the use of META to refresh the current page after a specified number of seconds, with the option of replacing it by a different URI. Authors should not use this technique to forward users to different pages, as this makes the page inaccessible to some users. Instead, automatic page forwarding should be done using server-side redirects" at http://www.w3.org/TR/html4/struct/global.html#adef-http-equiv.

Keywords for Search Engines

Some search engines on the WWW will use the name and content attributes of the meta tag to index your pages.

This meta element defines a description of your page:

This meta element defines keywords for your page:

The intention of the name and content attributes is to describe the content of a page.

However, since too many webmasters have used meta tags for spamming, like repeating keywords to give pages a higher ranking, some search engines have stopped using them entirely.

You can read more about search engines in our SEO Tutorial.

Unknown Meta Attributes

Sometimes you will see meta attributes that are unknown to you like this:

Then you just have to accept that this is something unique to the site or to the author of the site, and that it has probably no relevance to you.

You can see a complete list of the meta element attributes in our
Complete HTML 4.01 Tag Reference.

The head element contains general information, also called meta-information, about a document. Meta means "information about".

You can say that meta-data means information about data, or meta-information means information about information.

Information Inside the Head Element

The elements inside the head element should not be displayed by a browser. 

According to the HTML standard, only a few tags are legal inside the head section. These are: <base>, <link>, <meta>, <title>, <style>, and <script>. 

Look at the following illegal construct:

In this case the browser has two options:

• Display the text because it is inside a paragraph element
• Hide the text because it is inside a head element

If you put an HTML element like <h1> or <p> inside a head element like this, most browsers will display it, even if it is illegal.

Should browsers forgive you for errors like this? We don’t think so. Others do.

Head Tags

Character Entities

Some characters are reserved in HTML. For example, you cannot use the greater than or less than signs within your text because the browser could mistake them for markup.

If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity looks like this: &entity_name; OR &#entity_number;

To display a less than sign we must write: &lt; or &#60;

The advantage of using an entity name instead of a number is that the name often is easier to remember. However, the disadvantage is that browsers may not support all entity names (while the support for entity numbers is very good).

Non-breaking Space

The most common character entity in HTML is the non-breaking space.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add lots of spaces to your text, use the &nbsp; character entity.

Commonly Used Character Entities

Note Entity names are case sensitive!

For a complete reference of all character entities, visit our HTML Reference.

How to Use Styles

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag.

Inline Styles

An inline style should be used when a unique style is to be applied to a single occurrence of an element.

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

To learn more about styles, visit our CSS tutorial.

Style Tags