Tuesday, August 14, 2012

HTML Entities

Reserved characters in HTML must be replaced with character entities.

HTML Entities

Some characters are reserved in HTML.
It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags.
To actually display reserved characters, we must use character entities in the HTML source code.
A character entity looks like this:
&entity_name; OR
&#entity_number;
 
To display a less than sign we must write: &lt; or &#60;

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



Non-breaking Space

A common character entity used in HTML is the non-breaking space (&nbsp;).
Browsers will always truncate spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them, before displaying the page. To add spaces to your text, you can use the &nbsp; character entity.

HTML Entities Example

Experiment with HTML character entities: Try it yourself

HTML Useful Character Entities

Note: Entity names are case sensitive!

ResultDescriptionEntity NameEntity Number
 non-breaking space&nbsp;&#160;
<less than&lt;&#60;
>greater than&gt;&#62;
&ampersand&amp;&#38;
¢cent&cent;&#162;
£pound&pound;&#163;
¥yen&yen;&#165;
euro&euro;&#8364;
§section&sect;&#167;
©copyright&copy;&#169;
®registered trademark&reg;&#174;
trademark&trade;&#8482;


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

HTML Scripts

JavaScripts make HTML pages more dynamic and interactive.

Try it Yourself - Examples

Insert a script
How to insert a script into an HTML document.

Use of the <noscript> tag
How to handle browsers that do not support scripting, or have scripting disabled.



The HTML script Element

The <script> tag is used to define a client-side script, such as a JavaScript.
The script element either contains scripting statements or it points to an external script file through the src attribute.

The required type attribute specifies the MIME type of the script.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
The script below writes Hello World! to the HTML output:

Example

<script type="text/javascript">
document.write("Hello World!")
</script>

Try it yourself »
Remark Tip: To learn more about JavaScript, visit our JavaScript tutorial!

The HTML noscript Element

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting.

The noscript element can contain all the elements that you can find inside the body element of a normal HTML page.

The content inside the noscript element will only be displayed if scripts are not supported, or are disabled in the user’s browser:

Example

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

Try it yourself »


HTML Script Tags

TagDescription
<script>Defines a client-side script
<noscript>Defines an alternate content for users that do not support client-side scripts

HTML Head Elements

Try it Yourself - Examples

The title of a document
The <title> tag defines the title of the document.

One target for all links
How to use the <base> tag to let all the links on a page open in a new window.

Document description
Use the <meta> element to describe the document.

Document keywords
Use the <meta> element to define the keywords of a document.

Redirect a user
How to redirect a user to a new web address.

The HTML <head> Element

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

The HTML <title> Element

The <title> tag defines the title of the document.
The title element is required in all HTML/XHTML documents.
The title element:
  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results
A simplified HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>


The HTML <base> Element

The <base> tag specifies a default address or a default target for all links on a page:
<head>
<base href="http://www.w3schools.com/images/" />
<base target="_blank" />
</head>


The HTML <link> Element

The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>


The HTML <style> Element

The <style> tag is used to define style information for an HTML document.
Inside the style element you specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>


The HTML <meta> Element

Metadata is information about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine readable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The <meta> tag always goes inside the head element.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Keywords for Search Engines

Some search engines will use the name and content attributes of the meta element to index your pages.
The following meta element defines a description of a page:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
The following meta element defines keywords for a page:
<meta name="keywords" content="HTML, CSS, XML" />
The intention of the name and content attributes is to describe the content of a page.

The HTML <script> Element

The <script> tag is used to define a client-side script, such as a JavaScript.
The script element will be explained in a later chapter.

HTML head Elements

TagDescription
<head>Defines information about the document
<title>Defines the title of a document
<base />Defines a default address or a default target for all links on a page
<link />Defines the relationship between a document and an external resource
<meta />Defines metadata about an HTML document
<script>Defines a client-side script
<style>Defines style information for a document

HTML Doctype

A <!DOCTYPE> declaration helps the browser to display a web page correctly.

The <!DOCTYPE> Declaration

There are many different documents on the web. A browser can only display a document correctly, if it knows what kind of document it is.

There are also many different versions of HTML, and a browser can only display an HTML page 100% correctly if it knows the exact HTML version used in the page. This is what <!DOCTYPE> is used for.
<!DOCTYPE> is not an HTML tag. It is an information (a declaration) to the browser about what version the HTML is written in. 

In this tutorial we use the HTML5 DOCTYPE.

Example

An HTML document with an HTML5 DOCTYPE:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>


HTML Versions

Since the early days of the web, there have been many versions of HTML:
VersionYear
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013


Common Declarations

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
For a complete list of document type declarations, go to our DOCTYPE Reference.