Definition - What does Dynamic HyperText Markup Language

(DHTML) mean?

Dynamic HyerText Markup Language (DHTML) is a combination of Web

development technologies used to create dynamically changing websites.
Web pages may include animation, dynamic menus and text effects. The
technologies used include a combination of HTML, JavaScript or VB Script, 
CSS and the document object model (DOM). 

Designed to enhance a Web user’s experience, DHTML includes the following

features: 

 Dynamic content, which allows the user to dynamically change Web

page content
 Dynamic positioning of Web page elements
 Dynamic style, which allows the user to change the Web page’s color,
font, size or content

Techopedia explains Dynamic HyperText Markup Language

(DHTML)

While DHTML enhances the website user’s experience, the technology may
also be frustrating for users when it is used incorrectly. For example, a
website menu with flashy DHTML animations can easily confuse user
navigation. Another DHTML issue occurs when Web developers attempt to
create cross-browser DHTML, which is very difficult. 

For Web developers, DHTML poses the following problems:

 It can be difficult to develop and debug because of lack of Web browser

and technological support.
  DHTML scripts may not work correctly in various Web browsers.
 The Web page layout may not display correctly when it is developed to
display in different screen size combinations and in different browsers.

As a result of these problems, Web developers must determine whether

DHTML enhances the user experience in any given context. Most Web
developers abandon complex DHTML and use simple cross-browser routines
to improve user experience, as opposed to integrating excessive DHTML
visual effects

What is HTML?
Now, what is HTML? HTML stands for HyperText Markup Language.

It’s a way of displaying information on web pages in your browser.

One thing to remember is that HTML isn’t itself a programming

language. It’s a markup language. Programming languages like PHP
or Java use things like logic and conditions to control the content.

HTML doesn’t do those things, but it’s still extremely important. It

makes up every single website in existence, after all!

Loading an HTML file in your browser

You can actually create an HTML file on your computer, and load it in
your browser. It won’t be on the internet, so only your local computer
can view it.
For real websites that anyone can access on the internet, the HTML
files are stored on computers called servers. But the basic process is
pretty similar.

To create your HTML file:

1. Go to your desktop or wherever you want to put the file.

2. Then right click and select “New” and “Text Document.” Make
sure that the filename reads “index.html” and doesn’t end in
“.txt.”
(If for some reason you can’t see the file extension, click on the
“View” tab and make sure that the “File name extensions”
checkbox is checked.)
3. When you have your file all set, you’ll want to open it in your
browser.
4. If it has a Chrome or other browser icon on the left, that means
you can double click to automatically open it. If it doesn’t, right-
click and then select “Open with” and choose your favorite
browser.
5. In the browser, everything will look blank, which is fine because
the file doesn’t have anything in it yet.

Editing the file

To edit your HTML file you’ll want to open it in a code editor. Right
click the file, and either select “Open with” and the editor, or some
editors will have a quick link from the menu.

I’m using Visual Studio Code, but you can use other programs like:

 Notepad++
 Sublime
 Atom
 Brackets
Now that you have the index file open in both your browser and your
editor, we’ll start writing some code!

HTML Tags
Let’s look at some of the basic features of HTML.

HTML is made up of tags.

Let’s look at some of the basic features of HTML.

HTML is made up of tags.

Tags are special text that you use to mark up, or distinguish,
parts of your web page. Hence the hypertext “markup” language.

These tags tell the browser to display whatever is inside the tag in a
specific way.

Here’s one example of a tag in action:

This is my very first website and I’m <b>extremely excited!!!!!</b>

You can see that the words “extremely excited” are in these <b> tags–
“b” is for bold.

Now let’s save the file, and reload your browser. The text should look
like this:

Anatomy of an HTML tag

Let’s look at the tag again.

The tag before the phrase is called the opening tag — <b>
And the tag after the phrase is the closing tag —  </b>. You can see
that the closing tag has a forward slash before the “b.”

Together, these two tags tell the browser to make whatever text is
between them bold. And that’s exactly what’s happened.

Now maybe this is obvious, but when the browser loads the HTML,
the tags themselves are invisible– they don’t show up on the page.

Basic structure of an HTML document

Now, that line of text that we wrote is working because we saved the
file as an HTML file that your browser can recognize.

But for real HTML on the internet, we need to add some more tags to
the file in order for everything to work properly.

Doctype and HTML tags

The very first tag you need is the doctype tag. It’s not exactly an
HTML tag, but it tells the browser that this is an HTML5 document.

Here’s what it looks like: <!DOCTYPE html>

This tag doesn’t require a closing tag because it’s not surrounding any
text, it’s just declaring that this is HTML.

Other doctypes that were used in the past are HTML 4 or XHTML. But
right now HTML 5 is really the only doctype used.

After the doctype, you have an HTML tag. This one tells the web
browser that everything inside it is HTML:

<!DOCTYPE html>

<html>
</html>

I know, it seems a bit redundant since you already used the HTML
doctype tag. But this tag ensures that everything inside it will inherit
some necessary characteristics of HTML.

Head and Body sections

Inside the main HTML tag, your content will usually be separated into
two sections: the Head and the Body.

Here’s what that will look like in the code:

<!DOCTYPE html>

Here’s what that will look like in the code:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>
 The head tag contains information about the website and it’s also
where you load CSS and JavaScript files. We won’t be covering those
today, but just so you know.

The body tag is the main content in the web page. Everything that
you see on the page will usually be in the body tag. So we need to
move that sentence we made at the beginning into the body.

Here’s what that should look like:

<body>

This is my very first website and I'm <b>extremely excited!!!!!!</b>

</body>

When you reload the page in your browser, everything should look
exactly the same as before.

Now let’s go into some of the basic tags that are commonly used in
the head and in the body.

Part 1
Creating the Web Page
1.
 1
Open a text editor. On a Windows computer, you'll usually use Notepad, or
Notepad++ whereas Mac users will use TextEdit:

o Windows - Open Start 
 

, type in n o t e p a d , orn o t e p a d + + and click Notepad or "Notepad++" at the top of

the window.
o Mac - Click Spotlight 
 

, type in t e x t e d i t , and double-click TextEdit at the top of the results.



2
Set up your document type for HTML. Type in < ! D O C T Y P E h t m l >  and
press ↵ Enter , then type in < h t m l >  and press  ↵ Enter  again. Finally, type
 in < h e a d > and press  ↵ Enter . The top of your document should resemble the
following: [1]
<!DOCTYPE html>
<html>
<head>


3
 Add a tab title for your web page. This is the title which will appear on the
browser tab when you open the page (e.g., "Facebook"). Type in < t i t l e > ,
enter your web page's tab title, and type in < / t i t l e > . You'll then add the
closing "Head" tag, which is< / h e a d > , on its own line. The title section should
look like this:
<title>My Web Page</title>
</head>


4
 Indicate the beginning of your page's body text. Type in < b o d y >  below the
closed "Head" tag. This ensures that the rest of your document's text will be
considered website text until you close the "Body" tag. You should have the
following:
<body>


5
 Create a page heading. Your page heading is the title which will appear at
the top of your website. To create one, type in < h 1 > , add your heading, and
then close the tag with < / h 1 > . For example:
<h1>Welcome to My Page!</h1>


6
Add additional headings as you go. There are six different headings that
you can create by using the < h 1 > < / h 1 >  through < h 6 > < / h 6 >  tags. For example,
 to create three different-sized headings in succession, you might write the
following:
<h1>Welcome to My Page!</h1>
<h2>My name is Bob.</h2>
<h3>I hope you like it here.</h3>


7
 Create a paragraph. Paragraph tags are used to create distinct blocks of text.
To place text in a paragraph, type in < p >  and type in your text, then type
in < / p >  to close the tag:
<p>This is my paragraph.</p>
o You can add multiple paragraph lines in a row in order to create a
series of paragraphs under one heading.


8
 Change text color. You can change the color of any text by framing the text
with the</nowiki> tags, making sure to type your preferred color into the "color"
section (you'll keep the quotes). For example, to turn a paragraph's text blue,
you would write the following: [2]
<p><font color="blue">Whales are majestic
creatures.</font></p>
Note: the
<font>
tag is deprecated. You should use 
<span style="color: (your color)">...</span>
instead.
o You can turn any text (e.g., headers) into a different color with this
set of tags.
o HTML supports a surprisingly large number of colors, so feel free
to experiment with different color names.

9
Format text with bold, italic, or underlining. Bold text, italic text, and
underlined text can be created with the < b > < / b >  tags, the < i > < / i >  tags, and
the < u > < / u > tags respectively. You can also create subscript text (used for
things like numbers before square roots) and superscript text (used for things
like squaring numbers): [3]
<b>Bold text</b>
<i>Italic text</i>
 <u>Underlined text</u>
_{Subscript text}
^{Superscript text}


10
Add a picture to your page. You can use the < i m g s r c = " U R L " > < / i m g > tags

to embed an existing image in your web page. For example, if the image's
URL is "http://www.mypicture.com/lake", you would write the following:
<img src="http://www.mypicture.com/lake"></img>


11
Link to another page. You can add an link to another website by using the < a
h r e f = " l i n k " > l i n k t e x t < / a >  tag set, where link is the URL for the website to
which you want to link and link text is the text that will act as the link. For
example, to link to Facebook, you would type the following: [4]
<a href="https://www.facebook.com">This is the link to
Facebook's website</a>.

 12
Close the web page's tags. As with any tag in HTML, you'll have to close
the< b o d y >  and < h t m l >  tags that are at the top of your document by typing in
the following at the bottom of the document:
</body>
</html>

13
Review your web page. You can add more paragraphs, headings, and text
anywhere on the page in between the < b o d y > < / b o d y >  tags if needed. One
example of a completed web page is as follows:
<!DOCTYPE html>
<html>

<head>
<title>wikiHow Fan Page</title>
 </head>

<body>

<h1>Welcome to My Page!</h1>
<p>This is a fan page for wikiHow. Make yourself at home!
</p>

<h2>Important Dates</h2>
<p><i>January 15, 2019</i> - wikiHow's Birthday</p>

<h2>Links</h2>
<p>Here is a link to wikiHow: <a
href="http://www.wikihow.com">https://www.wikihow.com</a>
</p>

</body>
</html>

 14
Make any last-minute changes. If you see any errors in your code, correct
them before proceeding. Once you're certain that your HTML accurately
reflects your expectations, you can proceed to the next part.

2 Part

Saving and Opening Your Web Page

1.
 1
If you're using a Mac, convert your document to plain text. Click
the Format menu item at the top of the screen, then click Make Plain Text in
the resulting drop-down menu.

This step is neither necessary nor possible on Windows.

2.
 2
Open the "Save" menu. Since you created a new text document in order to
write your web page, you can press  Ctrl + S  (Windows)
or  ⌘ Command + S  (Mac) to do so.

o You can also click File and then click Save As in the resulting

drop-down menu. This works on both Windows and Mac computers.

 3
Enter a name for your HTML document. Type whatever you want to name
your document into the "File name" (Windows) or "Name" (Mac) text box.

 4
Change the document's file type. You'll need to change the document from
a text file to an HTML file:

o Windows - Click the "Save as type" drop-down box, click All Files,

and then type. h t m l  at the end of the file's name.
o Mac - Replace the . t x t  at the end of the file's name
with . h t m l  instead.

 5
Click  Save . It's at the bottom of the window. Doing so will create an HTML file.

o HTML files typically open with your default web browser.


 6
Close your text editor. At this point, you're ready to open your HTML file in
your browser so that you can view your web page.

 7
Open the HTML document with your browser. In most cases, you'll be able
to double-click the HTML document to do this. If double-clicking the document
results in an error, do the following:

o Windows - Right-click the document, select Open with, and click

your preferred browser.
o Mac - Click the document once, click File, select Open With, and
click your preferred browser.


8
Edit the HTML document if needed. You may notice an error in your HTML
page. To change it, you can edit the HTML document's text:
o On Windows, you can right-click the document and click Edit in
the resulting drop-down menu (if you have Notepad++ installed, this will
say Edit with Notepad++instead).
o On Mac, you'll want to click the document to select it, click File,
select Open With, and click TextEdit. You can also drag the document into
TextEdit.
Sample HTML

HTML Cheat Sheet

 Sample Webpage with HTML

Community Q&A
 Question

Can I create a web page using Notepad?

wikiHow Contributor
Community Answer

Yes. Write the code and then press edit-save and then call it what ever you want. After you
called it something, you have to type .html at he end. Save and use as needed.

Not Helpful 92Helpful 311

 Question

How do I upload my webpage and make it public?

wikiHow Contributor
Community Answer
 You can set up your own server, but I recommend buying web hosting from some of the
available hosting companies. There are also free hosts out there, but they would put their ads
on your webpage.

Not Helpful 10Helpful 44

 Question

How exactly do I get the HTML information on a tab?

wikiHow Contributor
Community Answer

After you change the file type to .html and open it, It should automatically turn into a tab.

Not Helpful 88Helpful 218

 Question

Is there an app available to guide me in creating a web page?

wikiHow Contributor
Community Answer

There's the mobile app "Learn HTML," as well as "Learn CSS" and "Learn JavaScript," all from
Sololearn. Combine them all to create a nice HTML webpage. If you aren't looking for mobile
apps but for websites, you can go to codecademy.com, or just search in Google for websites
that will teach you programming languages.

Not Helpful 40Helpful 105

 Question

How do I change font size?

wikiHow Contributor
Community Answer

You need to use CSS, which is used to determine how an HTML document looks. To insert
CSS to an HTML document, type . To change the font size in CSS, type the tag you want to edit
(p, h1, body etc) followed by a {. After the {, type: font-size: ...px; (the semicolon is very
important!) then add a } at the end.

Not Helpful 79Helpful 189

 Question

Can I test the effects of a web page without the internet?

 wikiHow Contributor
Community Answer

Yes, you can edit as well as see your doc on the browser without any network.

Not Helpful 76Helpful 179

 Question

How do I pick an image from my computer instead of online?

wikiHow Contributor
Community Answer

Provide the exact path. For example, if your image is called face.jpg, type "C:\\Users\(your
username)\Desktop\face.jpg."

Not Helpful 68Helpful 158

 Question

How can I save a file on Notepad that will give me a webpage view?

wikiHow Contributor
Community Answer

You can save it by pressing cntrl+s. After you've name the file, save it as .html.

Not Helpful 48Helpful 110

 Question

How do I link one html page with another html page?

wikiHow Contributor
Community Answer

You can create a link from one page to another using "" tag. This tag has an important
parameter "href", which contains the address.

Not Helpful 22Helpful 50

 Question

Can I see the webpage on internet explorer?

wikiHow Contributor
Community Answer

Yes, but internet explorer cannot process some tags.

Not Helpful 54Helpful 101
 Show more answers

Unanswered Questions
 How can I change the font of the web page?

Answer this question Flag as...

 How do I connect a database to my HTML page?

Answer this question Flag as...

 After putting an image to my page, how to create links in specific places on this
image opening other images?

Answer this question Flag as...

 How to create a path in HTML?

Answer this question Flag as...

 How can I use these forms to create illustrations?

Answer this question Flag as...

Show more unanswered questions

Ask a Question

Submit

Tips
 If you want to center an image in your page, you can type <class="center"> after the

image's name in the img tag (for example, <img src="URL" class="center">).

 You can add side-scrolling text to your website using the <marquee></marquee> tag, but

keep in mind that this tag might not be recognized by some browsers.

 Many people use Notepad++ to write and compile their code.

 Tags should always be closed in a mirror image of their open counterparts. For

example,<tag1><tag2> should be closed as </tag2></tag1>.

 Warnings
 It's best to host your own images on Imgur or similar if you plan on uploading images to

your web page. Posting other people's pictures may result in a copyright infringement.

Edit Related wikiHows

How to
Choose a Web Host
How to
Make a Website

How to
Improve the Readability of Your Software Code

How to
Start a Blog
How to
Put a Digg Counter on a Web Page

How to
Delete a Web Page Using Macromedia Dreamweaver
How to
Create a Website Without HTML

How to
Polish the Table for Your Website in HTML
How to
Edit a Webpage Using HTML

How to
Insert Spaces in HTML
How to
Change Text Color in HTML

How to
Set Background Color in HTML
Web designing

Web designing has direct link to visual aspect of a web site.

Effective web design is necessary to communicate ideas effectively.

How to

Set a Background Image in HTML

How to
Insert Images with HTML

Good web design

1. PURPOSE
Good web design always caters to the needs of the user. Are your web visitors
looking for information, entertainment, some type of interaction, or to transact
with your business? Each page of your website needs to have a clear purpose, and
to fulfill a specific need for your website users in the most effective way possible.

2. COMMUNICATION
People on the web tend to want information quickly, so it is important to
communicate clearly, and make your information easy to read and digest. Some
effective tactics to include in your web design include: organising information
using headlines and sub headlines, using bullet points instead of long windy
sentences, and cutting the waffle.
3. TYPEFACES
In general, Sans Serif fonts such as Arial and Verdana are easier to read online
(Sans Serif fonts are contemporary looking fonts without decorative finishes).
The ideal font size for reading easily online is 16px and stick to a maximum of 3
typefaces in a maximum of 3 point sizes to keep your design streamlined.

4. COLOURS
A well thought out colour palette can go a long way to enhance the user
experience. Complementary colours create balance and harmony. Using
contrasting colours for the text and background will make reading easier on the
eye. Vibrant colours create emotion and should be used sparingly (e.g. for buttons
and call to actions). Last but not least, white space/ negative space is very
effective at giving your website a modern and uncluttered look.

5. IMAGES
A picture can speak a thousand words, and choosing the right images for your
website can help with brand positioning and connecting with your target
audience. If you don’t have high quality professional photos on hand, consider
purchasing stock photos to lift the look of your website. Also consider using
infographics, videos and graphics as these can be much more effective at
communicating than even the most well written piece of text.

6. NAVIGATION
Navigation is about how easy it is for people to take action and move around your
website. Some tactics for effective navigation include a logical page hierarchy,
using bread crumbs, designing clickable buttons, and following the ‘three click
rule’ which means users will be able to find the information they are looking for
within three clicks.

7. GRID BASED LAYOUTS

Placing content randomly on your web page can end up with a haphazard
appearance that is messy. Grid based layouts arrange content into sections,
columns and boxes that line up and feel balanced, which leads to a better looking
website design.

8. “F” PATTERN DESIGN

Eye tracking studies have identified that people scan computer screens in an “F”
pattern. Most of what people see is in the top and left of the screen and the right
side of the screen is rarely seen. Rather than trying to force the viewer’s visual
flow, effectively designed websites will work with a reader’s natural behaviour
and display information in order of importance (left to right, and top to bottom).
9. LOAD TIME
Everybody hates a website that takes ages to load.  Tips to make page load times
more effective include optimising image sizes (size and scale), combining code
into a central CSS or JavaScript file (this reduces HTTP requests) and minify
HTML, CSS, JavaScript (compressed to speed up their load time).

10: MOBILE FRIENDLY

It is now commonplace to access websites from multiple devices with multiple
screen sizes, so it is important to consider if your website is mobile friendly. If
your website is not mobile friendly, you can either rebuild it in a responsive
layout (this means your website will adjust to different screen widths) or you can
build a dedicated mobile site (a separate website optimised specifically for mobile
users).

Process of web publishing

Website publishing is the process of uploading content on the internet. It

includes:

 uploading files
 updating web pages
 posting blogs

Website is published by uploading files on the remote server which is provided

by the hosting company.

Prerequisites for Website Publishing

In order to publish your site, you need the following things:
  Web development software
 Internet Connection
 Web Server

Web development software

It is used for building web pages for your web site. Dreamweaver and
WordPress are example of web development softwares.

Internet Connection
Internet connection is required to connect to a remotely located web server.

Web Server
Web server is the actual location where your website resides on. A web
server may host single or multiple sites depending on what hosting service
you have paid for.

Web development
Web development refers to building website and deploying on the web.
Web development requires use of scripting languages both at the server
end as well as at client end.

Before developing a web site once should keep several aspects in mind like:
  What to put on the web site?
 Who will host it?
 How to make it interactive?
 How to code it?
 How to create search engine friendly web site?
 How to secure the source code frequently?
 Will the web site design display well in different browsers?
 Will the navigation menus be easy to use?
 Will the web site loads quickly?
 How easily will the site pages print?
 How easily will visitors find important details specific to the web site?
 How effectively the style sheets be used on your web sites?

Web Development Process

Web development process includes all the steps that are good to take to
build an attractive, effective and responsive website. These steps are shown
in the following diagram:
Web development tools
Web development tools helps the developer to test and debug the web
sites. Now a days the web development tooll come with the web browsers
as add-ons. All web browsers have built in tools for this purpose.

Thsese tools allow the web developer to use HTML, CSS and JavaScript etc..
These are accessed by hovering over an item on a web page and selecting
the “Inspect Element” from the context menu.

Featues
Following are the common featuers that every web development tool
exhibits:

HTML AND THE DOM

HTML and DOM viewer allows you to see the DOM as it was rendered. It
also allows to make changes to HTML and DOM and see the changes
reflected in the page after the change is made.

WEB PAGE ASSESTS, RESOURCES, AND NETWORK INFORMATION

Web development tools also helps to inspect the resources that are loaded
and available on the web page.

PROFIING AND AUDITING

Profiling refers to get information about the performance of a web page or
web application and Auditing provides developers suggestions, after
analyzing a page, for optimizations to decerease page load time and
increase responsiveness.

Skills Required
For being a successful web developer, one should possess the following
skills:

 Understanding of client and server side scripting.

 Creating, editing and modifying templates for a CMS or web development
framework.
 Testing cross browser inconsistencies.
 Conducting observational user testing.
  Testing for compliance to specified standards such as accessibility
standards in the client region.
 Programming interaction with javaScript, PHP, and Jquery etc.

HTML Attributes
❮ PreviousNext ❯

Attributes provide additional information about HTML elements.

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

The href Attribute

HTML links are defined with the <a> tag. The link address is specified in
the href attribute:

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

Try it Yourself »
You will learn more about links and the <a> tag later in this tutorial.

The src Attribute

HTML images are defined with the <img> tag.

The filename of the image source is specified in the src attribute:

Example
<img src="img_girl.jpg">

Try it Yourself »

The width and height Attributes

Images in HTML have a set of size attributes, which specifies the width
and height of the image:

Example
<img src="img_girl.jpg" width="500" height="600">

Try it Yourself »

The image size is specified in pixels: width="500" means 500 pixels wide.

You will learn more about images in our HTML Images chapter.

The alt Attribute

The alt attribute specifies an alternative text to be used, when an image
cannot be displayed.

The value of the attribute can be read by screen readers. This way,
someone "listening" to the webpage, e.g. a vision impaired person, can
"hear" the element.

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

Try it Yourself »

The alt attribute is also useful if the image does not exist:

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 specify the styling of an element, like
color, font, size etc.

Example
<p style="color:red">I am a paragraph</p>

Try it Yourself »
You will learn more about styling later in this tutorial, and in our CSS
Tutorial.

The lang Attribute

The language of the document can be declared in the <html> tag.

The language is declared with the lang attribute.

Declaring a language is important for accessibility applications (screen

readers) and search engines:

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

...

</body>
</html>

The first two letters specify the language (en). If there is a dialect, use
two more letters (US).

The title Attribute

Here, a title attribute is added to the <p> element. The value of the
title attribute will be displayed as a tooltip when you mouse over the
paragraph:
Example
<p title="I'm a tooltip">
This is a paragraph.
</p>

Try it Yourself »

We Suggest: Use Lowercase Attributes

The HTML5 standard does not require lowercase attribute names.

The title attribute can be written with uppercase or lowercase

like title or TITLE.

W3C recommends lowercase in HTML, and demands lowercase for

stricter document types like XHTML.

At W3Schools we always use lowercase attribute names.

We Suggest: Quote Attribute Values

The HTML5 standard does not require quotes around attribute values.

The href attribute, demonstrated above, can be written without quotes:

Bad
<a href=https://www.w3schools.com>

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

Try it Yourself »

W3C recommends quotes in HTML, and demands quotes for stricter

document types like XHTML.

Sometimes it is necessary 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 »

Using quotes are the most common. Omitting quotes can produce errors. 
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 title attribute provides additional "tool-tip" information
 The href attribute provides address information for links
 The width and height attributes provide size information for
images
 The alt attribute provides text for screen readers
 At W3Schools we always use lowercase attribute names
 At W3Schools we always quote attribute values with double quotes

Test Yourself with Exercises!

Exercise 1 »Exercise 2 »Exercise 3 »Exercise 4 »Exercise 5 »

HTML Attributes
Below is an alphabetical list of some attributes often used in HTML, which
you will learn more about in this tutorial:

Attribute Description

alt Specifies an alternative text for an image, when the image cannot
 disabled Specifies that an input element should be disabled

href Specifies the URL (web address) for a link

id Specifies a unique id for an element

src Specifies the URL (web address) for an image

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a tool t

A complete list of all attributes for each HTML element, is listed in

our: HTML Attribute Reference.

HTML Links
❮ PreviousNext ❯

Links are found in nearly all web pages. Links allow users to click
their way from page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a
little hand.

Note: A link does not have to be text. It can be an image or any other
HTML element.

HTML Links - Syntax

In HTML, links are defined with the <a> tag:

<a href="url">link text</a>

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

Try it Yourself »

The href attribute specifies the destination address

(https://www.w3schools.com/html/) of the link.

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text will send you to the specified address.
Note: Without a forward slash at the end of subfolder addresses, you
might generate two requests to the server. Many servers will
automatically add a forward slash to the end of the address, and then
create a new request.

Local Links
The example above used an absolute URL (a full web address).

A local link (link to the same web site) is specified with a relative URL
(without https://www....).

Example
<a href="html_images.asp">HTML Images</a>

Try it Yourself »

HTML Link Colors

By default, a link will appear like this (in all browsers):

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

You can change the default colors, by using CSS:

Example
<style>
a:link {
  color: green; 
  background-color: transparent; 
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

Try it Yourself »

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:

 _blank - Opens the linked document in a new window or tab

 _self - Opens the linked document in the same window/tab as it
was clicked (this is default)
 _parent - Opens the linked document in the parent frame
 _top - Opens the linked document in the full body of the window
 framename - Opens the linked document in a named frame

This example will open the linked document in a new browser

window/tab:

Example
<a href="https://www.w3schools.com/" target="_blank">Visit
W3Schools!</a>

Try it Yourself »

Tip: If your webpage is locked in a frame, you can

use target="_top" to break out of the frame:

Example
<a href="https://www.w3schools.com/html/" target="_top">HTML5
tutorial!</a>

Try it Yourself »

HTML Links - Image as Link

It is common to use images as links:
Example
<a href="default.asp">
  <img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;">
</a>

Try it Yourself »

Note: border:0; is added to prevent IE9 (and earlier) from displaying a

border around the image (when the image is a link).

Link Titles
The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves
over the element.

Example
<a href="https://www.w3schools.com/html/" title="Go to
W3Schools HTML section">Visit our HTML Tutorial</a>

Try it Yourself »

HTML Links - Create a Bookmark

HTML bookmarks are used to allow readers to jump to specific parts of a
Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add
a link to it.

When the link is clicked, the page will scroll to the location with the
bookmark.

Example
First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the
same page:

<a href="#C4">Jump to Chapter 4</a>

Or, add a link to the bookmark ("Jump to Chapter 4"), from another
page:

Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>

Try it Yourself »

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

This example uses a full URL to link to a web page:

Example
<a href="https://www.w3schools.com/html/default.asp">HTML
tutorial</a>

Try it Yourself »

This example links to a page located in the html folder on the current web
site:

Example
<a href="/html/default.asp">HTML tutorial</a>

Try it Yourself »

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

Example
<a href="default.asp">HTML tutorial</a>

Try it Yourself »

You can read more about file paths in the chapter HTML File Paths.

Chapter Summary
 Use the <a> element to define a link
 Use the href attribute to define the link address
 Use the target attribute to define where to open the linked
document
 Use the <img> element (inside <a>) to use an image as a link
 Use the id attribute (id="value") to define bookmarks in a page
  Use the href attribute (href="#value") to link to the bookmark

Test Yourself with Exercises!

Exercise 1 »Exercise 2 »Exercise 3 »Exercise 4 »Exercise 5 »

HTML Link Tags

Tag Description

<a> Defines a hyperlink

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

HTML Tables
❮ PreviousNext ❯

HTML Table Example

Company Contact

Alfreds Futterkiste Maria Anders

Centro comercial Moctezuma Francisco Chang

 Ernst Handel Roland Mendel

Island Trading Helen Bennett

Laughing Bacchus Winecellars Yoshi Tannamuri

Magazzini Alimentari Riuniti Giovanni Rovelli

Try it Yourself »

Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined

with the <th> tag. By default, table headings are bold and centered. A
table data/cell is defined with the <td> tag.

Example
<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: The <td> elements are the data containers of the table.

They can contain all sorts of HTML elements; text, images, lists, other
tables, etc.

HTML Table - Adding a Border

If you do not specify a border for the table, it will be displayed without
borders.

A border is set using the CSS border property:

Example
table, th, td {
  border: 1px solid black;
}

Try it Yourself »

Remember to define borders for both the table and the table cells.
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the
CSS border-collapse property:

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

Try it Yourself »

HTML Table - Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without
padding.

To set the padding, use the CSS padding property:

Example
th, td {
  padding: 15px;
}

Try it Yourself »
HTML Table - Left-align Headings
By default, table headings are bold and centered.

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

Example
th {
  text-align: left;
}

Try it Yourself »

HTML Table - Adding Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-

spacing property:

Example
table {
  border-spacing: 5px;
}

Try it Yourself »

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cells that Span Many
Columns
To make a cell span more than one column, use the colspan attribute:

Example
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Try it Yourself »

HTML Table - Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Try it Yourself »

HTML Table - Adding a Caption

To add a caption to a table, use the <caption> tag:

Example
<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Try it Yourself »
Note: The <caption> tag must be inserted immediately after
the <table> tag.

A Special Style for One Table

To define a special style for a special table, add an id attribute to the
table:

Example
<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

table#t01 {
  width: 100%; 
  background-color: #f1f1c1;
}

Try it Yourself »
And add more styles:
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}

Try it Yourself »

Chapter Summary
 Use the HTML <table> element to define a table
 Use the HTML <tr> element to define a table row
 Use the HTML <td> element to define a table data
 Use the HTML <th> element to define a table heading
 Use the HTML <caption> element to define a table caption
 Use the CSS border property to define a border
 Use the CSS border-collapse property to collapse cell borders
 Use the CSS padding property to add padding to cells
 Use the CSS text-align property to align cell text
 Use the CSS border-spacing property to set the spacing between
cells
 Use the colspan attribute to make a cell span many columns
 Use the rowspan attribute to make a cell span many rows
 Use the id attribute to uniquely define one table
Test Yourself with Exercises!
Exercise 1 »Exercise 2 »Exercise 3 »Exercise 4 »Exercise 5 »Exercise 6 »

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.

❮ PreviousNext ❯

HTML Form Elements
❮ PreviousNext ❯

This chapter describes all HTML form elements.

The <input> Element

The most important form element is the <input> element.

The <input> element can be displayed in several ways, depending on

the type attribute.
Example
<input name="firstname" type="text">

Try it Yourself »

If the type attribute is omitted, the input field gets the default type:

"text".

All the different input types are covered in the next chapter.

The <select> Element

The <select> element defines a drop-down list:

Example
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Try it Yourself »

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the

option:
Example
<option value="fiat" selected>Fiat</option>

Try it Yourself »

Visible Values:
Use the size attribute to specify the number of visible values:

Example
<select name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Try it Yourself »

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one
value:

Example
<select name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Try it Yourself »
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):

Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Try it Yourself »

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

This is how the HTML code above will be displayed in a browser:

You can also define the size of the text area by using CSS:

Example
<textarea name="message" style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>

Try it Yourself »
The <button> Element
The <button> element defines a clickable button:

Example
<button type="button" onclick="alert('Hello World!')">Click Me!
</button>

Try it Yourself »

This is how the HTML code above will be displayed in a browser:

Click Me! 

Note: Always specify the type attribute for the button element. Different

browsers may use different default types for the button element.

HTML5 Form Elements

HTML5 added the following form elements:

 <datalist>
 <output>

Note: Browsers do not display unknown elements. New elements that are

not supported in older browsers will not "destroy" your web page.
HTML5 <datalist> Element
The <datalist> element specifies a list of pre-defined options for
an <input> element.

Users will see a drop-down list of the pre-defined options as they input
data.

The list attribute of the <input> element, must refer to

the id attribute of the <datalist> element.

Example
<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist> 
</form>

Try it Yourself »

HTML5 <output> Element

The <output> element represents the result of a calculation (like one
performed by a script).
Example
Perform a calculation and show the result in an <output> element:

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

Try it Yourself »

Test Yourself with Exercises!

Exercise 1 »Exercise 2 »Exercise 3 »

HTML Form Elements

= new in HTML5.

Tag Description
<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

 <datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

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

HTML Forms
❮ PreviousNext ❯

HTML Form Example

First name:
Mickey

Last name:
Mouse
 

Submit

Try it Yourself »
The <form> Element
The HTML <form> element defines a form that is used to collect user
input:

<form>
.
form elements
.
</form>

An HTML form contains form elements.

Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.

The <input> Element

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on

the type attribute.

Here are some examples:

Type Description

<input type="text"> Defines a one-line text input field

 <input type="radio"> Defines a radio button (for selecting one of man

<input type="submit"> Defines a submit button (for submitting the form

You will learn a lot more about input types later in this tutorial.

Text Input
<input type="text"> defines a one-line input field for text input:

Example
<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

Try it Yourself »

This is how it will look like in a browser:

First name:

Last name:
Note: The form itself is not visible. Also note that the default width of a
text field is 20 characters.

Radio Button Input

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

Example
<form>
  <input type="radio" name="gender" value="male" checked> Male
<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

Try it Yourself »

This is how the HTML code above will be displayed in a browser:

 Male
 Female
 Other

The Submit Button

<input type="submit"> defines a button for submitting the form data
to a form-handler.
The form-handler is typically a server page with a script for processing
input data.

The form-handler is specified in the form's action attribute:

Example
<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Try it Yourself »

This is how the HTML code above will be displayed in a browser:

First name:
Mickey
 
Last name:
Mouse
 

Submit

The Action Attribute

The action attribute defines the action to be performed when the form is
submitted.

Normally, the form data is sent to a web page on the server when the
user clicks on the submit button.
In the example above, the form data is sent to a page on the server
called "/action_page.php". This page contains a server-side script that
handles the form data:

<form action="/action_page.php">

If the action attribute is omitted, the action is set to the current page.

The Target Attribute

The target attribute specifies if the submitted result will open in a new
browser tab, a frame, or in the current window.

The default value is "_self" which means the form will be submitted in
the current window.

To make the form result open in a new browser tab, use the value
"_blank":

Example
<form action="/action_page.php" target="_blank">

Try it Yourself »

Other legal values are "_parent", "_top", or a name representing the

name of an iframe.

The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be
used when submitting the form data:
Example
<form action="/action_page.php" method="get">

Try it Yourself »

or:

Example
<form action="/action_page.php" method="post">

Try it Yourself »

When to Use GET?

The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be visible in
the page address field:

/action_page.php?firstname=Mickey&lastname=Mouse

Notes on GET:

 Appends form-data into the URL in name/value pairs

 The length of a URL is limited (about 3000 characters)
 Never use GET to send sensitive data! (will be visible in the URL)
 Useful for form submissions where a user wants to bookmark the
result
 GET is better for non-secure data, like query strings in Google
When to Use POST?
Always use POST if the form data contains sensitive or personal
information. The POST method does not display the submitted form data
in the page address field.

Notes on POST:

 POST has no size limitations, and can be used to send large

amounts of data.
 Form submissions with POST cannot be bookmarked

The Name Attribute

Each input field must have a name attribute to be submitted.

If the name attribute is omitted, the data of that input field will not be

sent at all.

This example will only submit the "Last name" input field:

Example
<form action="/action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Try it Yourself »
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example
<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Try it Yourself »

This is how the HTML code above will be displayed in a browser:

Personal information:First name:

Mickey
 
Last name:
Mouse
 

Submit

Test Yourself with Exercises!

Exercise 1 »Exercise 2 »Exercise 3 »Exercise 4 »
Here is the list of all <form> attributes:

Attribute Description

accept-charset Specifies the charset used in the submitted form (default: the pa

action Specifies an address (url) where to submit the form (default: the

autocomplete Specifies if the browser should autocomplete the form (default:

enctype Specifies the encoding of the submitted data (default: is url-enco

method Specifies the HTTP method used when submitting the form (defa

name Specifies a name used to identify the form (for DOM usage: docu

novalidate Specifies that the browser should not validate the form.

target Specifies the target of the address in the action attribute (defaul
Relative File Paths
A relative file path points to a file relative to the current page.

In this example, the file path points to a file in the images folder located
at the root of the current web:

Example
<img src="/images/picture.jpg" alt="Mountain">

Try it Yourself »

In this example, the file path points to a file in the images folder located
in the current folder:

Example
<img src="images/picture.jpg" alt="Mountain">

Try it Yourself »

In this example, the file path points to a file in the images folder located
in the folder one level above the current folder:

Example
<img src="../images/picture.jpg" alt="Mountain">

Try it Yourself »
Best Practice
It is best practice to use relative file paths (if possible).

When using relative file paths, your web pages will not be bound to your
current base URL. All links will work on your own computer (localhost) as
well as on your current public domain and your future public domains. 

Definition - What does Anchor mean?

An anchor is an HTML tag that identifies a link to text or an image on the
same page or to another specific location. An anchor can be used in two
ways:

 By using the “href” attribute to create a link to another page

 By using the "name" attribute to create a bookmark within a page

The hyperlink text on which the user clicks is known as the anchor text.
Anchor text is also known as link text or a link label.

Techopedia explains Anchor

An anchor tag is usually seen in a Web page’s HTML. On a website, it

appears as a hyperlink to another page or another location on the same page.
The “href” attribute is the most important attribute of the element and points to
the link’s destination.
Share this:
HTML Images
❮ PreviousNext ❯

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

In HTML, images are defined with the <img> tag.

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

closing tag.
The src attribute specifies the URL (web address) of the image:

<img src="url">

The alt Attribute

The 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 »

Note: The alt attribute is required. A web page will not validate

correctly without it.
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 defines 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 page might flicker while the image loads.

Width and Height, or Style?

The width, height, and style attributes are valid in HTML5.

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 not specified, the browser expects to find the image in the same folder
as the web page.

However, it is common to store images in a sub-folder. You must then

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

Some web sites store their images on image servers.

Actually, you can access images from any web address in the world:

Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" 
alt="W3Schools.com">

Try it Yourself »

You can read more about file paths in the chapter HTML File Paths.

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;border:0;">
</a>

Try it Yourself »

Note: border:0; is added to prevent IE9 (and earlier) from displaying a

border around the image (when the image is a link).

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.

Image Maps
The <map> tag defines an image-map. An image-map is an image with
clickable areas.

In the image below, click on the computer, the phone, or the cup of
coffee:

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

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" hre
f="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href
="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="
coffee.htm">
</map>

Try it Yourself »

The name attribute of the <map> tag is associated with the <img>'s

usemap attribute and creates a relationship between the image and the
map.

The <map> element contains a number of <area> tags, that define the

clickable areas in the image-map.

Background Image
To add a background image on an HTML element, use the CSS
property background-image:

Example
To add a background image on a web page, specify the background-
image property on the BODY element:

<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>

</body>

Try it Yourself »
Example
To add a background image on a paragraph, specify the background-
image property on the P element:

<body>

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

</body>

Try it Yourself »

To learn more about background images, study our CSS Background

Tutorial.

The <picture> Element

HTML5 introduced the <picture> element to add more flexibility when
specifying image resources.

The <picture> element contains a number of <source> elements, each

referring to different image sources. This way the browser can choose the
image that best fits the current view and/or device.

Each <source> element have attributes describing when their image is

the most suitable.

The browser will use the first <source> element with matching attribute

values, and ignore any following <source>elements.
Example
Show one picture if the browser window (viewport) is a minimum of 650
pixels, and another image if not, but larger than 465 pixels.

<picture>
  <source media="(min-width:
650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:
465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width
:auto;">
</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
matched.

HTML Screen Readers

A screen reader is a software program that reads the HTML code,
converts the text, and allows the user to "listen" to the content. Screen
readers are useful for people who are visually impaired or learning
disabled.

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 to define the size of the
image
 Use the CSS width and height properties to define the size of the
image (alternatively)
 Use the CSS float property to let the image float
 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 <img>'s element usemap attribute to point to an
image-map
 Use the HTML <picture> element to show different images for
different devices

Note: Loading images takes time. Large images can slow down your
page. Use images carefully.

Test Yourself with Exercises!

Exercise 1 »Exercise 2 »Exercise 3 »Exercise 4 »Exercise 5 »Exercise 6 »

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

Hypertext can be defined as a text shown on your PC screen which holds the

hyperlink data (here data means from which document to which document, it will
move) and hence take the readers to different web pages by clicking it. In this
chapter, you will be learning about how to create your very own hyperlink and use
them in creating your website and web pages.

What is Anchor Tag?

The Anchor tag in HTML can be defined as a means to create a hyperlink which can
link your current page on which the text is being converted to hypertext via <a>
(anchor tag) to another page. This anchoring from one page to another is made
possible by the attribute "href", which can be abbreviated as (hypertext reference).

HREF attribute
The attribute 'HREF' of the Anchor tag is implemented for defining the address or
path to which this hypertext will get linked. In other words, it can be said that it
directs you out of your page to that destination page, whose link you have
mentioned within the double quotes of href attribute as value.
 The syntax for an anchor tag with href attribute looks something like this:

<a href = "URL">Text Here</a>

Appearance of HTML <a> tag

Since Anchor tags are used for giving hyperlinks, you might have noticed that they
change color based on certain situations, such as unvisited, clicked, visited, etc.
Let's see their color code with respect to their activity:

 A link which is unvisited gets displayed with properties like underlined and
color is blue

 A link which is visited gets displayed as underlined with color as purple

 A link which is active link gets displayed as underlined with red color

Still, there are many web developers who will deposit their own link-colors in their
web pages to match the color scheme of their site. Here's the format:

<body bgcolor="red" text="yellow" link="blue" alink = "#FFFF00" vlink ="#FF00FF">

You can also provide hex code for colors as well (as you can see from the above
example) or else you can use specific words for each color which is acceptable by
the browser.

Program for Anchor Tag

<html>

<body>

<a href="https://www.w3schools.in/" >Welcome to w3schools</a>

</body>

</html> Run

Anchor in Images
Anchor tags can also be used to create hyperlink through images also. Here's a
code snippet to show how to perform that.

<html>

<body>

<a href="https://www.example.com/"><img src ="logo.jpg"></a>

</body>

</html>

Image as buttons
<!DOCTYPE html>

<html>

<body>
<form action="/action_page.php">

First name: <input type="text" name="fname"><br>

<input type="image" src="submit.gif" alt="Submit" width="48" height="48">

</form>

<p>Click on the image, and the input will be sent to a page on the server called "/action_page.php".</p>

<p><b>Note:</b> The image input type sends the X and Y coordinates of the click that activated the
image button as default.</p>

</body>

</html>

First name: 

Click on the image, and the input will be sent to a page on the server called
"/action_page.php".

Note: The image input type sends the X and Y coordinates of the click that activated
the image button as default.

Image buttons have the same effect as submit buttons. When a visitor
clicks an image button the form is sent to the address specified in
the action setting of the<form> tag.

Since visitors aren't always perfectionists you might consider adding

a javascript validation of the content before it is actually sent.
SETTINGS:
Below is a listing of valid settings for image buttons:

HTML EXPLANATION EXAMPLE

image
Submit button
  name= Name of the image.
  src= Url of the image.
  align= Alignment of the image.
  border= Border width around the image.
  width= Width of the image.
  height= Height of the image.
  vspace= Spacing over and under image.
  hspace= Spacing left and right of image.
  tabindex=
Tab order of the image.

The name setting adds an internal name to the image button so the

program that handles the form doesn't confuse it with the other fields.

The src setting defines the URL of the image.

The align setting defines how the image is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP,
BASELINE, ABSMIDDLE, ABSBOTTOM. 
The alignments are explained in the image section. 
You can learn about the different alignments here.

The border setting defines the width (in pixels) of the border around the
image.

The width setting defines the width of the image.

The height setting defines the height of the image.
The vspace setting defines the spacing over and under the image (in
pixels).

The hspace setting defines the spacing to the left and right of the image (in
 pixels).

The tabindex setting defines in which order the different fields should be

activated when the visitor clicks the tab key.

AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="image" src="rainbow.gif" name="image" width="60" height="60"><br>
</div>
</form>
</body>
</html>

And the resulting output from it:

Enter your name here!

 << PREVIOUS

What is Semantic Markup?

According to Dictionary.com, semantics refers to the correct
interpretation of the meaning of a word or sentence. To use a word
semantically is to use it in a way that is properly aligned with the
meaning of the word. When we misuse a word we are not using it
semantically. Many HTML tags have semantic meaning. That is, the
element itself conveys some information about the type of content
contained between the opening and closing tags. For example, when a
browser encounters an h1 heading it interprets that tag to mean that the
contents of the h1 element constitute the most important heading of the
section that contains the element. The semantic meaning of an h1 tag is
that it is used to identify the most important header of a specific web
page or section.

Two Practices that Enable Semantic Markup

There are two different practices that must be put into place if we are
going to write semantic markup.

1. Semantic markup requires that HTML elements be used according

to their intended purpose.
2. Semantic markup requires the separation of content and
presentation.

Using HTML Elements Correctly

When writing semantic markup, we use HTML tags to tell browsers

something about the contents of the element. In semantic markup, tags
are no longer just a way to get content to show up on a web page in a
human-readable format. The tags themselves become a way to tell a
machine (whether a browser, a computer, a smartphone, or another
smart device) something about the meaning of the content. To write
semantic markup, we must use HTML tags correctly so that our markup
is both human-readable and machine-readable.

Seperating Content and Presentation

In the past, it was common to use markup to define styles and to control
web page layout. Heading levels were selected not based on hierarchy
but based on the styles applied by the web browser, tables were used
for web page layout rather than to organize tabular data, some HTML
tags (such asframeset) were created for the express purpose of
defining web page layout, and so forth. When we write semantic markup
we can no longer select HTML elements based on visual presentation.
Instead, we select HTML elements based on their semantic meaning,
and then use CSS to define the visual presentation of our content. When
writing semantic markup, the presentation of web page elements is kept
completely separate and distinct from the markup of the content itself.

Defining Semantic Markup

With those two practices in mind, we can define semantic markup in this
way: Semantic markup is the use of a markup language such as HTML
to convey information about the meaning of each element in a document
through proper selection of markup elements, and to maintain complete
separation between the markup and the visual presentation of the
elements contained in the document.

Why is Semantic Markup Important?

Good CSS can make bad markup invisible to the average website
visitor. However, no amount of styling will make bad markup more
meaningful to a computerized visitor such as a search engine web
crawler, browser translation tools, or assistive technologies such as
screen readers. According to Bruce Lawson, the semantic use of HTML
elements “enhances accessibility, searchability, internationalization, and
interoperability.” In other words, writing semantic markup is mandatory if
you want your website to be accessible to all visitors, to achieve a high
search engine ranking, to be available to visitors from around the world,
and to interface effectively with other web services. Writing semantic
markup is about creating web content that is both human and computer
readable. When the web can be read equally well by both humans and
computers, it becomes more accessible since computers are better able
to analyze its contents, index it, deliver it, and developers are better able
to tie different sources of information together into new web services.

How Do We Write Semantic Markup?

We write semantic markup by selecting and using HTML tags properly,
and by selecting tags that convey something about the information
marked by the tags. There are elements in HTML that are semantic and
elements that are non-semantic. Examples of non-semantic elements
are div andspan. These tags don't tell the computer anything about the
meaning of the contents of the element. While useful, and fine to use in
some cases, if a semantic tag is available and appropriate for a specific
use, use it before resorting to a non-semantic tag. Many semantic tags
come from the analysis of web page markup completed by companies
like Google and Opera. What these companies have found is that many
websites use id and class attributes to hint at the meaning of the
contents of non-semantic elements. For example, they found lots of divs
that looked like this: <div id="nav">,<div id="header">,
and <div id="footer">. Findings like these helped the W3C identify
and target new semantic tags to include in HTML5 such
as: nav, header, footer, article, and aside. We can group the
most common and important semantic elements into four categories:

 Document structure tags

 Textual meaning tags
 Media type tags
 Correlation tags
The semantic web recently was created as an initiative to bring machine congestible

structure to the bulk of Web information, which had been designed only for human

reception. A vision was presented of robots and crawlers digesting online material on a

level sufficient to be positioned as ‘new’ interfaces acting between content and human,

providing superior navigational knowledge.

Navigational intelligence, in contrast, has been a subject of lengthy investigations in the

community of open hypermedia systems, adjusting the focus on options and requirements

of applications. The field of hypermedia has been freshly inspired by manifold open and

distance learning activities and meta description standards, as well.Bringing those fields together a view
opens up on human susceptible applications

grounded on high-level intelligence generated by a machine processable semantic

information layer. Applications may be around, which exceed the claim of a search

machine and might give rise to a richer vision of a semantically grounded human-machine
interaction. Of particular interest appear all aspects of navigational intelligence, as they

form the core of interactivity in any hypermedia application context.

This paper discusses semantic approaches to interactivity in an open hypermedia system

context. The application examples originate in experiences of educational content

management. Our approach starts from the primary, most often violated principle of

educational content applications, the strict separation of structure, logic, content and

design, as it can be achieved by applying XML-technologies in a rigorous fashion. Here it

should be noted that hyperlinks, from our view, belong to structural information and

therefore must not be stored within content. We will discuss a semantic representation of

hyperlinks and a prototypic model for a semantic link processing along the line of this

article.

This paper is organised as follows. In section 2 we introduce a translational scheme of

metadata decorated content into semantic statements, including a representation of

hyperlinks. Section 3 presents the concept of defining and processing linking schemes

from contextual information of hyperlinks. Section 4 is dedicated to a brief introduction of

the MIRaCLE, an implementation of our approach in hyper referential interactivity.

Finally, section 5 gives a conclusion and an outlook on the ongoing work.

2 Metadata, Semantic and Hyper-Relations

2.1 Identifying the Semantic of Hyperlinks

The common approach of the semantic web lies in provisioning of resource descriptions

and ontologies to robots such as search machines [BHL01]. Consequently, facing the

current status of information in the web, a major effort concentrates on the acquisition of

semantic statements describing resources and on building up ontological databases. Prior

and in parallel to these recent activities the hypermedia research community has

completed 30 to 50 years of research concerning the organisation and interrelation of

content [OHR02], the major focus circling around the (networked) hyperlink.

An increasing number of application specific communities concerns about metadata

descriptions of their information bases, acting in parallel to the semantic web initiative.

Their motivations do not only derive from subject specific categorisation and retrieval, but

also stem from tasks of automated content processing and context-oriented presentation.

For a vital field we concentrate in the examples given below on educational content

management and related meta-data descriptors. A rich standard for the annotation of

educational material has been released, the Learning Object Metadata (LOM) [LOM02].LOM not only
provides dedicated semantic descriptors of the annotated learning objects,

but also includes the option of defining inter-object relations. The LOM encoding

explicitly addresses issues of adaptive content processing within educational applications.

RDF Representation

XML Representation

Classification

Annotation

Relation

Rights

Educational

Meta-Metadata

Life Cycle

General

Title: Hamster diseases

Description: About hamster diseases

Keywords: animal health, hamster

LOB

<paragraph>
[...]

Hamsters having

hay fever

are often

[...]

</paragraph>

/hamster

/hamster#meta-inf /hamster-text

/hamster#general

/hamster#keywords

About hamster diseases rdf:Bag

Hamster diseases

Anima l hea lth Hamster

lom:meta-inf mir:content

lom:general

lom:title

lom:description

lom:keyword

rdf:type

rdf:_1 rdf:_2

<?xml version="1.0"?>

<mir:lob xmlns:mir="http://www.rz.fhtw-berlin.de/MIR"

xmlns:lom="http://www.imsproject.org/xsd/imsmod_rootv1p2p1">

<lom:lom>

<lom:general>
 <lom:identifier>/hamster</lom:identifier>

<lom:title>

<lom:langstring xml:lang="en">Hamster diseases</lom:langstring>

<lom:title>

<lom:description>

<lom:langstring xml:lang="en">About hamster diseases</lom:langstring>

</lom:description>

<lom:keyword>

<lom:langstring xml:lang="en">animal health</lom:langstring>

</lom:keyword>

<lom:keyword>

<lom:langstring xml:lang="en">hamster</lom:langstring>

</lom:keyword>

</lom:general>

</lom:lom>

<paragraph>

[...]

Hamsters having hay fever are often

[...]

</paragrap>

</mir:lob>

Meta-Inf

Content
Figure 1: Representation of Metadata in XML and RDF Statements

Assuming those metadata in presence of content items a canonical semantic description is

easily derived: Using RDF [LS99] representation the content object attains the role of the

subject, the name of the meta descriptor forms the predicate and the value of it denotes the

object. Figure 1 illustrates the different representations of the statement “this learning

object is a description about hamster diseases” as in the LOM/XML schema and in RDF.

To approach a semantic analysis of hyper referential links let us recall that a hyper

reference is constructed of two entities, anchors and links. Links concatenate anchors,

which identify sub portions of content. In a fairly general fashion anchors can be

expressed within XLink [DMO01] statements by XPointer/XPath-like expressions

[DMD02, CD99], the exact formalism depending on the media type of the document.

Links as well as anchors may be stored separate from document resources, e.g. in a link

base.

Even though it appears rather straight forward that a semantic description of an anchor

should inherit the expository statements of the underlying content, sole information

inheritance remains insufficient, since a document in general may carry several, subspecific anchors. It is
therefore important to provide additional specifications as can be

done by the title and label tags inherent with XLink locator expressions.

Note that the

denoted data chunks in anchors need not be of textual type. Anchors in this sense must be

viewed as additional specialisations, i.e. “this resource in the context of hamster diseases

carries the title of hamster having hay fever”. The extraction of a semantic description of

anchored resources given as a collection of inherited and dedicated statements i

HTML lets you specify metadata - additional important information about a
document in a variety of ways. The META elements can be used to include
name/value pairs describing properties of the HTML document, such as
author, expiry date, a list of keywords, document author etc.

The <meta> tag is used to provide such additional information. This tag is

an empty element and so does not have a closing tag but it carries
information within its attributes.

You can include one or more meta tags in your document based on what
information you want to keep in your document but in general, meta tags
do not impact physical appearance of the document so from appearance
point of view, it does not matter if you include them or not.

Adding Meta Tags to Your Documents

You can add metadata to your web pages by placing <meta> tags inside
the header of the document which is represented
by <head> and </head> tags. A meta tag can have following attributes
in addition to core attributes −

Sr.N Attribute & Description

o

1
Name

Name for the property. Can be anything. Examples include, keywords,

description, author, revised, generator etc.

2
content

Specifies the property's value.

3
scheme

Specifies a scheme to interpret the property's value (as declared in the

 content attribute).

4
http-equiv

Used for http response message headers. For example, http-equiv can be
used to refresh the page or to set a cookie. Values include content-type,
expires, refresh and set-cookie.

Specifying Keywords
You can use <meta> tag to specify important keywords related to the
document and later these keywords are used by the search engines while
indexing your webpage for searching purpose.

Example
Following is an example, where we are adding HTML, Meta Tags, Metadata
as important keywords about the document.
 Live Demo

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />

</head>

<body>

<p>Hello HTML5!</p>

</body>
</html>

This will produce the following result −

The HTML <meta> Element

The <meta> element is used to specify which character set is used, page
description, keywords, author, and other metadata.

Metadata is used by browsers (how to display content), by search

engines (keywords), and other web services.

Define the character set used:

<meta charset="UTF-8">

Define a description of your web page:

<meta name="description" content="Free Web tutorials">

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Define the author of a page:

<meta name="author" content="John Doe">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

Example of <meta> tags:
Example
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Try it Yourself »

Setting The Viewport

HTML5 introduced a method to let web designers take control over the
viewport, through the <meta> tag.

The viewport is the user's visible area of a web page. It varies with the
device, and will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> viewport element in all your web

pages:

<meta name="viewport" content="width=device-width, initial-
scale=1.0">

A <meta> viewport element gives the browser instructions on how to

control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first
loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the

same web page with the viewport <meta>tag:
Tip: If you are browsing this page with a phone or a tablet, you can click
on the two links below to see the difference.

Without the viewport meta tag 

 With the viewport meta tag 

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.
Examples: Images, music, sound, videos, records, films, animations, and
more.

Web pages often contain multimedia elements of different types and

formats.

In this chapter you will learn about the different multimedia 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 and fonts, and images!

Audio, video, and animation have been handled differently by the major
browsers. Different formats have been supported, and some formats
require extra helper programs (plug-ins) to work.

Hopefully this will become history. HTML5 multimedia promises an easier

future for 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: .swf,

.wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Common Video Formats
MP4 is the new and upcoming format for
internet video.

MP4 is recommended by YouTube.

MP4 is supported by Flash Players.

MP4 is supported by HTML5. 

Format File Description

MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The firs
.mpeg web. Used to be supported by all browsers, but it is not support

AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Common

hardware. Plays well on Windows computers, but not in web bro

WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Common

hardware. Plays well on Windows computers, but not in web bro
 QuickTim .mov QuickTime. Developed by Apple. Commonly used in video came
e on Apple computers, but not in web browsers. (See MP4)

RealVideo .rm RealVideo. Developed by Real Media to allow video streaming w

.ram used for online video and Internet TV, but does not play in web

Flash .swf Flash. Developed by Macromedia. Often requires an extra comp

.flv browsers.

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

WebM . WebM. Developed by the web giants, Mozilla, Opera, Adobe, an

webm

MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Based on
or MP4 newer video cameras and TV hardware. Supported by all HTML5
YouTube. 

Only MP4, WebM, and Ogg video are supported by the HTML5 standard.
Audio Formats
MP3 is the newest 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 e
.midi synthesizers and PC sound cards. MIDI files do not contain sound
played by electronics. Plays well on all computers and music hard

RealAudi .rm RealAudio. Developed by Real Media to allow streaming of audio

o .ram play in web browsers.

WMA . WMA (Windows Media Audio). Developed by Microsoft. Commonly

wma well on Windows computers, but not in web browsers.

AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the defaul
Apple computers, but not in web browsers.

WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, M
systems. Supported by HTML5.
 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 mo
players. Combines good compression (small files) with high quali

MP4 .mp4 MP4 is a video format, but can also be used for audio. MP4 video
the internet. This leads to automatic support for MP4 audio by all

Only MP3, WAV, and Ogg audio are supported by the HTML5 standard.

New Media Elements

Tag Description

<audio> Defines sound content

<embed> Defines a container for an external (non-HTML) application

<source> Defines multiple media resources for media elements (<video> and

<track> Defines text tracks for media elements (<video> and <audio>)
 <video> Defines video or movie

Read more about HTML5 Vide