HTML Tutorial

HTML Tutorial - (HTML5 Compliant)
With HTML you can create your own Web site.

This tutorial teaches you everything about HTML.
HTML is easy to learn - You will enjoy it.
Examples in Each Chapter
This HTML tutorial contains hundreds of HTML examples.
With our online HTML editor, you can edit the HTML, and click on a button to view the
result.
Example
<! DOCTYPE ht ml >
<ht ml >
<body>

<h1>My Fi r st Headi ng</ h1>

<p>My f i r st par agr aph. </ p>

</ body>
</ ht ml >

Try it yourself

Source code :

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Result :

My First Heading
My first paragraph.

Click on the "Try it yourself" button to see how it works
Start learning HTML now!
HTML Examples
At the end of the HTML tutorial you will find more than 100 examples you can edit and test
yourself.
Goto HTML Examples!
HTML Quiz Test
Test your HTML skills at W3Schools!
Start HTML Quiz!
HTML References
At W3Schools you will find complete references about tags, standard attributes, standard
events, colornames, entities, character-sets, URL encoding, language codes, HTTP
messages, and more.
HTML Tag Reference
HTML Exam - Get Your Diploma!

W3Schools' Online Certification
The perfect solution for professionals who need to balance work, family, and career
building.
More than 10 000 certificates already issued!
Get Your Certificate
The HTML Certificate documents your knowledge of HTML.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

HTML Introduction
HTML Example
<! DOCTYPE ht ml >
<ht ml >
<body>

<h1>My Fi r st Headi ng</ h1>

<p>My f i r st par agr aph. </ p>

</ body>
</ ht ml >

Try it yourself

Source code :

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Result :

My First Heading
My first paragraph.

Example Explained
The DOCTYPE declaration defines the document type
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

The <!DOCTYPE html> declaration is the doctype for HTML5.

What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) 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
The end tag is written like the start tag, with a forward slash before the tag
name
Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>

HTML Elements
"HTML tags" and "HTML elements" are often used to describe the same thing.
But strictly speaking, an HTML element is everything between the start tag and the end
tag, including the tags:
HTML Element:
<p>This is a paragraph.</p>

Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari)
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 Page Structure
Below is a visualization of an HTML page structure:
<html>
<body>
<h1>This a Heading</h1>
<p>This is another paragraph.</p>
</body>
</html>

HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration helps the browser to display a web page correctly.
There are many different documents on the web, and a browser can only display an HTML
page 100% correctly if it knows the HTML type and version used.

Common Declarations
HTML5
<! DOCTYPE ht ml >
HTML 4.01
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 01 Tr ansi t i onal / / EN"
" ht t p: / / www. w3. or g/ TR/ ht ml 4/ l oose. dt d" >
XHTML 1.0
<! DOCTYPE ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 Tr ansi t i onal / / EN"
" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- t r ansi t i onal . dt d" >
For a complete list of document type declarations, go to our DOCTYPE Reference.

HTML Editors

Writing HTML Using Notepad or TextEdit
HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit
(Mac). We believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.

Step 1: Start Notepad
To start Notepad go to:
Start
All Programs
Accessories
Notepad

Step 2: Edit Your HTML with Notepad
Type your HTML code into your Notepad:

Step 3: Save Your HTML
Select Save as.. in Notepad's file menu.
When you save an HTML file, you can use either the .htm or the .html file extension. There
is no difference, it is entirely up to you.
Save the file in a folder that is easy to remember, like w3schools.

Step 4: Run the HTML in Your Browser
Start your web browser and open your html file from the File, Open menu, or just browse
the folder and double-click your HTML file.
The result should look much like this:

HTML Basic - 4 Examples

Don't worry if the examples use tags you have not learned.
You will learn about them in the next chapters.

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>Thi s i s a headi ng</ h1>

Try it yourself

Source code :

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>

</body>
</html>

Result :

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>Thi s i s a par agr aph. </ p>
<p>Thi s i s anot her par agr aph. </ p>

Try it yourself

Source code :

<!DOCTYPE html>
<html>
<body>


</body>
</html>

Result :
This is a paragraph.

HTML Links
HTML links are defined with the <a> tag.
Example
<a hr ef =" ht t p: / / www. w3school s. com" >Thi s i s a l i nk</ a>

Try it yourself

Source code :

<!DOCTYPE html>
<html>
<body>

<a href="http://www.w3schools.com">
This is a link</a>

</body>
</html>

Result :

This is a link
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
<i mg sr c=" w3school s. j pg" wi dt h=" 104" hei ght =" 142" >

Try it yourself

Source code :

<!DOCTYPE html>
<html>
<body>

<img src="w3schools.jpg" width="104" height="142"></body>
</html>

Result :

Note: The filename and the size of the image are provided as attributes.

HTML Elements

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
<! DOCTYPE ht ml >
<ht ml >

<body>
<p>Thi s i s my f i r st par agr aph. </ p>
</ body>

</ ht ml >
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:
<ht ml >

<body>
</ body>

</ ht ml >
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
Some HTML elements might display correctly even if you forget the end tag:
<p>Thi s i s a par agr aph
The example above works in most browsers, because the closing tag is considered optional.
Never rely on this. Many HTML elements will produce unexpected results and/or errors if
you forget the end tag .

Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br
/>, is the proper way of closing empty elements in XHTML (and XML).

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) recommendslowercase in HTML 4, and demands lowercase tags in XHTML.

HTML Attributes

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 hr ef =" ht t p: / / www. w3school s. com" >Thi s i s a l i nk</ a>

Try it yourself

Source code :

<!DOCTYPE html>
<html>
<body>

<a href="http://www.w3schools.com">
This is a link</a>

</body>
</html>

Result :

This is a link

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: HTML Tag
Reference.
Below is a list of some attributes that can be used on any HTML element:
Attribute Description
class Specifies one or more classnames for an element (refers to a class in a style sheet)
id Specifies a unique id for an element
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
For more information about global attributes: HTML Global Attributes Reference.

HTML Headings

Headings are important in HTML documents.

HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example

Try it yourself

Source code :

<!DOCTYPE html>
<html>
<body>


</body>
</html>

Result :
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

Note: Browsers automatically add some empty space (a margin) before and after each
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>Thi s i s a par agr aph</ p>
<hr ><p>Thi s i s a par agr aph</ p>
<hr ><p>Thi s i s a par agr aph</ p>

Try it yourself

Source code :

<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr><p>This is a paragraph</p>
</body>
</html>

Result :
The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph

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
<! - - Thi s i s a comment - - >

Try it yourself

Source code :

<!DOCTYPE html>
<html>
<body>


<p>This is a regular paragraph</p>

</body>
</html>

Result :

This is a regular paragraph
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.

Examples From This Page
Headings
How to display headings in an HTML document.
Source code :
<!DOCTYPE html>
<html>
<body>


</body>
</html>
Result :
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

Hidden comments
How to insert comments in the HTML source code.
Source code :
<!DOCTYPE html>
<html>
<body>


<p>This is a regular paragraph</p>

</body>
</html>
Result :
This is a regular paragraph
Horizontal lines
How to insert a horizontal line.
Source code :
<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
</body>
</html>

Result :
The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph

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

Formatting
<b>Bold text</b>
<code>Computer code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd>
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>

<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (a section quoted from another source)
<cite> (title of a work)
<del> (deleted text)
<ins> (inserted text)
<sub> (subscripted text)
<sup> (superscripted text)
Links
Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate
Text"></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>
Bookmark:
<a id="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
Images
<img src="URL" alt="Alternate Text" height="42" width="42">
Styles/Sections
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>

<div>A block-level section in a document</div>
<span>An inline section in a document</span>
Unordered list
<ul>
<li>Item</li>
<li>Item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Definition list
<dl>
<dt>Item 1</dt>
<dd>Describe item 1</dd>
<dt>Item 2</dt>
<dd>Describe item 2</dd>
</dl>
Tables
<table border="1">
<tr>
<th>table header</th>
<th>table header</th>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
</tr>
</table>
Iframe
<iframe src="demo_iframe.htm"></iframe>
Forms
<form action="demo_form.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>

</form>
Entities
< is the same as <
> is the same as >
© is the same as
Source : http://www.w3schools.com/html/html_quick.asp

You Have Learned HTML, Now What?

HTML Summary
This tutorial has taught you how to use HTML to create your own web site.
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 examples and our HTML
reference.

Now You Know HTML, What's Next?

Learn 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.

Learn JavaScript
JavaScript can make your web site more dynamic.
A static web site is nice when you just want to show flat content, but a dynamic web site
can react to events and allow user interaction.
JavaScript is the most popular scripting language on the internet and it works with all
major browsers.
If you want to learn more about JavaScript, please visit our JavaScript tutorial.

Hosting your own Web site
Hosting your web site on your own server is always an option. Here are some points to
consider:
Hardware Expenses
To run a "real" web site, you will have to buy some powerful server hardware. Don't
expect that a low cost PC will do the job. You will also need a permanent (24 hours a day )
high-speed connection.
Software Expenses
Remember that server-licenses often are higher than client-licenses. Also note that server-
licenses might have limits on number of users.
Labor Expenses
Don't expect low labor expenses. You have to install your own hardware and software. You
also have to deal with bugs and viruses, and keep your server constantly running in an
environment where "everything could happen".

Using an Internet Service Provider
Renting a server from an Internet Service Provider (ISP) is a common option.
Most small companies store their web site on a server provided by an ISP. Here are some
advantages:
Connection Speed
Most ISPs have very fast connections to the Internet.
Powerful Hardware
ISPs often have powerful web servers that can be shared by several companies. You can
also expect them to have an effective load balancing, and necessary backup servers.
Security and Stability
ISPs are specialists on web hosting. Expect their servers to have more than 99% up time,
the latest software patches, and the best virus protection.

Things to Consider with an ISP
24-hour support
Make sure your ISP offers 24-hours support. Don't put yourself in a situation where you
cannot fix critical problems without having to wait until the next working day. Toll-free
phone could be vital if you don't want to pay for long distance calls.
Daily Backup
Make sure your ISP runs a daily backup routine, otherwise you may lose some valuable
data.
Traffic Volume
Study the ISP's traffic volume restrictions. Make sure that you don't have to pay a fortune
for unexpected high traffic if your web site becomes popular.
Bandwidth or Content Restrictions
Study the ISP's bandwidth and content restrictions. If you plan to publish pictures or
broadcast video or sound, make sure that you can.
E-mail Capabilities
Make sure your ISP supports the e-mail capabilities you need.
Database Access
If you plan to use data from databases on your web site, make sure your ISP supports the
database access you need.
Before you select an ISP, make sure you read W3Schools Web Hosting Tutorial.

W3Schools' Online Certification
The perfect solution for professionals who need to balance work, family, and career
building.
More than 10 000 certificates already issued!
Get Your Certificate
The HTML Certificate documents your knowledge of HTML.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

HTML Tutorial

Uploaded by

HTML Tutorial

Uploaded by

HTML Tutorial - (HTML5 Compliant)

With HTML you can create your own Web site.

You might also like