What Is HTML?

What is HTML?
HTML is a language for describing web pages.

• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a markup language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
• HTML tags are keywords surrounded by angle brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages

• HTML documents describe web pages
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents
and display them as web pages. The browser does not display the HTML tags, but uses the tags
to interpret the content of the page:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
• The text between <html> and </html> describes the web page
• The text between <body> and </body> is the visible page content
• The text between <h1> and </h1> is displayed as a heading
• The text between <p> and </p> is displayed as a paragraph
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading</h1>
Try it yourself »
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it yourself »
HTML Links
HTML links are defined with the <a> tag.
Example
<a href="http://www.w3schools.com">This is a link</a>
Try it yourself »
Note: The link address is specified in the href attribute.
(You will learn about attributes in a later chapter of this tutorial).
HTML Images
HTML images are defined with the <img> tag.
Example
<img src="w3schools.jpg" width="104" height="142" />
Try it yourself »
Note: The name and the size of the image are provided as attributes.
HTML documents are defined by HTML elements.
HTML Elements
An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />
* The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Element Syntax

• An HTML element starts with a start tag / opening tag
• An HTML element ends with an end tag / closing tag
• The element content is everything between the start and the end tag
• Some HTML elements have empty content
• Empty elements are closed in the start tag
• Most HTML elements can have attributes
Tip: You will learn about attributes in the next chapter of this tutorial.
Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.
HTML Document Example

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The example above contains 3 HTML elements.
HTML Example Explained

The <p> element:
The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element:
<body>
</body>
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:
<html>
<body>
</body>
</html>
The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:
<p>This is a paragraph
The example above will work in most browsers, but don't rely on it. Forgetting the end tag can
produce unexpected results or errors.
Note: Future version of HTML will not allow you to skip end tags.
Empty HTML Elements

HTML elements with no content are called empty elements. Empty elements can be closed in the
start tag.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
In XHTML, XML, and future versions of HTML, all elements must be closed.
Adding a slash to the start tag, like <br />, is the proper way of closing empty elements, accepted
by HTML, XHTML and XML.
Even if <br> works in all browsers, writing <br /> instead is more future proof.
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase
HTML tags.
W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends
lowercase in HTML 4, and demands lowercase tags in future versions of (X)HTML.
Attributes provide additional information about HTML elements.
HTML Attributes
• HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"
Attribute Example
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="http://www.w3schools.com">This is a link</a>
Try it yourself »
Always Quote Attribute Values

Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style quotes are also allowed.
Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to
use single quotes: name='John "ShotGun" Nelson'
HTML Tip: Use Lowercase Attributes

Attribute names and attribute values are case-insensitive.
However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute
values in their HTML 4 recommendation.
Newer versions of (X)HTML will demand lowercase attributes.
HTML Attributes Reference
A complete list of legal attributes for each HTML element is listed in our:
Complete HTML Reference
Below is a list of some attributes that are standard for most HTML elements:
Attribute Value Description
class classname Specifies a classname for an element
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
Specifies extra information about an element (displayed
title tooltip_text
as a tool tip)
For more information about standard attributes:
HTML Standard Attributes Reference
The attributes listed below are standard, and are supported by all HTML and XHTML tags, with
a few exceptions.
Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements.
class classname Specifies a classname for an element
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
title text Specifies extra information about an element
Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.
ltr
dir Specifies the text direction for the content in an element
rtl
Specifies a language code for the content in an element.
lang language_code
Language code reference
Specifies a language code for the content in an element, in
xml:lang language_code
XHTML documents. Language code reference
Keyboard Attributes
accesskey character Specifies a keyboard shortcut to access an element
tabindex number Specifies the tab order of an element
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading.
Example
Try it yourself »
Note: Browsers automatically add an empty line before and after a heading.
Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the
document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important
H3 headings, and so on.
HTML Lines
The <hr /> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
<p>This is a paragraph</p>
<hr />
<hr />
Try it yourself »
HTML Comments
Comments can be inserted into the HTML code to make it more readable and understandable.
Comments are ignored by the browser and are not displayed.
Comments are written like this:
Example

Try it yourself »
Note: There is an exclamation point after the opening bracket, but not before the closing bracket.
HTML Tip - How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"
To find out, right-click in the page and select "View Source" (IE) or "View Page Source"
(Firefox), or similar for other browsers. This will open a window containing the HTML code of
the page.
HTML Tag Reference

W3Schools' tag reference contains additional information about these tags and their attributes.
You will learn more about HTML tags and attributes in the next chapters of this tutorial.
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<hr /> Defines a horizontal line

<blockquote>
Text quoted from a source.
</blockquote>
<address>
Written by W3Schools.com<br />
<a href="mailto:[email protected]">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
Source : http://www.w3schools.com/html/html_quick.asp
Top of Form
Validate the page
Bottom of Form
HTML DOCTYPE Element
Tag Description
Defines the document type. This declaration goes before the

<!DOCTYPE>
<html> start tag
In HTML 4.0, all formatting can be removed from the HTML document, and stored in a style
sheet.
Using styles in HTML

How to add style information into the <head> section.
Link that is not underlined
How to make a link that is not underlined, with the style attribute.
Link to an external style sheet
How to use the <link> tag to link to an external style sheet.
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
• Internal style sheet
• Inline styles
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:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are
defined in the <head> section of an HTML page, by using the <style> tag, like this:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
Inline Styles
An inline style can be used if a unique style is to be applied to one single occurrence of an
element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any
CSS property. The example below shows how to change the text color and the left margin of a
paragraph:
<p style="color:blue;margin-left:20px">This is a paragraph.</p>
To learn more about style sheets, visit our CSS tutorial.
HTML Style Tags

Tag Description
<style> Defines style information for a document
<link /> Defines the relationship between a document and an external resource
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.
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 simple HTML document, with the minimum of required tags:
<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

The <meta> tag provides metadata about the HTML document.
The meta element will be explained in the next chapter.
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

Tag Description
<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
Defines the relationship between a document and an external

<link />
resource
<meta /> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
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 parsable.
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.
Note: A lot of webmasters have used <meta> tags for spamming, like repeating keywords (or
using wrong keywords) for higher ranking. Therefore, most search engines have stopped using
<meta> tags to index/rank pages.
JavaScripts make HTML pages more dynamic and interactive.
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 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 »
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>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
Try it yourself »
HTML Script Tags

Tag Description
<script> Defines a client-side script
<noscript Defines an alternate content for users that do not support client-side
> scripts
Example
Insert a JavaScript in an HTML page:
</script>
Try it yourself »
Definition and Usage

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.
Browser Support
The <script> tag is supported in all major browsers.
Differences Between HTML and XHTML

HTML 4 and XHTML deal different with the content inside scripts:
• In HTML 4, the content type is declared as CDATA, which means that entities
will not be parsed.
• In XHTML, the content type is declared as (#PCDATA), which means that
entities will be parsed.
This means that in XHTML, all special characters should be encoded or all content should be
wrapped inside a CDATA section.
To ensure that a script parses correctly in an XHTML document, use the following syntax:
<script type="text/javascript">//<![CDATA[
var i=10;
if (i<5)
{
// some code
}
//]]></script>
Tips and Notes

Tip: Also look at the noscript element for users that have disabled scripts in their browser or
have a browser that doesn’t support client-side scripting.
Required Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
DT
D
type MIME-type Specifies the MIME type of a script STF
Optional Attributes
DT
D
charset charset Specifies the character encoding used in an external STF

script file
Specifies that the execution of a script should be

defer defer deferred (delayed) until after the page has been STF
loaded
src URL Specifies the URL of an external script file STF
Specifies whether whitespace in code should be

xml:space preserve
preserved
Standard Attributes
The <script> tag does not support any standard attributes.
More information about Standard Attributes.
Event Attributes
The <script> tag does not support any event attributes.
More information about Event Attributes.

What Is HTML?

Uploaded by

Copyright:

Available Formats

What Is HTML?

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

What Is HTML?

Uploaded by

Copyright:

Available Formats

What is HTML?

HTML is a language for describing web pages.

HTML Documents = Web Pages

<h1>My First Heading</h1>

<p>My first paragraph.</p>

HTML Element Syntax

Nested HTML Elements

HTML Document Example

HTML Example Explained

Don't Forget the End Tag

Empty HTML Elements

Attributes provide additional information about HTML elements.

Always Quote Attribute Values

HTML Tip: Use Lowercase Attributes

Headings Are Important

The hr element can be used to separate content:

HTML Tip - How to View HTML Source

HTML Tag Reference

HTML documents are divided into paragraphs.

Don't Forget the End Tag

HTML Line Breaks

<br> or <br />

HTML Output - Useful Tips

HTML Tag Reference

HTML Text Formatting

This text is big

This text is italic

This is computer output

HTML Formatting Tags

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

Try it Yourself - Examples

HTML Text Formatting Tags

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

HTML "Computer Output" Tags

<code> Defines computer code text

<kbd> Defines keyboard text

<samp> Defines sample computer code

<tt> Defines teletype text

<var> Defines a variable

<pre> Defines preformatted text

HTML Citations, Quotations, and Definition Tags

<abbr> Defines an abbreviation

<acronym> Defines an acronym

<address> Defines contact information for the author/owner of a document

<bdo> Defines the text direction

<blockquote> Defines a long quotation

<q> Defines a short quotation

<dfn> Defines a definition term

The style attribute is used to style HTML elements.

Look! Styles and colors