کاربر:Zaman/صفحه تمرین3

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

///////////////////////////////////////


HTML Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An HTML comment:


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

Try it Yourself »


Definition and Usage

The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.

You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.


Browser Support

Element
Yes Yes Yes Yes Yes

Tips and Notes

You can use the comment tag to "hide" scripts from browsers without support for scripts (so they don't show them as plain text):

<script type="text/javascript">


</script>

Note: The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.


Standard Attributes

The comment tag does not support any standard attributes.

More information about Standard Attributes.


Event Attributes

The comment tag does not support any event attributes.

More information about Event Attributes.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <!DOCTYPE> Declaration

❮ PreviousComplete HTML ReferenceNext ❯

Example

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>


<body>

The content of the document......

</body>


</html>

Try it Yourself »


Definition and Usage

All HTML documents must start with a <!DOCTYPE> declaration.

The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.

In HTML 5, the declaration is simple:

<!DOCTYPE html>


Browser Support

Element
<!DOCTYPE> Yes Yes Yes Yes Yes

Older HTML Documents

In older documents (HTML 4 or XHTML), the declaration is more complicated because the declaration must refer to a DTD (Document Type Definition).

HTML 4.01:

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

XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



HTML Elements and Doctypes

Look at our table of all HTML elements, and what Doctype each element appears in.


Tips and Notes

Tip: The <!DOCTYPE> declaration is NOT case sensitive.

Examples

<!DOCTYPE html>

<!DocType html>

<!Doctype html>

<!doctype html>


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <a> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Create a link to W3Schools.com:

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

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Browser Support

Element
<a> Yes Yes Yes Yes Yes

Tips and Notes

Tip: If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.

Tip: The following attributes: download, hreflang, media, rel, target, and type cannot be present if the href attribute is not present.

Tip: A linked page is normally displayed in the current browser window, unless you specify another target.

Tip: Use CSS to style links: CSS Links and CSS Buttons.



Attributes

Attribute Value Description
download filename Specifies that the target will be downloaded when a user clicks on the hyperlink
href URL Specifies the URL of the page the link goes to
hreflang language_code Specifies the language of the linked document
media media_query Specifies what media/device the linked document is optimized for
ping list_of_URLs Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.
referrerpolicy no-referrer

no-referrer-when-downgrade

origin

origin-when-cross-origin

unsafe-url

Specifies which referrer to send
rel alternate

author

bookmark

external

help

license

next

nofollow

noreferrer

noopener

prev

search

tag

Specifies the relationship between the current document and the linked document
target _blank

_parent

_self

_top

framename

Specifies where to open the linked document
type media_type Specifies the media type of the linked document

Global Attributes

The <a> tag also supports the Global Attributes in HTML.


Event Attributes

The <a> tag also supports the Event Attributes in HTML.


More Examples

Example

How to use an image as a link:

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

<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">

</a>

Try it Yourself »

Example

How to open a link in a new browser window:

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

Try it Yourself »

Example

How to link to an email address:

<a href="mailto:someone@example.com">Send email</a>

Try it Yourself »

Example

How to link to a phone number:

<a href="tel:+4733378901">+47 333 78 901</a>

Try it Yourself »

Example

How to link to another section on the same page:

<a href="#section2">Go to Section 2</a>

Try it Yourself »

Example

How to link to a JavaScript:

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

Try it Yourself »


Related Pages

HTML tutorial: HTML Links

HTML DOM reference: Anchor Object

CSS Tutorial: Styling Links


Default CSS Settings

Most browsers will display the <a> element with the following default values:

a:link, a:visited {

 color: (internal value);

  text-decoration: underline;

  cursor: auto;

}


a:link:active, a:visited:active {

  color: (internal value);

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <abbr> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An abbreviation is marked up as follows:

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

Try it Yourself »


Definition and Usage

The <abbr> tag defines an abbreviation or an acronym, like "HTML", "Mr.", "Dec.", "ASAP", "ATM".

Tip: An abbreviation or an acronym are both shortened versions of something else. Both are often represented as a series of letters.


Browser Support

Element
<abbr> Yes Yes Yes Yes Yes

Tips and Notes

Tip: Use the global title attribute to show the description of the abbreviation/acronym when you mouse over the <abbr> element.


Global Attributes

The <abbr> tag supports the Global Attributes in HTML.


Event Attributes

The <abbr> tag supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Abbreviation Object


Default CSS Settings

Most browsers will display the <abbr> element with the following default values:

Example

abbr {

  display: inline;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <acronym> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <acronym> tag was used in HTML 4 to define an acronym.


What to Use Instead?

Example

An acronym or abbreviation should be marked up with the <abbr> tag:

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <address> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Contact information for Example.com:

<address>

Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

Try it Yourself »


Definition and Usage

The <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. Most browsers will add a line break before and after the address element.


Browser Support

Element
<address> Yes Yes Yes Yes Yes

Global Attributes

The <address> tag also supports the Global Attributes in HTML.


Event Attributes

The <address> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Address Object


Default CSS Settings

Most browsers will display the <address> element with the following default values:

Example

address {

  display: block;

  font-style: italic;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////

HTML <applet> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <applet> tag was used in HTML 4 to define an embedded applet (Plug-in).


Plug-ins

Plug-ins are a computer programs that extend the standard functionality of the browser.

Plug-ins have been used for many different purposes:

  • Run Java applets
  • Run ActiveX controls
  • Display Flash movies
  • Display maps
  • Scan for viruses
  • Verify a bank id

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.


What to Use Instead?

If you want to embed a video, use the <video> tag instead:

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 »

If you want to embed audio, use the <audio> tag instead:

Example

<audio controls>

 <source src="horse.ogg" type="audio/ogg">

 <source src="horse.mp3" type="audio/mpeg">

  Your browser does not support the audio tag.

</audio>

Try it Yourself »



To embed objects, you can use both the <embed> tag and the <object> tag:

Example

Embed a document with the <embed> element:

<embed src="snippet.html">

Try it Yourself »

Example

Embed a picture with the <embed> element:

<embed src="pic_trulli.jpg">

Try it Yourself »

Example

Embed a document with the <object> element:

<object data="snippet.html"></object>

Try it Yourself »

Example

Embed a picture with the <object> element:

<object data="pic_trulli.jpg"></object>

Try it Yourself »

To embed a picture, it is better to use the <img> tag.

To embed a document, it is better to use the <iframe> tag.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <area> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An image-map, with clickable areas:

<img src="planets.gif" width="145" height="126" alt="Planets"

usemap="#planetmap">


<map name="planetmap">

 <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">

 <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">

 <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">

</map>

Try it Yourself »


Definition and Usage

The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas).

The <area> element is always nested inside a <map> tag.

Note: The usemap attribute in the <img> tag is associated with the <map> element's name attribute, and creates a relationship between the image and the map.


Browser Support

Element
<area> Yes Yes Yes Yes Yes


Attributes

Attribute Value Description
alt text Specifies an alternate text for the area. Required if the href attribute is present
coords coordinates Specifies the coordinates of the area
download filename Specifies that the target will be downloaded when a user clicks on the hyperlink
href URL Specifies the hyperlink target for the area
hreflang language_code Specifies the language of the target URL
media media query Specifies what media/device the target URL is optimized for
rel alternate

author

bookmark

help

license

next

nofollow

noreferrer

prefetch

prev

search

tag

Specifies the relationship between the current document and the target URL
shape default

rect

circle

poly

Specifies the shape of the area
target _blank

_parent

_self

_top

framename

Specifies where to open the target URL
type media_type Specifies the media type of the target URL

Global Attributes

The <area> tag also supports the Global Attributes in HTML.


Event Attributes

The <area> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Area Object


Default CSS Settings

Most browsers will display the <area> element with the following default values:

area {

  display: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <article> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Three articles with independent, self-contained content:

<article>

<h2>Google Chrome</h2>

<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>

</article>


<article>

<h2>Mozilla Firefox</h2>

<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>

</article>


<article>

<h2>Microsoft Edge</h2>

<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>

</article>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:

  • Forum post
  • Blog post
  • News story
  • Comment

Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element (see example below).


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<article> 6.0 9.0 4.0 5.0 11.1

Global Attributes

The <article> tag also supports the Global Attributes in HTML.


Event Attributes

The <article> tag also supports the Event Attributes in HTML.


More Examples

Example

Use CSS to style the <article> element:

<html>

<head>

<style>

.all-browsers {

  margin: 0;

  padding: 5px;

  background-color: lightgray;

}


.all-browsers > h1, .browser {

  margin: 10px;

  padding: 5px;

}


.browser {

  background: white;

}


.browser > h2, .browser > p {

  margin: 4px;

  font-size: 90%;

}

</style>

</head>

<body>


<article class="all-browsers">

 <h1>Most Popular Browsers</h1>

 <article class="browser">

   <h2>Google Chrome</h2>

   <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>

 </article>

 <article class="browser">

   <h2>Mozilla Firefox</h2>

   <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>

 </article>

 <article class="browser">

   <h2>Microsoft Edge</h2>

   <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>

 </article>

</article>


</body>

</html>

Try it Yourself »


Related Pages

HTML DOM reference: Article Object


Default CSS Settings

Most browsers will display the <article> element with the following default values:

article {

  display: block;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <aside> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Display some content aside from the content it is placed in:

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>


<aside>

<h4>Epcot Center</h4>

<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>

</aside>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <aside> tag defines some content aside from the content it is placed in.

The aside content should be indirectly related to the surrounding content.

Note: The <aside> element does not render as anything special in a browser. However, you can use CSS to style the <aside> element (see example below).


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<aside> 6.0 9.0 4.0 5.0 11.1

Tips and Notes

Tip: The <aside> content could be placed as a sidebar in an article.


Global Attributes

The <aside> tag also supports the Global Attributes in HTML.


Event Attributes

The <aside> tag also supports the Event Attributes in HTML.


More Examples

Example

Use CSS to style the <aside> element:

<html>

<head>

<style>

aside {

  width: 30%;

  padding-left: 15px;

  margin-left: 15px;

  float: right;

  font-style: italic;

  background-color: lightgray;

}

</style>

</head>

<body>


<h1>The aside element</h1>


<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>


<aside>

<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>

</aside>


<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>


</body>

</html>

Try it Yourself »


Related Pages

HTML DOM reference: Aside Object


Default CSS Settings

Most browsers will display the <aside> element with the following default values:

aside {

  display: block;

}


❮ PreviousComplete HTML ReferenceNext ❯


///////////////////////////////////////


HTML <audio> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Play a sound:

<audio controls>

 <source src="horse.ogg" type="audio/ogg">

 <source src="horse.mp3" type="audio/mpeg">

  Your browser does not support the audio tag.

</audio>

Try it Yourself »


Definition and Usage

The <audio> tag defines sound, such as music or other audio streams.

Currently, there are 3 supported file formats for the <audio> element: MP3, WAV, and OGG:

Browser MP3 WAV OGG
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

MIME Types for Audio Formats

Format MIME-type
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<audio> 4.0 9.0 3.5 4.0 11.5

Tips and Notes

Tip: Any text between <audio> and </audio> will be displayed in browsers that do not support the <audio> tag.

Tip: For video files, look at the <video> tag.


Attributes

Attribute Value Description
autoplay autoplay Specifies that the audio will start playing as soon as it is ready
controls controls Specifies that audio controls should be displayed (such as a play/pause button etc)
loop loop Specifies that the audio will start over again, every time it is finished
muted muted Specifies that the audio output should be muted
preload auto

metadata

none

Specifies if and how the author thinks the audio should be loaded when the page loads
src URL Specifies the URL of the audio file

Global Attributes

The <audio> tag also supports the Global Attributes in HTML.


Event Attributes

The <audio> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: HTML Audio/Video DOM Reference


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <b> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Make text bold:

<p>This is normal text - <b>and this is bold text</b>.</p>

Try it Yourself »


Definition and Usage

The <b> tag specifies bold text without any extra importance.


Browser Support

Element
<b> Yes Yes Yes Yes Yes

Tips and Notes

Note: According to the HTML 5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should use the <mark> tag.

Tip: You can also use the CSS "font-weight" property to set bold text.


Global Attributes

The <b> tag also supports the Global Attributes in HTML.


Event Attributes

The <b> tag also supports the Event Attributes in HTML.


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Bold Object


Default CSS Settings

Most browsers will display the <b> element with the following default values:

Example

b {

  font-weight: bold;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <base> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Specify a default URL and a default target for all links on a page:

<head>

 <base href="https://www.w3schools.com/" target="_blank">

</head>


<body>

<img src="images/stickman.gif" width="24" height="39" alt="Stickman">

<a href="tags/tag_base.asp">HTML base Tag</a>

</body>

Try it Yourself »


Definition and Usage

The <base> tag specifies the base URL/target for all relative URLs in a document.

There can only be one <base> element in a document, and it must be inside the <head> element.


Browser Support

Element
<base> Yes Yes Yes Yes Yes

Tips and Notes

Note: If the <base> tag is present, it must have either an href attribute or a target attribute, or both.

Attributes

Attribute Value Description
href URL Specifies the base URL for all relative URLs in the page
target _blank

_parent

_self

_top

framename

Specifies the default target for all hyperlinks and forms in the page

Global Attributes and Events

The <base> tag also supports the Global Attributes in HTML.


Event Attributes

The <base> tag does not support any event attributes.


Related Pages

HTML DOM reference: Base Object


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <basefont> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <basefont> tag was used in HTML 4 to specify a default text-color, font-size or font-family for all the text in an HTML document.


What to Use Instead?

Example

Specify a default text-color for a page (with CSS):

<html>

<head>

<style>

body {

  color: red;

}

</style>

</head>

<body>


<h1>This is a heading</h1>

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


</body>

</html>

Try it Yourself »

Example

Specify a default font-family for a page (with CSS):

<html>

<head>

<style>

body {

  font-family: courier, serif;

}

</style>

</head>

<body>


<h1>This is a heading</h1>

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


</body>

</html>

Try it Yourself »

Example

Specify a default font-size for a page (with CSS):

<html>

<head>

<style>

body {

  font-size: 50px;

}

</style>

</head>

<body>


<h1>This is a heading</h1>

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


</body>

</html>

Try it Yourself »

Tip: In our CSS tutorial you can find more information about CSS text color and CSS fonts.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <bdi> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Isolate the usernames from the surrounding text-direction settings:

<ul>

 <li>User <bdi>hrefs</bdi>: 60 points</li>

 <li>User <bdi>jdoe</bdi>: 80 points</li>

 <li>User <bdi>إيان</bdi>: 90 points</li>

</ul>

Try it Yourself »


Definition and Usage

BDI stands for Bi-Directional Isolation.

The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.

This element is useful when embedding user-generated content with an unknown directionality.


Browser Support

Element
<bdi> 16.0 79.0 10.0 Not supported 15.0

Global Attributes

The <bdi> tag also supports the Global Attributes in HTML.


Event Attributes

The <bdi> tag also supports the Event Attributes in HTML.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <bdo> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Specify the text direction:

<bdo dir="rtl">

This text will go right-to-left.

</bdo>

Try it Yourself »


Definition and Usage

BDO stands for Bi-Directional Override.

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


Browser Support

Element
<bdo> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
dir ltr

rtl

Required. Specifies the text direction of the text inside the <bdo> element

Global Attributes

The <bdo> tag also supports the Global Attributes in HTML.


Event Attributes

The <bdo> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Bdo Object


Default CSS Settings

Most browsers will display the <bdo> element with the following default values:

bdo {

 unicode-bidi: bidi-override;

}


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <big> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <big> tag was used in HTML 4 to define bigger text.


What to Use Instead?

Example

Specify different font-sizes for HTML elements (with CSS):

<html>

<head>

<style>

p.ex1 {

  font-size: 30px;

}

p.ex2 {

  font-size: 50px;

}

</style>

</head>

<body>


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

<p class="ex1">This is a bigger paragraph.</p>

<p class="ex2">This is a much bigger paragraph.</p>


</body>

</html>

Try it Yourself »

In our CSS tutorial you can find more information about CSS Font Size.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <blockquote> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A section that is quoted from another source:

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

</blockquote>

Try it Yourself »


Definition and Usage

The <blockquote> tag specifies a section that is quoted from another source.

Browsers usually indent <blockquote> elements.


Browser Support

Element
<blockquote> Yes Yes Yes Yes Yes

Tips and Notes

Tip: Use <q> for inline (short) quotations.


Attributes

Attribute Value Description
cite URL Specifies the source of the quotation

Global Attributes

The <blockquote> tag also supports the Global Attributes in HTML.


Event Attributes

The <blockquote> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Blockquote Object


Default CSS Settings

Most browsers will display the <blockquote> element with the following default values:

Example

blockquote {

  display: block;

  margin-top: 1em;

  margin-bottom: 1em;

  margin-left: 40px;

  margin-right: 40px;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <body> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A simple HTML document:

<html>

<head>

<title>Title of the document</title>

</head>


<body>

The content of the document......

</body>


</html>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

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

The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.


Browser Support

Element
<body> Yes Yes Yes Yes Yes

Global Attributes

The <body> tag also supports the Global Attributes in HTML.


Event Attributes

The <body> tag also supports the Event Attributes in HTML.



More Examples

Example

Add a background image to a document (with CSS):

<html>

<head>

<style>

body {

  background-image: url(w3s.png);

}

</style>

</head>

<body>


<h1>Hello world!</h1>

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


</body>

Try it Yourself »

Example

Set the background color of a document (with CSS):

<html>

<head>

<style>

body {

  background-color: #E6E6FA;

}

</style>

</head>

<body>


<h1>Hello world!</h1>

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


</body>

Try it Yourself »

Example

Set the color of text in a document (with CSS):

<html>

<head>

<style>

body {

  color: green;

}

</style>

</head>

<body>


<h1>Hello world!</h1>

<p>This is some text.</p>

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


</body>

</html>

Try it Yourself »

Example

Set the color of unvisited links in a document (with CSS):

<html>

<head>

<style>

a:link {

  color:#0000FF;

}

</style>

</head>

<body>


<p><a href="https://www.w3schools.com">W3Schools.com</a></p>

<p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>


</body>

</html>

Try it Yourself »

Example

Set the color of active links in a document (with CSS):

<html>

<head>

<style>

a:active {

  color:#00FF00;

}

</style>

</head>

<body>


<p><a href="https://www.w3schools.com">W3Schools.com</a></p>

<p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>


</body>

</html>

Try it Yourself »

Example

Set the color of visited links in a document (with CSS):

<html>

<head>

<style>

a:visited {

  color:#FF0000;

}

</style>

</head>

<body>


<p><a href="https://www.w3schools.com">W3Schools.com</a></p>

<p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>


</body>

</html>

Try it Yourself »


Related Pages

HTML tutorial: HTML Elements

HTML DOM reference: Body Object

HTML DOM reference: document.body Property


Default CSS Settings

Most browsers will display the <body> element with the following default values:

Example

body {

  display: block;

  margin: 8px;

}


body:focus {

 outline: none;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <br> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Insert single line breaks in a text:

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

Try it Yourself »


Definition and Usage

The <br> tag inserts a single line break.

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


Browser Support

Element
<br> Yes Yes Yes Yes Yes

Tips and Notes

Tip: The <br> tag is useful for writing addresses or poems.

Note: Use the <br> tag to enter line breaks, not to separate paragraphs.


Global Attributes

The <br> tag also supports the Global Attributes in HTML.


Event Attributes

The <br> tag also supports the Event Attributes in HTML.


Related Pages

HTML tutorial: HTML Paragraphs

HTML DOM reference: BR Object


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

/////////////////////////////////////


HTML <button> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A clickable button is marked up as follows:

<button type="button">Click Me!</button>

Try it Yourself »


Definition and Usage

The <button> tag defines a clickable button.

Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.

Tip: Always specify the type attribute for a <button> element, because browsers may use different default types for the <button> element.

Tip: Buttons are often styled with CSS: Try it »


Browser Support

Element
<button> Yes Yes Yes Yes Yes

Tips and Notes

Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.

Tip: Visit our CSS Buttons Tutorial to find out how to style buttons with CSS.



Attributes

Attribute Value Description
autofocus autofocus Specifies that a button should automatically get focus when the page loads
disabled disabled Specifies that a button should be disabled
form form_id Specifies which form the button belongs to
formaction URL Specifies where to send the form-data when a form is submitted. Only for type="submit"
formenctype application/x-www-form-urlencoded

multipart/form-data

text/plain

Specifies how form-data should be encoded before sending it to a server. Only for type="submit"
formmethod get

post

Specifies how to send the form-data (which HTTP method to use). Only for type="submit"
formnovalidate formnovalidate Specifies that the form-data should not be validated on submission. Only for type="submit"
formtarget _blank

_self

_parent

_top

framename

Specifies where to display the response after submitting the form. Only for type="submit"
name name Specifies a name for the button
type button

reset

submit

Specifies the type of button
value text Specifies an initial value for the button

Global Attributes

The <button> tag also supports the Global Attributes in HTML.


Event Attributes

The <button> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Button Object

CSS Tutorial: Styling Buttons


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <canvas> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Draw a red square, on the fly, and show it inside the <canvas> element:

<canvas id="myCanvas"></canvas>


<script>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(0, 0, 80, 80);

</script>

Try it Yourself »


Definition and Usage

The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics.


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<canvas> 4.0 9.0 2.0 3.1 9.0

Tips and Notes

Note: Any text inside the <canvas> element will be displayed in browsers that does not support <canvas>.

Tip: Learn more about the <canvas> element in our HTML Canvas Tutorial.

Tip: For a complete reference of all the properties and methods that can be used with the canvas object, go to our HTML Canvas Reference.



Attributes

Attribute Value Description
height pixels Specifies the height of the canvas
width pixels Specifies the width of the canvas

Global Attributes

The <canvas> tag also supports the Global Attributes in HTML.


Event Attributes

The <canvas> tag also supports the Event Attributes in HTML.


Default CSS Settings

Most browsers will display the <canvas> element with the following default values:

Example

canvas {

 height: 150px;

  width: 300px;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <caption> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A table with a caption:

<table>

 <caption>Monthly savings</caption>

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <caption> tag defines a table caption.

The <caption> tag must be inserted immediately after the <table> tag.

Note: You can specify only one caption per table.

Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.


Browser Support

Element
<caption> Yes Yes Yes Yes Yes

Global Attributes

The <caption> tag also supports the Global Attributes in HTML.


Event Attributes

The <caption> tag also supports the Event Attributes in HTML.



More Examples

Example

Position table captions (with CSS):

<table>

 <caption style="text-align:right">My savings</caption>

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

<br>


<table>

 <caption style="caption-side:bottom">My savings</caption>

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »


Related Pages

HTML DOM reference: Caption Object


Default CSS Settings

Most browsers will display the <caption> element with the following default values:

Example

caption {

  display: table-caption;

  text-align: center;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <center> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <center> tag was used in HTML4 to center-align text.


What to Use Instead?

Example

Center-align text (with CSS):

<html>

<head>

<style>

h1 {text-align: center;}

p {text-align: center;}

</style>

</head>

<body>


<h1>This is a heading</h1>

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


</body>

</html>

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <cite> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Define the title of a work with the <cite> tag:

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

Try it Yourself »


Definition and Usage

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

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


Browser Support

Element
<cite> Yes Yes Yes Yes Yes

Global Attributes

The <cite> tag also supports the Global Attributes in HTML.


Event Attributes

The <cite> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Cite Object


Default CSS Settings

Most browsers will display the <cite> element with the following default values:

Example

cite {

  font-style: italic;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <code> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Format text in a document:

<code>A piece of computer code</code>

Try it Yourself »


Definition and Usage

The <code> tag is a phrase tag. It defines a piece of computer code.

Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS.

All phrase tags:

Tag Description
<em> Renders as emphasized text
<strong> Defines important text
<code> Defines a piece of computer code
<samp> Defines sample output from a computer program
<kbd> Defines keyboard input
<var> Defines a variable

Browser Support

Element
<code> Yes Yes Yes Yes Yes

Global Attributes

The <code> tag also supports the Global Attributes in HTML.


Event Attributes

The <code> tag also supports the Event Attributes in HTML.


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Code Object


Default CSS Settings

Most browsers will display the <code> element with the following default values:

Example

code {

 font-family: monospace;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <col> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Set the background color of the three columns with the <colgroup> and <col> tags:

<table>

 <colgroup>

   <col span="2" style="background-color:red">

   <col style="background-color:yellow">

 </colgroup>

 <tr>

   <th>ISBN</th>

   <th>Title</th>

   <th>Price</th>

 </tr>

 <tr>

   <td>3476896</td>

   <td>My first HTML</td>

   <td>$53</td>

 </tr>

</table>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <col> tag specifies column properties for each column within a <colgroup> element.

The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.


Browser Support

Element
<col> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
span number Specifies the number of columns a <col> element should span

Global Attributes

The <col> tag also supports the Global Attributes in HTML.


Event Attributes

The <col> tag also supports the Event Attributes in HTML.



More Examples

Example

Align text in table columns (with CSS):

<table style="width:100%">

 <tr>

   <th>ISBN</th>

   <th>Title</th>

   <th>Price</th>

 </tr>

 <tr>

   <td>3476896</td>

   <td>My first HTML</td>

   <td style="text-align:right">$53</td>

 </tr>

 <tr>

   <td>2489604</td>

   <td>My first CSS</td>

   <td style="text-align:right">$47</td>

 </tr>

</table>

Try it Yourself »

Example

Vertical-align text in table columns (with CSS):

<table style="height:200px">

 <tr>

   <th>Month</th>

   <th style="vertical-align:bottom">Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td style="vertical-align:bottom">$100</td>

 </tr>

</table>

Try it Yourself »

Example

Specify width of table columns (with CSS):

<table>

 <tr>

   <th style="width:130px">Month</th>

   <th style="width:80px">Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

</table>

Try it Yourself »


Related Pages

HTML DOM reference: Column Object


Default CSS Settings

Most browsers will display the <col> element with the following default values:

Example

col {

  display: table-column;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <colgroup> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Set the background color of the three columns with the <colgroup> and <col> tags:

<table>

 <colgroup>

   <col span="2" style="background-color:red">

   <col style="background-color:yellow">

 </colgroup>

 <tr>

   <th>ISBN</th>

   <th>Title</th>

   <th>Price</th>

 </tr>

 <tr>

   <td>3476896</td>

   <td>My first HTML</td>

   <td>$53</td>

 </tr>

</table>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <colgroup> tag specifies a group of one or more columns in a table for formatting.

The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.

Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag.


Browser Support

Element
<colgroup> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
span number Specifies the number of columns a column group should span

Global Attributes

The <colgroup> tag also supports the Global Attributes in HTML.


Event Attributes

The <colgroup> tag also supports the Event Attributes in HTML.



More Examples

Example

Align text in table columns (with CSS):

<table style="width:100%">

 <tr>

   <th>ISBN</th>

   <th>Title</th>

   <th>Price</th>

 </tr>

 <tr>

   <td>3476896</td>

   <td>My first HTML</td>

   <td style="text-align:right">$53</td>

 </tr>

 <tr>

   <td>2489604</td>

   <td>My first CSS</td>

   <td style="text-align:right">$47</td>

 </tr>

</table>

Try it Yourself »

Example

Vertical-align text in table columns (with CSS):

<table style="height:200px">

 <tr>

   <th>Month</th>

   <th style="vertical-align:bottom">Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td style="vertical-align:bottom">$100</td>

 </tr>

</table>

Try it Yourself »

Example

Specify width of a table column (with CSS):

<table>

 <tr>

   <th style="width:200px">Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

</table>

Try it Yourself »


Related Pages

HTML DOM reference: ColumnGroup Object


Default CSS Settings

Most browsers will display the <colgroup> element with the following default values:

Example

colgroup {

 display: table-column-group;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <data> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

The following example displays product names but also associates each name with a product number:

<ul>

 <li><data value="21053">Cherry Tomato</data></li>

 <li><data value="21054">Beef Tomato</data></li>

 <li><data value="21055">Snack Tomato</data></li>

</ul>

Try it Yourself »


Definition and Usage

The <data> tag links the given content with a machine-readable translation.

This element provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser.

Tip: If the content is time- or date-related, the <time> element must be used instead.


Browser Support

Element
<data> 62.0 13.0 22.0 Not supported 49.0

Attributes

Attribute Value Description
value machine-readable format Specifies the machine-readable translation of the content of the element

Global Attributes

The <data> tag also supports the Global Attributes in HTML.


❮ PreviousComplete HTML ReferenceNext ❯

///////////////////////////////////////


HTML <datalist> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An <input> element with pre-defined values in a <datalist>:

<input list="browsers">


<datalist id="browsers">

 <option value="Internet Explorer">

 <option value="Firefox">

 <option value="Chrome">

 <option value="Opera">

 <option value="Safari">

</datalist>

Try it Yourself »


Definition and Usage

The <datalist> tag specifies a list of pre-defined options for an <input> element.

The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Use the <input> element's list attribute to bind it together with a <datalist> element.


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<datalist> 20.0 10.0 4.0 12.1 9.5

Global Attributes

The <datalist> tag also supports the Global Attributes in HTML.


Event Attributes

The <datalist> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Datalist Object


Default CSS Settings

Most browsers will display the <datalist> element with the following default values:

datalist {

  display: none;

}


❮ PreviousComplete HTML ReferenceNext ❯