0% found this document useful (0 votes)

6 views

HTML Intro

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, consisting of elements that define the structure and presentation of content. A simple HTML document includes a doctype declaration, root element, head, and body, with various tags for headings, paragraphs, links, and images. The document structure and elements are essential for browsers to display content correctly, and HTML has evolved through multiple versions since its inception in 1991.

Uploaded by

Pandi Selvi

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

6 views

HTML Intro

Uploaded by

Pandi Selvi

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 137

HTML Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.

A Simple HTML Document

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Try it Yourself »

Example Explained
 The <!DOCTYPE html> declaration defines that this document is an HTML5
document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> None none

Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag

Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to
display the document:

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>

</head>

<body>
<h1>This is a heading</h1>

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

<p>This is another paragraph.</p>

</body>

</html>
Note: The content inside the <body> section will be displayed in a browser. The
content inside the <title> element will be shown in the browser's title bar or in
the page's tab.

HTML History
Since the early days of the World Wide Web, there have been many versions of
HTML:

Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

This tutorial follows the latest HTML5 standard.

HTML Editors
A simple text editor is all you need to learn HTML.

Learn HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad
(PC) or TextEdit (Mac).

We believe that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files

correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as
HTML code instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the
preferred encoding for HTML files).

Tip: You can use either .htm or .html as file extension. There is no difference; it
is up to you.

Step 4: View the HTML Page in Your

Browser
Open the saved HTML file in your favorite browser (double click on the file, or
right-click - and choose "Open with").

The result will look much like this:

W3Schools Online Editor - "Try it

Yourself"
With our free online editor, you can edit the HTML code and view the result in
your browser.
It is the perfect tool when you want to test code fast. It also has color coding
and the ability to save and share code with others:

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Basic Examples

In this chapter we will show some basic HTML examples.

Don't worry if we use tags you have not learned about yet.

HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE
html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers
to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading:

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

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="https://www.w3schools.com">This is a link</a>
Try it Yourself »

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as
attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="14
2">
Try it Yourself »

How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

Right-click in an HTML page and select "View Page Source" (in Chrome) or "View
Source" (in Edge), or similar in other browsers. This will open a window
containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect
Element" to see what elements are made up of (you will see both the HTML and
the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles
panel that opens.
HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.

HTML Elements
The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here...</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Note: Some HTML elements have no content (like the <br> element). These elements are called
empty elements. Empty elements do not have an end tag!

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Try it Yourself »

Example Explained
The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Example
<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>
Try it Yourself »

However, never rely on this! Unexpected results and errors may occur if you forget the end tag!

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

Example
<p>This is a <br> paragraph with a line break.</p>
Try it Yourself »

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML,
and demands lowercase for stricter document types like XHTML.

At W3Schools we always use lowercase tag names.

HTML Tag Reference

W3Schools' tag reference contains additional information about these tags and their attributes.
Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

For a complete list of all available HTML tags, visit our HTML Tag Reference

HTML Attributes
HTML attributes provide additional information about HTML elements.

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example
<a href="https://www.w3schools.com">Visit W3Schools</a>
Try it Yourself »

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path
to the image to be displayed:
Example
<img src="img_girl.jpg">
Try it Yourself »

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website.

Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use it, you may be
in violation of copyright laws. In addition, you cannot control external images; it can suddenly be
removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not
include the domain name. If the URL begins without a slash, it will be relative to the current page.
Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain.
Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width
and height of the image (in pixels):

Example
<img src="img_girl.jpg" width="500" height="600">
Try it Yourself »

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image
for some reason cannot be displayed. This can be due to a slow connection, or an error in
the src attribute, or if the user uses a screen reader.

Example
<img src="img_girl.jpg" alt="Girl with a jacket">
Try it Yourself »

Example
See what happens if we try to display an image that does not exist:

<img src="img_typo.jpg" alt="Girl with a jacket">

Try it Yourself »

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

Example
<p style="color:red;">This is a red paragraph.</p>
Try it Yourself »

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language of the
Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So, the first two
characters define the language of the HTML page, and the last two characters define the country.

The following example specifies English as the language and United States as the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

You can see all the language codes in our HTML Language Code Reference.

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Example
<p title="I'm a tooltip">This is a paragraph.</p>
Try it Yourself »

We Suggest: Always Use Lowercase

Attributes
The HTML standard does not require lowercase attribute names.

The title attribute (and all other attributes) can be written with uppercase or lowercase
like title or TITLE.

However, W3C recommends lowercase attributes in HTML, and demands lowercase attributes for
stricter document types like XHTML.

At W3Schools we always use lowercase attribute names.

We Suggest: Always Quote Attribute

Values
The HTML standard does not require quotes around attribute values.

However, W3C recommends quotes in HTML, and demands quotes for stricter document types like
XHTML.

Good:
<a href="https://www.w3schools.com/html/">Visit our HTML
tutorial</a>

Bad:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

Sometimes you have to use quotes. This example will not display the title attribute correctly, because
it contains a space:
Example
<p title=About W3Schools>
Try it Yourself »
At W3Schools we always use quotes around attribute values.

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be
used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single
quotes:

<p title='John "ShotGun" Nelson'>

Or vice versa:

<p title="John 'ShotGun' Nelson">

Try it Yourself »

Chapter Summary
 All HTML elements can have attributes
 The href attribute of <a> specifies the URL of the page the link goes to
 The src attribute of <img> specifies the path to the image to be displayed
 The width and height attributes of <img> provide size information for images
 The alt attribute of <img> provides an alternate text for an image
 The style attribute is used to add styles to an element, such as color, font, size, and
more
 The lang attribute of the <html> tag declares the language of the Web page
 The title attribute defines some extra information about an element

HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage

Example

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Try it Yourself »

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Try it Yourself »

Note: Browsers automatically add some white space (a margin) before and after a heading.

Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is important to use headings to show the document
structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less
important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with
the style attribute, using the CSS font-size property:

Example
<h1 style="font-size:60px;">Heading 1</h1>

Try it Yourself »

HTML Tag Reference

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text

HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »

HTML Display
You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines
in your HTML code.

The browser will automatically remove any extra spaces and lines when the
page is displayed:

Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
Try it Yourself »

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML
page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
Try it Yourself »

The <hr> tag is an empty tag, which means that it has no end tag

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example
<p>This is<br>a paragraph<br>with line breaks.</p>
Try it Yourself »

The <br> tag is an empty tag, which means that it has no end tag.

The Poem Problem

This poem will display on a single line:

Example
<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>
Try it Yourself »
Solution - The HTML <pre> Element
The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually

Courier), and it preserves both spaces and line breaks:

Example
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>
Try it Yourself »
HTML Tag Reference

Tag Description

<p> Defines a paragraph

<hr> Defines a thematic change in the content

<br> Inserts a single line break

<pre> Defines pre-formatted text

HTML Styles
The HTML style attribute is used to add styles to an element, such as color,
font, size, and more.
Example
I am Red
I am Blue

I am Big
Try it Yourself »

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

Background Color
The CSS background-color property defines the background color for an HTML
element.

Example
Set the background color for a page to powderblue:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
Try it Yourself »

Example
Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>

</body>
Try it Yourself »

Text Color
The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Try it Yourself »

Fonts
The CSS font-family property defines the font to be used for an HTML element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Try it Yourself »

Text Size
The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Try it Yourself »
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML
element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Try it Yourself »

Chapter Summary
 Use the style attribute for styling HTML elements
 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Example
This text is bold

This text is italic

This is subscript and superscript

Try it Yourself »

HTML Formatting Elements

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example
<b>This text is bold</b>
Try it Yourself »

The HTML <strong> element defines text with strong importance. The content
inside is typically displayed in bold.

Example
<strong>This text is important!</strong>
Try it Yourself »

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The
content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from
another language, a thought, a ship name, etc.

Example
<i>This text is italic</i>
Try it Yourself »

The HTML <em> element defines emphasized text. The content inside is typically
displayed in italic.
Tip: A screen reader will pronounce the words in <em> with an emphasis, using
verbal stress.

Example
<em>This text is emphasized</em>
Try it Yourself »

HTML <small> Element

The HTML <small> element defines smaller text:

Example
<small>This is some smaller text.</small>
Try it Yourself »

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
Try it Yourself »

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text:

Example
<p>My favorite color is <del>blue</del> red.</p>
Try it Yourself »

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:

Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
Try it Yourself »

HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H 2O:

Example
<p>This is <sub>subscripted</sub> text.</p>
Try it Yourself »

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a
character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW [1]:

Example
<p>This is <sup>superscripted</sup> text.</p>
Try it Yourself »

HTML Text Formatting Elements

Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

HTML Quotation and Citation

Elements
In this chapter we will go through
the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML
elements.
Example
Here is a quote from WWF's website:

For 60 years, WWF has worked to help people and nature thrive. As the world's
leading conservation organization, WWF works in nearly 100 countries. At every
level, we collaborate with people around the world to develop and deliver
innovative solutions that protect communities, wildlife, and the places in which
they live.
Try it Yourself »

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another
source.

Browsers usually indent <blockquote> elements.

Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As
the world's leading conservation organization, WWF works in nearly
100 countries. At every level, we collaborate with people around
the world to develop and deliver innovative solutions that protect
communities, wildlife, and the places in which they live.
</blockquote>
Try it Yourself »

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example
<p>WWF's goal is to: <q>Build a future where people live in harmony
with nature.</q></p>
Try it Yourself »
HTML <abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS",
"Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation

systems and search-engines.

Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.

Example
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
Try it Yourself »

HTML <address> for Contact

Information
The HTML <address> tag defines the contact information for the author/owner of
a document or an article.

The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Try it Yourself »

HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a
song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
Try it Yourself »

HTML <bdo> for Bi-Directional

Override
BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example
<bdo dir="rtl">This text will be written from right to left</bdo>
Try it Yourself »

HTML Quotation and Citation Elements

Tag Description

<abbr> Defines an abbreviation or acronym

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

<bdo> Defines the text direction

<cite> Defines the title of a work

<q> Defines a short inline quotation

HTML Comments
HTML comments are not displayed in the browser, but they can help
document your HTML source code.

HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the start tag, but not in the end
tag.

Note: Comments are not displayed by the browser, but they can help document
your HTML source code.

Add Comments
With comments you can place notifications and reminders in your HTML code:

Example

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

Try it Yourself »

Hide Content
Comments can be used to hide content.

This can be helpful if you hide content temporarily:

Example
<p>This is a paragraph.</p>

<p>This is a paragraph too.</p>

Try it Yourself »

You can also hide more than one line. Everything between the <!-- and the --
> will be hidden from the display.

Example
Hide a section of HTML code:

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

<p>This is a paragraph too.</p>
Try it Yourself »

Comments are also great for debugging HTML, because you can comment out
HTML lines of code, one at a time, to search for errors.

Hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.

Example
Hide a part of a paragraph:
<p>This  is a paragraph.</p>
Try it Yourself »

HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or
HSLA values

Color Names
In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet
LightGray

HTML supports 140 standard color names.

Background Color
You can set the background color for HTML elements:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Try it Yourself »

Text Color
You can set the color of text:

Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Try it Yourself »

Border Color
You can set the color of borders:

Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Try it Yourself »

Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values,
and HSLA values.

The following three <div> elements have their background color set with RGB, HEX, and HSL
values:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

The following two <div> elements have their background color set with RGBA and HSLA values,
which add an Alpha channel to the color (here we have 50% transparency):, 71, 100%,
6%, 0.5)
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Try it Yourself »

HTML Styles - CSS

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at
once.

CSS = Styles and Colors

M a n i p u l a t e T e x t
C o l o r s , B o x e s

What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images
or background colors are to be used, different displays for different devices and
screen sizes, and much more!

Tip: The word cascading means that a style applied to a parent element will
also apply to all children elements within the parent. So, if you set the color of
the body text to "blue", all headings, paragraphs, and other text elements within
the body will also get the same color (unless you specify something else)!

Using CSS
CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files.
However, in this tutorial we will use inline and internal styles, because this is
easier to demonstrate, and easier for you to try it yourself.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:

Example
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Try it Yourself »

Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within

a <style> element.

The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition, the
page will be displayed with a "powderblue" background color:

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Try it Yourself »

External CSS
An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each
HTML page:

Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Try it Yourself »

The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

Tip: With an external style sheet, you can change the look of an entire web site,
by changing one file!

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn
more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example
Use of CSS color, font-family and font-size properties:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Try it Yourself »
CSS Border
The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example
Use of CSS border property:

p {
border: 2px solid powderblue;
}

Try it Yourself »

CSS Padding
The CSS padding property defines a padding (space) between the text and the
border.

Example
Use of CSS border and padding properties:

p {
border: 2px solid powderblue;
padding: 30px;
}
Try it Yourself »

CSS Margin
The CSS margin property defines a margin (space) outside the border.

Example
Use of CSS border and margin properties:

p {
border: 2px solid powderblue;
margin: 50px;
}
Try it Yourself »

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to
the current web page.

Example
This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.w3schools.com/html/

styles.css">

Try it Yourself »

Example
This example links to a style sheet located in the html folder on the current web
site:

<link rel="stylesheet" href="/html/styles.css">

Try it Yourself »

Example
This example links to a style sheet located in the same folder as the current
page:

<link rel="stylesheet" href="styles.css">

Try it Yourself »
You can read more about file paths in the chapter HTML File Paths.

Chapter Summary
 Use the HTML style attribute for inline styling
 Use the HTML <style> element to define internal CSS
 Use the HTML <link> element to refer to an external CSS file
 Use the HTML <head> element to store <style> and <link> elements
 Use the CSS color property for text colors
 Use the CSS font-family property for text fonts
 Use the CSS font-size property for text sizes
 Use the CSS border property for borders
 Use the CSS padding property for space inside the border
 Use the CSS margin property for space outside the border

Tip: You can learn much more about CSS in our CSS Tutorial.

Test Yourself WHTML Style Tags

Tag Description

<style> Defines style information for an HTML document

<link> Defines a link between a document and an external resource

HTML Images
Images can improve the design and the appearance of a web page.

Example
<img src="pic_trulli.jpg" alt="Italian Trulli">
Try it Yourself »

Example
<img src="img_girl.jpg" alt="Girl in a jacket">
Try it Yourself »

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Try it Yourself »

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing
tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">

The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the
image from a web server and inserts it into the page. Therefore, make sure that
the image actually stays in the same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken link icon and the alt text are
shown if the browser cannot find the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Try it Yourself »

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Try it Yourself »

If a browser cannot find an image, it will display the value of the alt attribute:
Example
<img src="wrongname.gif" alt="Flowers in Chania">
Try it Yourself »
Tip: A screen reader is a software program that reads the HTML code, and
allows the user to "listen" to the content. Screen readers are useful for people
who are visually impaired or learning disabled.

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Try it Yourself »

Alternatively, you can use the width and height attributes:

Example
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">
Try it Yourself »

The width and height attributes always define the width and height of the image
in pixels.

Note: Always specify the width and height of an image. If width and height are
not specified, the web page might flicker while the image loads.

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5

Icon" style="width:128px;height:128px;">

</body>
</html>
Try it Yourself »

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in
the src attribute:

Example
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Try it Yourself »

Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL
in the src attribute:

Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" al
t="W3Schools.com">
Try it Yourself »

Notes on external images: External images might be under copyright. If you

do not get permission to use it, you may be in violation of copyright laws. In
addition, you cannot control external images; they can suddenly be removed or
changed.
Animated Images
HTML allows animated GIFs:

Example
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
Try it Yourself »

Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
Try it Yourself »

Image Floating
Use the CSS float property to let the image float to the right or to the left of a
text:

Example
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley

face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Try it Yourself »
Tip: To learn more about CSS Float, read our CSS Float Tutorial.

Common Image Formats

Here are the most common image file types, which are supported in all browsers
(Chrome, Edge, Firefox, Safari, Opera):

Abbreviation File Format File Extension

APNG Animated Portable Network Graphics .apng

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pj

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

Chapter Summary
 Use the HTML <img> element to define an image
 Use the HTML src attribute to define the URL of the image
 Use the HTML alt attribute to define an alternate text for an image, if it
cannot be displayed
 Use the HTML width and height attributes or the
CSS width and height properties to define the size of the image
 Use the CSS float property to let the image float to the left or to the right
Note: Loading large images takes time, and can slow down your web page. Use
images carefully.

or a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Image Tags

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

HTML Image Maps

❮ PreviousNext ❯

With HTML image maps, you can create clickable areas on an image.

Image Maps
The HTML <map> tag defines an image map. An image map is an image with clickable areas. The
areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below:
Example
Here is the HTML source code for the image map above:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="co
mputer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="pho
ne.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffe
e.htm">
</map>
Try it Yourself »

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on
where in the image you click.

To create an image map you need an image, and some HTML code that describes the clickable areas.

The Image
The image is inserted using the <img> tag. The only difference from other images is that you must
add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image map, and is used to
create a relationship between the image and the image map.

Tip: You can use any image as an image map!

Create Image Map
Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the
required name attribute:

The name attribute must have the same value as the <img>'s usemap attribute .

The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape
You must define the shape of the clickable area, and you can choose one of these values:

 rect - defines a rectangular region

 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image.

Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:

Now we have enough data to create a clickable rectangular area:

Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Try it Yourself »

This is the area that becomes clickable and will send the user to the page "computer.htm":

Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:

337,300

Then specify the radius of the circle:

44 pixels

Now you have enough data to create a clickable circular area:

Example
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Try it Yourself »

This is the area that becomes clickable and will send the user to the page "coffee.htm":
Shape="poly"
The shape="poly" contains several coordinate points, which creates a shape formed with
straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?

We have to find the x and y coordinates for all edges of the croissant:

The coordinates come in pairs, one for the x-axis and one for the y-axis:

Example
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,
140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissan
t.htm">
Try it Yourself »

This is the area that becomes clickable and will send the user to the page "croissant.htm":

Image Map and JavaScript

A clickable area can also trigger a JavaScript function.

Add a click event to the <area> element to execute a JavaScript function:

Example
Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:

Chapter Summary
 Use the HTML <map> element to define an image map
 Use the HTML <area> element to define the clickable areas in the image map
 Use the HTML usemap attribute of the <img> element to point to an image map

HTML Image Tags

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Background Images

❮ PreviousNext ❯

A background image can be specified for almost any HTML element.

Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute
and the CSS background-image property:

Example
Add a background image on a HTML element:

<p style="background-image: url('img_girl.jpg');">

Try it Yourself »

You can also specify the background image in the <style> element, in
the <head> section:

Example
Specify the background image in the <style> element:

Example
Add a background image for the entire page:

Background Repeat
If the background image is smaller than the element, the image will repeat
itself, horizontally and vertically, until it reaches the end of the element:

Example
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Try it Yourself »

To avoid the background image from repeating itself, set the background-
repeat property to no-repeat.

Example
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Try it Yourself »
ADVERTISEMENT

Background Cover
If you want the background image to cover the entire element, you can set
the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-
attachment property to fixed:

This way, the background image will cover the entire element, with no
stretching (the image will keep its original proportions):

Example
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Try it Yourself »

Background Stretch
If you want the background image to stretch to fit the entire element, you can
set the background-size property to 100% 100%:

Try resizing the browser window, and you will see that the image will stretch,
but always cover the entire element.

Example
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Try it Yourself »

Learn More CSS

From the examples above you have learned that background images can be
styled by using the CSS background properties.

To learn more about CSS background properties, study our CSS Background
Tutorial.

HTML <picture> Element

❮ PreviousNext ❯

The HTML <picture> element allows you to display different pictures for different devices
or screen sizes.

The HTML <picture> Element

The HTML <picture> element gives web developers more flexibility in specifying image
resources.

The <picture> element contains one or more <source> elements, each referring to different
images through the srcset attribute. This way the browser can choose the image that best fits the
current view and/or device.
Each <source> element has a media attribute that defines when the image is the most suitable.

Example
Show different images for different screen sizes:

<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Try it Yourself »
Note: Always specify an <img> element as the last child element of the <picture> element.
The <img> element is used by browsers that do not support the <picture> element, or if none of
the <source> tags match.

When to use the Picture Element

There are two main purposes for the <picture> element:

1. Bandwidth
If you have a small screen or device, it is not necessary to load a large image file. The browser will
use the first <source> element with matching attribute values, and ignore any of the following
elements.

2. Format Support
Some browsers or devices may not support all image formats. By using the <picture> element, you
can add images of all formats, and the browser will use the first format it recognizes, and ignore any
of the following elements.

Example
The browser will use the first image format it recognizes:

<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Try it Yourself »
Note: The browser will use the first <source> element with matching attribute values, and ignore
any following <source> elements.

HTML Image Tags

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Tables
❮ PreviousNext ❯

HTML tables allow web developers to arrange data into rows and columns.
Example

Company Contact Co

Alfreds Futterkiste Maria Anders Ge

Centro comercial Moctezuma Francisco Chang Me

Ernst Handel Roland Mendel Aus

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Ca

Magazzini Alimentari Riuniti Giovanni Rovelli Ital

Try it Yourself »

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example
A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Try it Yourself »

Table Cells
Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Try it Yourself »
Note: A table cell can contain all sorts of HTML elements: text, images, lists,
links, other tables, etc.

ADVERTISEMENT
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Try it Yourself »

You can have as many rows as you like in a table; just make sure that the
number of cells are the same in each row.

Note: There are times when a row can have less or more cells than another.
You will learn about that in a later chapter.

Table Headers
Sometimes you want your cells to be table header cells. In those cases use
the <th> tag instead of the <td> tag:

th stands for table header.

Example
Let the first row be table header cells:

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Try it Yourself »

By default, the text in <th> elements are bold and centered, but you can change
that with CSS.

HTML Table Tags

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Table Borders

❮ PreviousNext ❯

HTML tables can have borders of different styles and shapes.

How To Add a Border

To add a border, use the CSS border property on table, th, and td elements:

Example
table, th, td {
border: 1px solid black;
}
Try it Yourself »

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-
collapse property to collapse.

This will make the borders collapse into a single border:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Try it Yourself »

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the
document background), you get the impression of an invisible border:

Example
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Try it Yourself »

Round Table Borders

With the border-radius property, the borders get rounded corners:

Example
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
Try it Yourself »

Skip the border around the table by leaving out table from the css selector:

Example
th, td {
border: 1px solid black;
border-radius: 10px;
}
Try it Yourself »
Dotted Table Borders
With the border-style property, you can set the appearance of the border.

The following values are allowed:

 dotted
 dashed
 solid
 double
 groove
 ridge
 inset

 outset
 none
 hidden

Example
th, td {
border-style: dotted;
}
Try it Yourself »

Border Color
With the border-color property, you can set the color of the border.
Example
th, td {
border-color: #96D4D4;
}
Try it Yourself »

HTML Table Sizes

❮ PreviousNext ❯

HTML tables can have different sizes for each column, row or the entire
table.

Use the style attribute with the width or height properties to specify the
size of a table, row or column.

HTML Table Width

To set the width of a table, add the style attribute to the <table> element:

Example
Set the width of the table to 100%:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »
Note: Using a percentage as the size unit for a width means how wide will this
element be compared to its parent element, which in this case is
the <body> element.

HTML Table Column Width

To set the size of a specific column, add the style attribute on

a <th> or <td> element:

Example
Set the width of the first column to 70%:
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »

HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row
element:

Example
Set the height of the second row to 200 pixels:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Table Headers

❮ PreviousNext ❯

HTML tables can have headers for each column or row, or for many
columns/rows.

EMIL TOBIAS LINUS

8:00
9:00
10:00
11:00
12:00
13:00
MON TUE WED THU FRI
8:00
9:00
10:00
11:00
12:00
DECEMBER
HTML Table Headers
Table headers are defined with th elements. Each th element represents a table
cell.

Example
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as
a <th> element:

Example
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Try it Yourself »

Align Table Headers

By default, table headers are bold and centered:

Firstname Lastname Age

Jill Smith 50
Eve Jackson 94

To left-align the table headers, use the CSS text-align property:

Example
th {
text-align: left;
}
Try it Yourself »

Header for Multiple Columns

You can have a header that spans over two or more columns.

Name Age
Jill Smith 50
Eve Jackson 94
To do this, use the colspan attribute on the <th> element:

Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »
You will learn more about colspan and rowspan in the Table colspan &
rowspan chapter.

Table Caption
You can add a caption that serves as a heading for the entire table.

Monthly savings
Month Savings
January $100
February $50

HTML Table Padding &

Spacing
❮ PreviousNext ❯

HTML tables can adjust the padding inside the cells, and also the space between the cells.

With Padding

hello hello hello

With Spacing
hello hello hello
hello hello hello
hello hello hello
HTML Table - Cell Padding
Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example
th, td {
padding: 15px;
}
Try it Yourself »

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom, padding-left, and padding-
right properties:

Example
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
Try it Yourself »

HTML Table - Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing property on
the table element:
Example
table {
border-spacing: 30px;
}
Try it Yourself »

HTML Table Colspan &

Rowspan
❮ PreviousNext ❯

HTML tables can have cells that span over multiple rows and/or columns.

NAME

APRIL

2022

FIESTA

HTML Table - Colspan

To make a cell span over multiple columns, use the colspan attribute:

Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
Try it Yourself »
Note: The value of the colspan attribute represents the number of columns to
span.

HTML Table - Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

Example
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
Try it Yourself »
Note: The value of the rowspan attribute represents the number of rows to
span.
HTML Table Styling
❮ PreviousNext ❯

Use CSS to make your tables look better.

HTML Table - Zebra Stripes

If you add a background color on every other table row, you will get a nice zebra stripes effect.

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

To style every other table row element, use the :nth-child(even) selector like this:

Example
tr:nth-child(even) {
background-color: #D6EEEE;
}
Try it Yourself »
Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of 2,4,6
etc.

HTML Table - Vertical Zebra Stripes

To make vertical zebra stripes, style every other column, instead of every other row.

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20
Set the :nth-child(even) for table data elements like this:

Example
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}
Try it Yourself »
Note: Put the :nth-child() selector on both th and td elements if you want to have the
styling on both headers and regular table cells.

Combine Vertical and Horizontal Zebra

Stripes
You can combine the styling from the two examples above and you will have stripes on every other
row and every other column.

If you use a transparent color you will get an overlapping effect.

Use an rgba() color to specify the transparency of the color:

Example
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
Try it Yourself »
Horizontal Dividers
First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

If you specify borders only at the bottom of each table row, you will have a table with horizontal
dividers.

Add the border-bottom property to all tr elements to get horizontal dividers:

Example
tr {
border-bottom: 1px solid #ddd;
}
Try it Yourself »

Hoverable Table
Use the :hover selector on tr to highlight table rows on mouse over:
First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Example
tr:hover {background-color: #D6EEEE;}
Try it Yourself »

HTML Table Colgroup

❮ PreviousNext ❯

The <colgroup> element is used to style specific columns of a table.

HTML Table Colgroup

If you want to style the two first columns of a table, use the <colgroup> and <col> elements.

MON TUE WED THU FRI SAT SUN

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

The <colgroup> element should be used as a container for the column specifications.

Each group is specified with a <col> element.

The span attribute specifies how many columns that get the style.

The style attribute specifies the style to give the columns.

Note: There is a very limited selection of legal CSS properties for colgroups.

Example
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »
Note: The <colgroup> tag must be a child of a <table> element and should be placed before any
other table elements, like <thead>, <tr>, <td> etc., but after the <caption> element, if present.

Legal CSS Properties

There is only a very limited selection of CSS properties that are allowed to be used in the colgroup:

width property
visibility property
background properties
border properties

All other CSS properties will have no effect on your tables.

ADVERTISEMENT
Multiple Col Elements
If you want to style more columns with different styles, use more <col> elements inside
the <colgroup>:

Example
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »

Empty Colgroups
If you want to style columns in the middle of a table, insert a "empty" <col> element (with no styles)
for the columns before:

Example
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »
Hide Columns
You can hide columns with the visibility: collapse property:

Example
<table>
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »

HTML Lists
HTML lists allow web developers to group a set of related items in lists.

Example
An unordered HTML list:

 Item
 Item
 Item
 Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

Try it Yourself »
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Try it Yourself »

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:

Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Try it Yourself »

HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Unordered Lists

❮ PreviousNext ❯

The HTML <ul> tag defines an unordered (bulleted) list.

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Try it Yourself »

Unordered HTML List - Choose List

Item Marker
The CSS list-style-type property is used to define the style of the list item marker. It can have
one of the following values:
Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Example - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »

Example - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »

Example - Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Example - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »

Nested HTML Lists

Lists can be nested (list inside list):

Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Try it Yourself »
Note: A list item (<li>) can contain a new list, and other HTML elements, like images and links,
etc.

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>
Try it Yourself »
Tip: You can learn much more about CSS in our CSS Tutorial.
Chapter Summary
 Use the HTML <ul> element to define an unordered list
 Use the CSS list-style-type property to define the list item marker
 Use the HTML <li> element to define a list item
 Lists can be nested
 List items can contain other HTML elements
 Use the CSS property float:left to display a list horizontally

HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Unordered Lists
The HTML <ul> tag defines an unordered (bulleted) list.

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Try it Yourself »

Unordered HTML List - Choose List

Item Marker
The CSS list-style-type property is used to define the style of the list item marker. It can have
one of the following values:

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Example - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »

Example - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »

Example - Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »

Example - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
ADVERTISEMENT

Nested HTML Lists

Lists can be nested (list inside list):

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>
Try it Yourself »
Tip: You can learn much more about CSS in our CSS Tutorial.

Chapter Summary
 Use the HTML <ul> element to define an unordered list
 Use the CSS list-style-type property to define the list item marker
 Use the HTML <li> element to define a list item
 Lists can be nested
 List items can contain other HTML elements
 Use the CSS property float:left to display a list horizontally
HTML List Tags
Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Ordered Lists

❮ PreviousNext ❯

The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

Ordered HTML List - The Type

Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

Uppercase Roman Numbers:

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

Lowercase Roman Numbers:

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified
number, you can use the start attribute:

Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

Nested HTML Lists

Lists can be nested (list inside list):

Example
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Try it Yourself »
Note: A list item (<li>) can contain a new list, and other HTML elements, like images and links,
etc.
Chapter Summary
 Use the HTML <ol> element to define an ordered list
 Use the HTML type attribute to define the numbering type
 Use the HTML <li> element to define a list item
 Lists can be nested
 List items can contain other HTML elements

HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Other Lists
❮ PreviousNext ❯

HTML also supports description lists.

HTML Description Lists

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:

Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Try it Yourself »

Chapter Summary
 Use the HTML <dl> element to define a description list
 Use the HTML <dt> element to define the description term
 Use the HTML <dd> element to describe the term in a description list

 HTML List Tags

Tag Description
<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

 For a complete list of all available HTML tags, visit our HTML Tag Reference.

 HTML Canvas Graphics

 ❮ PreviousNext ❯


 The HTML <canvas> element is used to draw graphics on a web page.

 The graphic to the left is created with <canvas>. It shows four elements: a red
rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.


 What is HTML Canvas?

 The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
 The <canvas> element is only a container for graphics. You must use JavaScript to actually
draw the graphics.
 Canvas has several methods for drawing paths, boxes, circles, text, and adding images.


 Browser Support
 The numbers in the table specify the first browser version that fully supports
the <canvas> element.

Element

<canvas> 4.0 9.0 2.0 3.1

 Canvas Examples
 A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no
content.
 The markup looks like this:
 <canvas id="myCanvas" width="200" height="100"></canvas>
 Note: Always specify an id attribute (to be referred to in a script), and
a width and height attribute to define the size of the canvas. To add a border, use
the style attribute.
 Here is an example of a basic, empty canvas:
 Example
 <canvas id="myCanvas" width="200" height="100" style="border:1px
solid #000000;">
</canvas>
 Try it Yourself »


 ADVERTISEMENT


 Add a JavaScript
 After creating the rectangular canvas area, you must add a JavaScript to do the drawing.
 Here are some examples:
 Draw a Line
 Example
 <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
 Try it Yourself »


 Draw a Circle
 Example
 <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
 Try it Yourself »


 Draw a Text
 Example
 <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
 Try it Yourself »


 Stroke Text
 Example
 <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
 Try it Yourself »


 Draw Linear Gradient

 Example
 <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient

ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
 Try it Yourself »


 Draw Circular Gradient

 Example
 <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient

ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
 Try it Yourself »


 Draw Image
 <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
 Try it Yourself »


 HTML Canvas Tutorial

 To learn more about <canvas>, please read our HTML Canvas Tutorial.


HTML SVG Graphics

❮ PreviousNext ❯

SVG defines vector-based graphics in XML format.

What is SVG?
 SVG stands for Scalable Vector Graphics
 SVG is used to define graphics for the Web
 SVG is a W3C recommendation

The HTML <svg> Element

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Browser Support
The numbers in the table specify the first browser version that fully supports the <svg> element.
Element

<svg> 4.0 9.0 3.0 3.2

SVG Circle
Example
<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">

</body>
</html>
Try it Yourself »

SVG Rectangle

Example
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-
width:10;stroke:rgb(0,0,0)" />
</svg>
Try it Yourself »
SVG Rounded Rectangle
Example
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Try it Yourself »

SVG Star
Example
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-
rule:evenodd;" />
</svg>
Try it Yourself »

SVG Logo
SVG
Example
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-
opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-
opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50"
y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
Try it Yourself »
Differences Between SVG and Canvas
SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available within the SVG DOM. You can
attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed,
the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the
browser. If its position should be changed, the entire scene needs to be redrawn, including any
objects that might have been covered by the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:

Canvas SVG

 Resolution dependent  Resolution independent

 No support for event handlers  Support for event handlers
 Poor text rendering capabilities  Best suited for applications with large rende
 You can save the resulting image as .png or .jpg Maps)
 Well suited for graphic-intensive games  Slow rendering if complex (anything that us
be slow)
 Not suited for game applications

SVG Tutorial
To learn more about SVG, please read our SVG Tutorial.

HTML Multimedia
❮ PreviousNext ❯

Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see, like
images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

Browser Support
The first web browsers had support for text only, limited to a single font in a single color.

Later came browsers with support for colors, fonts, images, and multimedia!

Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.

Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common Video Formats

There are many video formats out there.

The MP4, WebM, and Ogg formats are supported by HTML.

The MP4 format is recommended by YouTube.

Format File Description

MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular video forma
.mpeg supported anymore in HTML.

AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video came
Plays well on Windows computers, but not in web browsers.

WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cam
hardware. Plays well on Windows computers, but not in web browsers.

QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware.
computers, but not in web browsers.

RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with low bandwidths. D
.ram browsers.

Flash .swf Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play i
.flv

Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML.

MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Commonly used in video camer
or MP4 Supported by all browsers and recommended by YouTube.

Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.

Common Audio Formats

MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with
digital music.

If your website is about recorded music, MP3 is the choice.

Format File Description

MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices
.midi PC sound cards. MIDI files do not contain sound, but digital notes that can be played by e
on all computers and music hardware, but not in web browsers.

RealAudio .rm RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. D
.ram browsers.

WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well on Windows compu
browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Pl
computers, but not in web browsers.

WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux
Supported by HTML.

Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.

MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for m
Combines good compression (small files) with high quality. Supported by all browsers.

MP4 .mp4 MP4 is a video format, but can also be used for audio. Supported by all browsers.

Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.

HTML Video
❮ PreviousNext ❯

The HTML <video> element is used to show a video on a web page.

Example
Courtesy of Big Buck Bunny:

Try it Yourself »
The HTML <video> Element
To show a video in HTML, use the <video> element:

Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Try it Yourself »

How it Works
The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the
page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose
from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.

HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:

Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Try it Yourself »
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always
allowed.

Add muted after autoplay to let your video start playing automatically (but muted):

Example
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Try it Yourself »

Browser Support
The numbers in the table specify the first browser version that fully supports the <video> element.

Element

<video> 4.0 9.0 3.5 4.0

HTML Video Formats

There are three supported video formats: MP4, WebM, and Ogg. The browser support for the
different formats is:

Browser MP4 WebM Ogg

Edge YES YES YES

Chrome YES YES YES

Firefox YES YES YES

Safari YES YES NO

Opera YES YES YES

HTML Video - Media Types

File Format Media Type

MP4 video/mp4

WebM video/webm

Ogg video/ogg
HTML Video - Methods, Properties, and
Events
The HTML DOM defines methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example: Using JavaScript

Play/Pause Big Small Normal

Video courtesy of Big Buck Bunny.

Try it Yourself »

For a full DOM reference, go to our HTML Audio/Video DOM Reference.

HTML Video Tags

Tag Description

<video> Defines a video or movie

<source> Defines multiple media resources for media elements, such as <video> and <audio>

<track> Defines text tracks in media players

HTML Audio
❮ PreviousNext ❯

The HTML <audio> element is used to play an audio file on a web page.

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Try it Yourself »

HTML Audio - How It Works

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the browser may choose
from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not
support the <audio> element.

HTML <audio> Autoplay

To start an audio file automatically, use the autoplay attribute:
Example
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Try it Yourself »
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always
allowed.

Add muted after autoplay to let your audio file start playing automatically (but muted):

Example
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Try it Yourself »

Browser Support
The numbers in the table specify the first browser version that fully supports the <audio> element.

Element

<audio> 4.0 9.0 3.5 4.0

HTML Audio Formats

There are three supported audio formats: MP3, WAV, and OGG. The browser support for the
different formats is:
Browser MP3 WAV OGG

Edge/IE YES YES* YES*

Chrome YES YES YES

Firefox YES YES YES

Safari YES YES NO

Opera YES YES YES

*From Edge 79

HTML Audio - Media Types

File Format Media Type

MP3 audio/mpeg

OGG audio/ogg
WAV audio/wav

HTML Audio - Methods, Properties, and

Events
The HTML DOM defines methods, properties, and events for the <audio> element.

This allows you to load, play, and pause audios, as well as set duration and volume.

There are also DOM events that can notify you when an audio begins to play, is paused, etc.

For a full DOM reference, go to our HTML Audio/Video DOM Reference.

HTML Audio Tags

Tag Description

<audio> Defines sound content

<source> Defines multiple media resources for media elements, such as <video> and <audio>

HTML Plug-ins
❮ PreviousNext ❯

Plug-ins are computer programs that extend the standard functionality of the browser.
Plug-ins
Plug-ins were designed to be used for many different purposes:

 To run Java applets

 To run Microsoft ActiveX controls
 To display Flash movies
 To display maps
 To scan for viruses
 To verify a bank id

Warning !

Most browsers no longer support Java Applets and Plug-ins.

ActiveX controls are no longer supported in any browsers.

The support for Shockwave Flash has also been turned off in modern browsers.

The <object> Element

The <object> element is supported by all browsers.

The <object> element defines an embedded object within an HTML document.

It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in web pages,
but can also be used to include HTML in HTML:

Example
<object width="100%" height="500px" data="snippet.html"></object>
Try it Yourself »

Or images if you like:

Example
<object data="audi.jpeg"></object>
Try it Yourself »
ADVERTISEMENT

The <embed> Element

The <embed> element is supported in all major browsers.

The <embed> element also defines an embedded object within an HTML document.

Web browsers have supported the <embed> element for a long time. However, it has not been a part
of the HTML specification before HTML5.

Example
<embed src="audi.jpeg">
Try it Yourself »
Note that the <embed> element does not have a closing tag. It can not contain alternative text.

The <embed> element can also be used to include HTML in HTML:

Example
<embed width="100%" height="500px" src="snippet.html">
Try it Yourself »

HTML YouTube Videos

❮ PreviousNext ❯

The easiest way to play videos in HTML, is to use YouTube.

Struggling with Video Formats?

Converting videos to different formats can be difficult and time-consuming.
An easier solution is to let YouTube play the videos in your web page.

YouTube Video Id
YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video.

You can use this id, and refer to your video in the HTML code.

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

 Upload the video to YouTube

 Take a note of the video id
 Define an <iframe> element in your web page
 Let the src attribute point to the video URL
 Use the width and height attributes to specify the dimension of the player
 Add any other parameters to the URL (see below)

Example
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
Try it Yourself »

YouTube Autoplay + Mute

You can let your video start playing automatically when a user visits the page, by
adding autoplay=1 to the YouTube URL. However, automatically starting a video is annoying
for your visitors!

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always
allowed.

Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).
YouTube - Autoplay + Muted
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
Try it Yourself »

YouTube Playlist
A comma separated list of videos to play (in addition to the original URL).

YouTube Loop
Add loop=1 to let your video loop forever.

Value 0 (default): The video will play only once.

Value 1: The video will loop (forever).

YouTube - Loop
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?
playlist=tgbNymZ7vqY&loop=1">
</iframe>
Try it Yourself »

YouTube Controls
Add controls=0 to not display controls in the video player.

Value 0: Player controls does not display.

Value 1 (default): Player controls display.

YouTube - Controls
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
Try it Yourself »

HTML Geolocation API

❮ PreviousNext ❯

The HTML Geolocation API is used to locate a user's position.

Locate the User's Position

The HTML Geolocation API is used to get the geographical position of a user.

Since this can compromise privacy, the position is not available unless the user approves it.

Try It

Note: Geolocation is most accurate for devices with GPS, like smartphones.

Browser Support
The numbers in the table specify the first browser version that fully supports Geolocation.

API

Geolocation 5.0 - 49.0 (http) 9.0 3.5 5.0

50.0 (https)
Note: As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If
your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will
no longer function.

Using HTML Geolocation

The getCurrentPosition() method is used to return the user's position.

The example below returns the latitude and longitude of the user's position:

Example
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Try it Yourself »

Example explained:

 Check if Geolocation is supported

 If supported, run the getCurrentPosition() method. If not, display a message to the user
 If the getCurrentPosition() method is successful, it returns a coordinates object to the
function specified in the parameter (showPosition)
 The showPosition() function outputs the Latitude and Longitude

The example above is a very basic Geolocation script, with no error handling.

ADVERTISEMENT
Handling Errors and Rejections
The second parameter of the getCurrentPosition() method is used to handle errors. It
specifies a function to run if it fails to get the user's location:

Example
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
Try it Yourself »

Location-specific Information
This page has demonstrated how to show a user's position on a map.

Geolocation is also very useful for location-specific information, like:

 Up-to-date local information

 Showing Points-of-interest near the user
 Turn-by-turn navigation (GPS)
The getCurrentPosition() Method -
Return Data
The getCurrentPosition() method returns an object on success. The latitude, longitude and
accuracy properties are always returned. The other properties are returned if available:

Property Returns

coords.latitude The latitude as a decimal number (always returned)

coords.longitude The longitude as a decimal number (always returned)

coords.accuracy The accuracy of position (always returned)

coords.altitude The altitude in meters above the mean sea level (returned if available)

coords.altitudeAccuracy The altitude accuracy of position (returned if available)

coords.heading The heading as degrees clockwise from North (returned if available)

coords.speed The speed in meters per second (returned if available)

timestamp The date/time of the response (returned if available)

Geolocation Object - Other interesting
Methods
The Geolocation object also has other interesting methods:

 watchPosition() - Returns the current position of the user and continues to return
updated position as the user moves (like the GPS in a car).
 clearWatch() - Stops the watchPosition() method.

The example below shows the watchPosition() method. You need an accurate GPS device to
test this (like smartphone):

Example
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Try it Yourself »

HTML Drag and Drop API

❮ PreviousNext ❯

In HTML, any element can be dragged and dropped.

Example
Drag the W3Schools image into the rectangle.

Drag and Drop

Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different
location.

Browser Support
The numbers in the table specify the first browser version that fully supports Drag and Drop.

API

Drag and Drop 4.0 9.0 3.5 6.0

HTML Drag and Drop Example

The example below is a simple drag and drop example:

Example
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><

/div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="dr

ag(event)" width="336" height="69">

</body>
</html>
Try it Yourself »

It might seem complicated, but lets go through all the different parts of a drag and drop event.

Make an Element Draggable

First of all: To make an element draggable, set the draggable attribute to true:

What to Drag - ondragstart and

setData()
Then, specify what should happen when the element is dragged.

In the example above, the ondragstart attribute calls a function, drag(event), that specifies what
data to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

In this case, the data type is "text" and the value is the id of the draggable element ("drag1").

Where to Drop - ondragover

The ondragover event specifies where the dragged data can be dropped.

By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the
default handling of the element.

This is done by calling the event.preventDefault() method for the ondragover event:

event.preventDefault()

Do the Drop - ondrop

When the dragged data is dropped, a drop event occurs.

In the example above, the ondrop attribute calls a function, drop(event):

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

Code explained:

 Call preventDefault() to prevent the browser default handling of the data (default is open
as link on drop)
 Get the dragged data with the dataTransfer.getData() method. This method will return
any data that was set to the same type in the setData() method
 The dragged data is the id of the dragged element ("drag1")
 Append the dragged element into the drop element
More Examples
Example
How to drag (and drop) an image back and forth between two <div> elements:

Try it Yourself »

6-Month AI Automation Agency Roadmap - By Liam Ottley
No ratings yet
6-Month AI Automation Agency Roadmap - By Liam Ottley
21 pages
HTML Introduction
No ratings yet
HTML Introduction
26 pages
W3school (HTML Notes)
No ratings yet
W3school (HTML Notes)
13 pages
HTML Introduction To Attributes
No ratings yet
HTML Introduction To Attributes
19 pages
Unit 3 HTML - RM - PDF
No ratings yet
Unit 3 HTML - RM - PDF
41 pages
WDP Material One
No ratings yet
WDP Material One
97 pages
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
No ratings yet
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
113 pages
Audio & Video HTML
No ratings yet
Audio & Video HTML
218 pages
03 HTML
No ratings yet
03 HTML
113 pages
HTML Tutorial
No ratings yet
HTML Tutorial
200 pages
HTML Introduction 254
No ratings yet
HTML Introduction 254
81 pages
HTML Is The Standard Markup Language For Creating Web Pages
No ratings yet
HTML Is The Standard Markup Language For Creating Web Pages
12 pages
HTML5 Tutorial
No ratings yet
HTML5 Tutorial
32 pages
HTML Notes
No ratings yet
HTML Notes
179 pages
HTML Notes
No ratings yet
HTML Notes
22 pages
Web development
No ratings yet
Web development
32 pages
Hướng dẫn lập trình web - HTML
No ratings yet
Hướng dẫn lập trình web - HTML
296 pages
HTML
No ratings yet
HTML
47 pages
HTML Tutorial
No ratings yet
HTML Tutorial
363 pages
HTML Materials
No ratings yet
HTML Materials
104 pages
HTML Lesson 1
No ratings yet
HTML Lesson 1
5 pages
HTML Chapter 1
No ratings yet
HTML Chapter 1
27 pages
HTML
No ratings yet
HTML
84 pages
Bcac501 - It - Part-1-Html
No ratings yet
Bcac501 - It - Part-1-Html
117 pages
HTML
No ratings yet
HTML
61 pages
Pascua, Nate Evan Sevdaz Bellus ICT Q1 W1
No ratings yet
Pascua, Nate Evan Sevdaz Bellus ICT Q1 W1
16 pages
_Lecture 02_HTML Basics1
No ratings yet
_Lecture 02_HTML Basics1
74 pages
HTML Basics
No ratings yet
HTML Basics
12 pages
HTML With CSS Programming
No ratings yet
HTML With CSS Programming
177 pages
Coding Bible PDF
No ratings yet
Coding Bible PDF
32 pages
Lecture1 HTML
No ratings yet
Lecture1 HTML
70 pages
HTML
No ratings yet
HTML
74 pages
HTML Tutorial
No ratings yet
HTML Tutorial
160 pages
yahxee 1st class
No ratings yet
yahxee 1st class
27 pages
What Is HTML
No ratings yet
What Is HTML
32 pages
HTML Note
No ratings yet
HTML Note
39 pages
introduction to HTML lanuage
No ratings yet
introduction to HTML lanuage
5 pages
HTML Data
No ratings yet
HTML Data
39 pages
What Is HTML?: Example Result
No ratings yet
What Is HTML?: Example Result
19 pages
HTML
No ratings yet
HTML
22 pages
1 - HTML Notes
No ratings yet
1 - HTML Notes
86 pages
Write HTML Using Notepad or Textedit: Example
No ratings yet
Write HTML Using Notepad or Textedit: Example
23 pages
Learning Material 2 HTML INTRODUCTION
No ratings yet
Learning Material 2 HTML INTRODUCTION
4 pages
Introduction to HTML
No ratings yet
Introduction to HTML
99 pages
CH3 HTML
No ratings yet
CH3 HTML
49 pages
HTML Introduction: Structure and Formatting Tags
100% (1)
HTML Introduction: Structure and Formatting Tags
17 pages
CPC06 Advance Web Development2
No ratings yet
CPC06 Advance Web Development2
36 pages
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
No ratings yet
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
52 pages
HTML
No ratings yet
HTML
14 pages
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
No ratings yet
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
133 pages
Hypertext Markup Langauge
No ratings yet
Hypertext Markup Langauge
9 pages
HTML Css Java Tutorial
0% (1)
HTML Css Java Tutorial
80 pages
Untitled Document
No ratings yet
Untitled Document
175 pages
HTML
No ratings yet
HTML
17 pages
1
No ratings yet
1
5 pages
HTML Tutorial
No ratings yet
HTML Tutorial
39 pages
HTML Introduction
No ratings yet
HTML Introduction
4 pages
PGDM 2010-12 HTML Tutorial
No ratings yet
PGDM 2010-12 HTML Tutorial
43 pages
HTML Notes
No ratings yet
HTML Notes
23 pages
HTML Course
No ratings yet
HTML Course
107 pages
HTML Unleashed: The Complete Guide
From Everand
HTML Unleashed: The Complete Guide
Pen Hur
No ratings yet
Detection of Money Laundering Accounts Using Data Mining Techniques
No ratings yet
Detection of Money Laundering Accounts Using Data Mining Techniques
10 pages
Inbound 8268380325438329573
No ratings yet
Inbound 8268380325438329573
15 pages
Designer Wall - Latest
No ratings yet
Designer Wall - Latest
5 pages
Unit 3 Notes
No ratings yet
Unit 3 Notes
90 pages
Computer Organization and Assembly Language (CS2411 & CSC2201)
No ratings yet
Computer Organization and Assembly Language (CS2411 & CSC2201)
38 pages
Engage Partner Program Brochure 24 CURRENT May20 24
No ratings yet
Engage Partner Program Brochure 24 CURRENT May20 24
13 pages
P4-F 2024-2025 Essential Vocabulary Worksheet 02
No ratings yet
P4-F 2024-2025 Essential Vocabulary Worksheet 02
3 pages
Cloud Computing of E-Commerce: Modern Applied Science January 2019
No ratings yet
Cloud Computing of E-Commerce: Modern Applied Science January 2019
10 pages
STRESS-001 - Vessel Nozzle Load
No ratings yet
STRESS-001 - Vessel Nozzle Load
2 pages
Module 2 - Technologies Behind Iot: 2.1 Challenges and Issues, Security Control Units
No ratings yet
Module 2 - Technologies Behind Iot: 2.1 Challenges and Issues, Security Control Units
21 pages
ch1 Full
No ratings yet
ch1 Full
57 pages
CSV Files: Vedic International School
No ratings yet
CSV Files: Vedic International School
5 pages
Netis P110C
No ratings yet
Netis P110C
2 pages
Chapter 4 AI
No ratings yet
Chapter 4 AI
33 pages
Assignment 3
No ratings yet
Assignment 3
4 pages
CDB405-001
No ratings yet
CDB405-001
4 pages
ICT Worksheet 1
No ratings yet
ICT Worksheet 1
7 pages
Exercises
No ratings yet
Exercises
50 pages
cs8791 Cloud Computing Unit1 Notes
No ratings yet
cs8791 Cloud Computing Unit1 Notes
35 pages
Thesis About Engineering Drawing
100% (3)
Thesis About Engineering Drawing
5 pages
Cloud Computing Notes
No ratings yet
Cloud Computing Notes
20 pages
RedHat Linux
No ratings yet
RedHat Linux
10 pages
Spesifikasi Mobile Operating Table (MEERA CL)
No ratings yet
Spesifikasi Mobile Operating Table (MEERA CL)
2 pages
32877.TOC - CHO 3rd Sem
No ratings yet
32877.TOC - CHO 3rd Sem
9 pages
SQL NoSQL Databases Models Languages Consistency Options Architectures for Big Data Management 1st edition by Andreas Meier, Michael Kaufmann 9783658245498 3658245492 - The full ebook set is available with all chapters for download
100% (5)
SQL NoSQL Databases Models Languages Consistency Options Architectures for Big Data Management 1st edition by Andreas Meier, Michael Kaufmann 9783658245498 3658245492 - The full ebook set is available with all chapters for download
85 pages
Definitive Amazon Method-1
No ratings yet
Definitive Amazon Method-1
3 pages
FSR-216F-POE-QSG
No ratings yet
FSR-216F-POE-QSG
9 pages
ANTON PAAR - DMA 35 Manual
No ratings yet
ANTON PAAR - DMA 35 Manual
149 pages
Autodesk Inventor - Advanced Camera Animation
100% (1)
Autodesk Inventor - Advanced Camera Animation
8 pages