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

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

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


HTML <small> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Define a smaller text:

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

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

Try it Yourself »


Definition and Usage

The <small> tag defines smaller text (and other side comments).


Browser Support

Element
<small> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Small Object


Default CSS Settings

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

Example

small {

  font-size: smaller;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <source> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An audio player with two source files. The browser should choose which file (if any) it has support for:

<audio controls>

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

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

  Your browser does not support the audio element.

</audio>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>.

The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on its media type, codec support or media query.


Browser Support

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

Element
<source> 4.0 9.0 3.5 4.0 10.5


Attributes

Attribute Value Description
src URL Required when <source> is used in <audio> and <video>. Specifies the URL of the media file
srcset URL Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations
media media_query Accepts any valid media query that would normally be defined in a CSS
sizes Specifies image sizes for different page layouts
type MIME-type Specifies the MIME-type of the resource

Global Attributes

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


Event Attributes

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


More Examples

Example

A <picture> element with two source files, and a fallback image:

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


Related Pages

HTML tutorial: HTML Video

HTML tutorial: HTML Audio

HTML DOM reference: Source Object


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <span> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A <span> element used to color a part of a text:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

Try it Yourself »


Definition and Usage

The <span> tag is an inline container used to mark up a part of a text, or a part of a document.

The <span> tag provides no visual change by itself, but when it is marked, you can style it with CSS, or manipulate it with JavaScript.


Browser Support

Element
<span> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Blocks

HTML DOM reference: Span Object


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <strike> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <strike> tag was used in HTML 4 to define strikethrough text.


What to Use Instead?

Example

Use the <del> tag to define deleted text:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

Try it Yourself »

Example

Use the <s> tag to mark up text that is no longer correct:

<p><s>My car is blue.</s></p>

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <strong> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Format text in a document:

<strong>Strong text</strong>

Try it Yourself »


Definition and Usage

The <strong> tag is a phrase tag. It defines important text.

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
<strong> Yes Yes Yes Yes Yes


Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Strong Object


Default CSS Settings

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

Example

strong {

  font-weight: bold;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <style> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Use of the <style> element in an HTML document:

<html>

<head>

<style>

h1 {color:red;}

p {color:blue;}

</style>

</head>

<body>


<h1>A heading</h1>

<p>A paragraph.</p>


</body>

</html>

Try it Yourself »


Definition and Usage

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should render in a browser.

Each HTML document can contain multiple <style> tags.


Browser Support

Element
<style> Yes Yes Yes Yes Yes

Tips and Notes

Tip: To link to an external style sheet, use the <link> tag.

Tip: To learn more about style sheets, please read our CSS Tutorial.



Attributes

Attribute Value Description
media media_query Specifies what media/device the media resource is optimized for
type text/css Specifies the media type of the <style> tag

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML CSS

CSS tutorial: CSS Tutorial

HTML DOM reference: Style Object


Default CSS Settings

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

style {

 display: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <sub> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Subscript text:

<p>This text contains <sub>subscript</sub> text.</p>

Try it Yourself »


Definition and Usage

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

Tip: Use the <sup> tag to define superscripted text.


Browser Support

Element
<sub> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Subscript Object


Default CSS Settings

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

Example

sub {

  vertical-align: sub;

  font-size: smaller;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <summary> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Using the <summary> element:

<details>

 <summary>Copyright 1999-2014.</summary>

 <p> - by Refsnes Data. All Rights Reserved.</p>

 <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

Try it Yourself »


Definition and Usage

The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.


Browser Support

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

Element
<summary> 12.0 79.0 49.0 6.0 15.0

Tips and Notes

Note: The <summary> element should be the first child element of the <details> element.


Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Summary Object


Default CSS Settings

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

summary {

  display: block;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <sup> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Superscript text:

<p>This text contains <sup>superscript</sup> text.</p>

Try it Yourself »


Definition and Usage

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

Tip: Use the <sub> tag to define subscript text.


Browser Support

Element
<sup> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Superscript Object


Default CSS Settings

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

Example

sup {

  vertical-align: super;

  font-size: smaller;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <svg> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Draw a circle:

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

 <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

</svg>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <svg> tag defines a container for SVG graphics.

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

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


Browser Support

Element
<svg> 4.0 9.0 3.0 3.2 10.1

More Examples

Example

Draw a rectangle:

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

 <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />

</svg>

Try it Yourself »

Example

Draw a square with rounded corners:

<svg width="400" height="180">

 <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

</svg>

Try it Yourself »

Example

Draw a star:

<svg width="300" height="200">

 <polygon points="100,10 40,198 190,78 10,78 160,198"

  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

Try it Yourself »

Example

Draw an SVG logo:

<svg height="130" width="500">

<defs>

<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

 <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />

 <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />

</linearGradient>

</defs>


<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />


<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>

</svg>

Try it Yourself »


Related Pages

HTML tutorial: HTML SVG

SVG tutorial: SVG Tutorial


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <table> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A simple HTML table, containing two columns and two rows:

<table>

 <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 <table> tag defines an HTML table.

An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

Note: Tables should not be used for page layout! Historically, some Web authors have misused tables in HTML as a way to control their page layout. However, there are a variety of alternatives to using HTML tables for layout, primarily using CSS.


Browser Support

Element
<table> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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



More Examples

Example

How to add borders to a table (with CSS):

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

}

</style>

</head>

<body>


<table>

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

</table>


</body>

</html>

Try it Yourself »

Example

How to align a table (with CSS):

<table style="float:right">

 <tr>

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

Example

How to add background-color to a table (with CSS):

<table style="background-color:#00FF00">

 <tr>

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

Example

How to add padding to a table (with CSS):

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

}


th, td {

  padding: 10px;

}

</style>

</head>

<body>


<table>

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

</table>


</body>

</html>

Try it Yourself »

Example

How to set table width (with CSS):

<table style="width:400px">

 <tr>

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

Example

How to create table headers:

<table>

 <tr>

   <th>Name</th>

   <th>Email</th>

   <th>Phone</th>

 </tr>

 <tr>

   <td>John Doe</td>

   <td>john.doe@example.com</td>

   <td>123-45-678</td>

 </tr>

</table>

Try it Yourself »

Example

How to create 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>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

</table>

Try it Yourself »

Example

How to define table cells that span more than one row or one column:

<table>

 <tr>

   <th>Name</th>

   <th>Email</th>

   <th colspan="2">Phone</th>

 </tr>

 <tr>

   <td>John Doe</td>

   <td>john.doe@example.com</td>

   <td>123-45-678</td>

   <td>212-00-546</td>

 </tr>

</table>

Try it Yourself »


Related Pages

HTML tutorial: HTML Tables

HTML DOM reference: Table Object

CSS Tutorial: Styling Tables


Default CSS Settings

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

Example

table {

  display: table;

 border-collapse: separate;

  border-spacing: 2px;

  border-color: gray;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <tbody> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An HTML table with a <thead>, <tbody>, and a <tfoot> element:

<table>

 <thead>

   <tr>

     <th>Month</th>

      <th>Savings</th>

   </tr>

 </thead>

 <tbody>

   <tr>

     <td>January</td>

     <td>$100</td>

   </tr>

   <tr>

     <td>February</td>

     <td>$80</td>

   </tr>

 </tbody>

 <tfoot>

   <tr>

     <td>Sum</td>

     <td>$180</td>

   </tr>

 </tfoot>

</table>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <tbody> tag is used to group the body content in an HTML table.

The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The <tbody> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements.


Browser Support

Element
<tbody> Yes Yes Yes Yes Yes

Tips and Notes

Note: The <tbody> element must have one or more <tr> tags inside.

Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.



Global Attributes

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


Event Attributes

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


More Examples

Example

How to align content inside <tbody> (with CSS):

<table style="width:100%">

 <thead>

   <tr>

     <th>Month</th>

     <th>Savings</th>

   </tr>

 </thead>

 <tbody style="text-align:right">

   <tr>

     <td>January</td>

     <td>$100</td>

   </tr>

   <tr>

     <td>February</td>

     <td>$80</td>

   </tr>

 </tbody>

</table>

Try it Yourself »

Example

How to vertical align content inside <tbody> (with CSS):

<table style="width:50%;">

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tbody style="vertical-align:bottom">

   <tr style="height:100px">

     <td>January</td>

     <td>$100</td>

   </tr>

   <tr style="height:100px">

     <td>February</td>

     <td>$80</td>

   </tr>

 </tbody>

</table>

Try it Yourself »


Default CSS Settings

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

tbody {

  display: table-row-group;

  vertical-align: middle;

  border-color: inherit;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <td> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A simple HTML table, with two table cells:

<table>

 <tr>

   <td>Cell A</td>

   <td>Cell B</td>

 </tr>

</table>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <td> tag defines a standard cell in an HTML table.

An HTML table has two kinds of cells:

  • Header cells - contains header information (created with the <th> element)
  • Standard cells - contains data (created with the <td> element)

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.


Browser Support

Element
<td> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
colspan number Specifies the number of columns a cell should span
headers header_id Specifies one or more header cells a cell is related to
rowspan number Sets the number of rows a cell should span

Global Attributes

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


Event Attributes

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



More Examples

Example

How to align content inside <td> (with CSS):

<table style="width:100%">

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td>January</td>

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

 </tr>

 <tr>

   <td>February</td>

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

 </tr>

</table>

Try it Yourself »

Example

How to add background-color to table cell (with CSS):

<table>

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td style="background-color:#FF0000">January</td>

   <td style="background-color:#00FF00">$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to set the height of a table cell (with CSS):

<table>

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td style="height:100px">January</td>

   <td style="height:100px">$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to specify no word-wrapping in table cell (with CSS):

<table>

 <tr>

   <th>Poem</th>

   <th>Poem</th>

 </tr>

 <tr>

   <td style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td>

   <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>

 </tr>

</table>

Try it Yourself »

Example

How to vertical align content inside <td> (with CSS):

<table style="width:50%;">

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr style="height:100px">

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

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

 </tr>

</table>

Try it Yourself »

Example

How to set the width of a table cell (with CSS):

<table style="width:100%">

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td style="width:70%">January</td>

   <td style="width:30%">$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to create table headers:

<table>

 <tr>

   <th>Name</th>

   <th>Email</th>

   <th>Phone</th>

 </tr>

 <tr>

   <td>John Doe</td>

   <td>john.doe@example.com</td>

   <td>123-45-678</td>

 </tr>

</table>

Try it Yourself »

Example

How to create 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>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

</table>

Try it Yourself »

Example

How to define table cells that span more than one row or one column:

<table>

 <tr>

   <th>Name</th>

   <th>Email</th>

   <th colspan="2">Phone</th>

 </tr>

 <tr>

   <td>John Doe</td>

   <td>john.doe@example.com</td>

   <td>123-45-678</td>

   <td>212-00-546</td>

 </tr>

</table>

Try it Yourself »


Related Pages

HTML tutorial: HTML Tables

HTML DOM reference: TableData Object

CSS Tutorial: Styling Tables


Default CSS Settings

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

td {

  display: table-cell;

 vertical-align: inherit;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <template> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

The template element holds HTML code without displaying it:

<template>

 <h2>Flower</h2>

 <img src="img_white_flower.jpg">

</template>

Try it Yourself »


Definition and Usage

The <template> tag holds its content hidden from the client.

Content inside a <template> tag will not be rendered.

The content can be made visible and rendered later by using JavaScript.

Use the <template> tag when you have HTML code you want to use over and over again, but not until you ask for it. To do this without the <template> tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.


Browser Support

Element
<template> 26.0 13.0 22.0 8.0 15.0

Global Attributes

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


More Examples

Example

Use JavaScript to get the content from a template, and add it to the page:

function showContent() {

 var temp = document.getElementsByTagName("template")[0];

 var clon = temp.content.cloneNode(true);

  document.body.appendChild(clon);

}

Try it Yourself »

Example

Use the content of a template for each item in an array:

<template>

 <div class="myClass">I like: </div>

</template>


<script>

var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];


function showContent() {

 var temp, item, a, i;

 // Get the template element:

  temp = document.getElementsByTagName("template")[0];

 // Get the DIV element from the template:

  item = temp.content.querySelector("div");

 // For each item in the array:

 for (i = 0; i < myArr.length; i++) {

   // Create a new node, based on the template:

   a = document.importNode(item, true);

   // Add data from the array:

   a.textContent += myArr[i];

   // Append the new node wherever you like:

   document.body.appendChild(a);

  }

}

</script>

Try it Yourself »

Example

Test browser support for the template element::

if (document.createElement("template").content) {

 /*Code for browsers that supports the TEMPLATE element*/

} else {

 /*Alternative code for browsers that do not support the TEMPLATE element*/

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <textarea> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An HTML text area:

<label for="w3mission">W3Schools mission:</label>


<textarea id="w3mission" rows="4" cols="50">

At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.

</textarea>

Try it Yourself »


Definition and Usage

The <textarea> tag defines a multi-line text input control.

A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Element
<textarea> Yes Yes Yes Yes Yes


Attributes

Attribute Value Description
autofocus autofocus Specifies that a text area should automatically get focus when the page loads
cols number Specifies the visible width of a text area
dirname textareaname.dir Specifies that the text direction of the textarea will be submitted
disabled disabled Specifies that a text area should be disabled
form form_id Specifies which form the text area belongs to
maxlength number Specifies the maximum number of characters allowed in the text area
name text Specifies a name for a text area
placeholder text Specifies a short hint that describes the expected value of a text area
readonly readonly Specifies that a text area should be read-only
required required Specifies that a text area is required/must be filled out
rows number Specifies the visible number of lines in a text area
wrap hard

soft

Specifies how the text in a text area is to be wrapped when submitted in a form

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Textarea Object

CSS Tutorial: Styling Forms


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <tfoot> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An HTML table with a <thead>, <tbody>, and a <tfoot> element:

<table>

 <thead>

    <tr>

     <th>Month</th>

     <th>Savings</th>

    </tr>

 </thead>

 <tbody>

   <tr>

     <td>January</td>

      <td>$100</td>

   </tr>

   <tr>

     <td>February</td>

     <td>$80</td>

    </tr>

 </tbody>

 <tfoot>

   <tr>

     <td>Sum</td>

     <td>$180</td>

   </tr>

 </tfoot>

</table>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <tfoot> tag is used to group footer content in an HTML table.

The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, <thead>, and <tbody> elements.


Browser Support

Element
<tfoot> Yes Yes Yes Yes Yes

Tips and Notes

Note: The <tfoot> element must have one or more <tr> tags inside.

Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.



Global Attributes

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


Event Attributes

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


More Examples

Example

How to align content inside <tfoot> (with CSS):

<table style="width:100%">

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

 <tfoot style="text-align:center">

   <tr>

     <td>Sum</td>

     <td>$180</td>

   </tr>

 </tfoot>

</table>

Try it Yourself »

Example

How to vertical align content inside <tfoot> (with CSS):

<table style="width:100%">

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

 <tfoot style="vertical-align:bottom">

   <tr style="height:100px">

     <td>Sum</td>

     <td>$180</td>

   </tr>

 </tfoot>

</table>

Try it Yourself »


Default CSS Settings

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

tfoot {

 display: table-footer-group;

  vertical-align: middle;

  border-color: inherit;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <th> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A simple HTML table with two header cells and two data cells:

<table>

<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 <th> tag defines a header cell in an HTML table.

An HTML table has two kinds of cells:

  • Header cells - contains header information (created with the <th> element)
  • Standard cells - contains data (created with the <td> element)

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.


Browser Support

Element
<th> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
abbr text Specifies an abbreviated version of the content in a header cell
colspan number Specifies the number of columns a header cell should span
headers header_id Specifies one or more header cells a cell is related to
rowspan number Specifies the number of rows a header cell should span
scope col

colgroup

row

rowgroup

Specifies whether a header cell is a header for a column, row, or group of columns or rows

Global Attributes

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


Event Attributes

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



More Examples

Example

How to align content inside <th> (with CSS):

<table style="width:100%">

 <tr>

   <th style="text-align:left">Month</th>

   <th style="text-align:left">Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

</table>

Try it Yourself »

Example

How to add background-color to table header cell (with CSS):

<table>

 <tr>

   <th style="background-color:#FF0000">Month</th>

   <th style="background-color:#00FF00">Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to set the height of a table header cell (with CSS):

<table>

 <tr>

   <th style="height:100px">Month</th>

   <th style="height:100px">Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to specify no word-wrapping in table header cell (with CSS):

<table>

 <tr>

   <th>Month</th>

   <th style="white-space:nowrap">My Savings for a new car</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to vertical align content inside <th> (with CSS):

<table style="width:50%;">

 <tr style="height:100px">

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

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

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to set the width of a table header cell (with CSS):

<table style="width:100%">

 <tr>

   <th style="width:70%">Month</th>

   <th style="width:30%">Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to create table headers:

<table>

 <tr>

   <th>Name</th>

   <th>Email</th>

   <th>Phone</th>

 </tr>

 <tr>

   <td>John Doe</td>

   <td>john.doe@example.com</td>

   <td>123-45-678</td>

 </tr>

</table>

Try it Yourself »

Example

How to create 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>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

</table>

Try it Yourself »

Example

How to define table cells that span more than one row or one column:

<table>

 <tr>

   <th>Name</th>

   <th>Email</th>

   <th colspan="2">Phone</th>

 </tr>

 <tr>

   <td>John Doe</td>

   <td>john.doe@example.com</td>

   <td>123-45-678</td>

   <td>212-00-546</td>

 </tr>

</table>

Try it Yourself »


Related Pages

HTML tutorial: HTML Tables

HTML DOM reference: TableHeader Object

CSS Tutorial: Styling Tables


Default CSS Settings

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

th {

 display: table-cell;

  vertical-align: inherit;

  font-weight: bold;

  text-align: center;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <thead> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An HTML table with a <thead>, <tbody>, and a <tfoot> element:

<table>

 <thead>

   <tr>

     <th>Month</th>

      <th>Savings</th>

   </tr>

 </thead>

 <tbody>

   <tr>

     <td>January</td>

     <td>$100</td>

   </tr>

   <tr>

     <td>February</td>

     <td>$80</td>

   </tr>

 </tbody>

 <tfoot>

   <tr>

     <td>Sum</td>

     <td>$180</td>

   </tr>

 </tfoot>

</table>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <thead> tag is used to group header content in an HTML table.

The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The <thead> tag must be used in the following context: As a child of a <table> element, after any <caption>, and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.


Browser Support

Element
<thead> Yes Yes Yes Yes Yes

Tips and Notes

Note: The <thead> element must have one or more <tr> tags inside.

Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.



Global Attributes

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


Event Attributes

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


More Examples

Example

How to align content inside <thead> (with CSS):

<table style="width:100%">

 <thead style="text-align:left">

   <tr>

     <th>Month</th>

     <th>Savings</th>

   </tr>

 </thead>

 <tbody>

   <tr>

     <td>January</td>

     <td>$100</td>

   </tr>

   <tr>

     <td>February</td>

     <td>$80</td>

   </tr>

 </tbody>

</table>

Try it Yourself »

Example

How to vertical align content inside <thead> (with CSS):

<table style="width:50%;">

 <thead style="vertical-align:bottom">

   <tr style="height:100px">

     <th>Month</th>

     <th>Savings</th>

   </tr>

 </thead>

  <tbody>

   <tr>

     <td>January</td>

     <td>$100</td>

   </tr>

   <tr>

     <td>February</td>

     <td>$80</td>

   </tr>

 </tbody>

</table>

Try it Yourself »


Default CSS Settings

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

thead {

  display: table-header-group;

  vertical-align: middle;

  border-color: inherit;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <time> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

How to define a time and a date:

<p>We open at <time>10:00</time> every morning.</p>


<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

Try it Yourself »


Definition and Usage

The <time> tag defines a human-readable date/time.

This element can also be used to encode dates and times in a machine-readable way so that user agents can offer to add birthday reminders or scheduled events to the user's calendar, and search engines can produce smarter search results.


Browser Support

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

Element
<time> 62.0 18.0 22.0 7.0 49.0

Attributes

Attribute Value Description
datetime datetime Represent a machine-readable date/time of the <time> element

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Time Object


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <title> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Define a title for your HTML document:

<!DOCTYPE html>

<html>


<head>

 <title>HTML Elements Reference</title>

</head>


<body>

The content of the document......

</body>


</html>

Try it Yourself »


Definition and Usage

The <title> tag is required in all HTML documents and it defines the title of the document.

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results

Here are some tips for creating good titles:

  • Go for a longer, descriptive title (avoid one- or two-word titles)
  • Search engines will display about 50-60 characters of the title, so try not to have titles longer than that
  • Do not use just a list of words as the title (this may reduce the page's position in search results)

So, try to make the title as accurate and meaningful as possible!

Note: You can NOT have more than one <title> element in an HTML document.



Browser Support

Element
<title> Yes Yes Yes Yes Yes

Global Attributes

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


Related Pages

HTML tutorial: HTML Head

HTML DOM reference: Title Object


Default CSS Settings

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

title {

  display: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <tr> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A simple HTML table, containing two columns and two rows:

<table>

 <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 <tr> tag defines a row in an HTML table.

A <tr> element contains one or more <th> or <td> elements.


Browser Support

Element
<tr> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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



More Examples

Example

How to align content inside <tr> (with CSS):

<table style="width:100%">

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr style="text-align:right">

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to add background-color to a table row (with CSS):

<table>

 <tr style="background-color:#FF0000">

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to vertical align content inside <tr> (with CSS):

<table style="height:200px">

 <tr  style="vertical-align:top">

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr style="vertical-align:bottom">

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to create table headers:

<table>

 <tr>

   <th>Name</th>

   <th>Email</th>

   <th>Phone</th>

 </tr>

 <tr>

   <td>John Doe</td>

   <td>john.doe@example.com</td>

   <td>123-45-678</td>

 </tr>

</table>

Try it Yourself »

Example

How to create 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>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

</table>

Try it Yourself »

Example

How to define table cells that span more than one row or one column:

<table>

 <tr>

   <th>Name</th>

   <th>Email</th>

   <th colspan="2">Phone</th>

 </tr>

 <tr>

   <td>John Doe</td>

   <td>john.doe@example.com</td>

   <td>123-45-678</td>

   <td>212-00-546</td>

 </tr>

</table>

Try it Yourself »


Related Pages

HTML tutorial: HTML Tables

HTML DOM reference: TableRow object

CSS Tutorial: Styling Tables


Default CSS Settings

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

tr {

 display: table-row;

  vertical-align: inherit;

  border-color: inherit;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <tr> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A simple HTML table, containing two columns and two rows:

<table>

 <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 <tr> tag defines a row in an HTML table.

A <tr> element contains one or more <th> or <td> elements.


Browser Support

Element
<tr> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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



More Examples

Example

How to align content inside <tr> (with CSS):

<table style="width:100%">

 <tr>

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr style="text-align:right">

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to add background-color to a table row (with CSS):

<table>

 <tr style="background-color:#FF0000">

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr>

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to vertical align content inside <tr> (with CSS):

<table style="height:200px">

 <tr  style="vertical-align:top">

   <th>Month</th>

   <th>Savings</th>

 </tr>

 <tr style="vertical-align:bottom">

   <td>January</td>

   <td>$100</td>

 </tr>

</table>

Try it Yourself »

Example

How to create table headers:

<table>

 <tr>

   <th>Name</th>

   <th>Email</th>

   <th>Phone</th>

 </tr>

 <tr>

   <td>John Doe</td>

   <td>john.doe@example.com</td>

   <td>123-45-678</td>

 </tr>

</table>

Try it Yourself »

Example

How to create 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>

 <tr>

   <td>February</td>

   <td>$80</td>

 </tr>

</table>

Try it Yourself »

Example

How to define table cells that span more than one row or one column:

<table>

 <tr>

   <th>Name</th>

   <th>Email</th>

   <th colspan="2">Phone</th>

 </tr>

 <tr>

   <td>John Doe</td>

   <td>john.doe@example.com</td>

   <td>123-45-678</td>

   <td>212-00-546</td>

 </tr>

</table>

Try it Yourself »


Related Pages

HTML tutorial: HTML Tables

HTML DOM reference: TableRow object

CSS Tutorial: Styling Tables


Default CSS Settings

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

tr {

 display: table-row;

  vertical-align: inherit;

  border-color: inherit;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <track> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A video with two subtitle tracks:

<video width="320" height="240" controls>

 <source src="forrest_gump.mp4" type="video/mp4">

 <source src="forrest_gump.ogg" type="video/ogg">

 <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">

 <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">

</video>


Definition and Usage

The <track> tag specifies text tracks for media elements (<audio> and <video>).

This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.


Browser Support

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

Element
<track> 23.0 10.0 31.0 6.0 12.1

Optional Attributes

Attribute Value Description
default default Specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate
kind captions

chapters

descriptions

metadata

subtitles

Specifies the kind of text track
label text Specifies the title of the text track
src URL Required. Specifies the URL of the track file
srclang language_code Specifies the language of the track text data (required if kind="subtitles")

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Video

HTML tutorial: HTML Audio

HTML DOM reference: Track Object


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <tt> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <tt> tag was used in HTML 4 to define teletype text.


What to Use Instead?

Consider the <kbd> element (for keyboard input), the <var> element (for variables), the <code> element (for computer code), the <samp> element (for computer output), or use CSS instead.

Example

Define a teletype/monospace font for a <p> element (with CSS):

<p style="font-family:'Lucida Console', monospace">This text is monospace text.</p>

Try it Yourself »

In our CSS tutorial you can find more details about specifying the type of font in a document.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <u> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Underline a misspelled word with the <u> tag:

<p>This is a <u>parragraph</u>.</p>

Try it Yourself »


Definition and Usage

The <u> tag represents some text that should be stylistically different from normal text, such as misspelled words or proper nouns in Chinese.

Tip: Avoid using the <u> element where it could be confused for a hyperlink!


Browser Support

Element
<u> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Underline Object


Default CSS Settings

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

Example

u {

  text-decoration: underline;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <ul> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An unordered HTML list:

<ul>

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ul>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

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

Use the <ul> tag together with the <li> tag to create unordered lists.


Browser Support

Element
<ul> Yes Yes Yes Yes Yes

Tips and Notes

Tip: Use CSS to style lists. Read more in our CSS tutorial: Styling Lists.

Tip: To create ordered lists, use the <ol> tag.


Global Attributes

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


Event Attributes

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



More Examples

Example

Expand and reduce line-height in lists (with CSS):

<ul style="line-height:180%">

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ul>


<ul style="line-height:80%">

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ul>

Try it Yourself »

Example

Set different list style types (with CSS):

<ul style="list-style-type:square">

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ul>


<ul style="list-style-type:circle">

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ul>

Try it Yourself »

In our CSS tutorial you can find more details about the list-style-type property.

Example

Create a list inside a list (a nested list):

<ul>

 <li>Coffee</li>

 <li>Tea

   <ul>

     <li>Black tea</li>

     <li>Green tea</li>

   </ul>

 </li>

 <li>Milk</li>

</ul>

Try it Yourself »

Example

Create a more complex nested list:

<ul>

 <li>Coffee</li>

 <li>Tea

   <ul>

     <li>Black tea</li>

     <li>Green tea

       <ul>

         <li>China</li>

         <li>Africa</li>

       </ul>

     </li>

   </ul>

 </li>

 <li>Milk</li>

</ul>

Try it Yourself »


Related Pages

HTML tutorial: HTML Lists

HTML DOM reference: Ul Object

CSS Tutorial: Styling Lists


Default CSS Settings

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

Example

ul {

 display: block;

  list-style-type: disc;

  margin-top: 1em;

  margin-bottom: 1 em;

  margin-left: 0;

 margin-right: 0;

 padding-left: 40px;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <var> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Format text in a document:

<var>Variable</var>

Try it Yourself »


Definition and Usage

The <var> tag is a phrase tag. It defines a variable.

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
<var> Yes Yes Yes Yes Yes


Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Variable Object


Default CSS Settings

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

Example

var {

  font-style: italic;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <video> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Play a video:

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


Definition and Usage

The <video> tag specifies video, such as a movie clip or other video streams.

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES

from Firefox 21

from Firefox 30 for Linux

YES YES
Safari YES NO NO
Opera YES

From Opera 25

YES YES
  • MP4 = MPEG 4 files with H264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec

MIME Types for Video Formats

Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg


Browser Support

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

Element
<video> 4.0 9.0 3.5 3.1 11.5

Tips and Notes

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

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


Optional Attributes

Attribute Value Description
autoplay autoplay Specifies that the video will start playing as soon as it is ready
controls controls Specifies that video controls should be displayed (such as a play/pause button etc).
height pixels Sets the height of the video player
loop loop Specifies that the video will start over again, every time it is finished
muted muted Specifies that the audio output of the video should be muted
poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play button
preload auto

metadata

none

Specifies if and how the author thinks the video should be loaded when the page loads
src URL Specifies the URL of the video file
width pixels Sets the width of the video player

Global Attributes

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


Event Attributes

The <video> 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 <wbr> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A text with word break opportunities:

<p>

To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.

</p>

Try it Yourself »


Definition and Usage

The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.

Tip: When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word break opportunities.


Browser Support

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

Element
<wbr> 1.0 12.0 3.0 4.0 11.7

Global Attributes

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


Event Attributes

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


❮ PreviousComplete HTML ReferenceNext ❯