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

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

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


HTML <label> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Three radio buttons with labels:

<form action="/action_page.php">

 <label for="male">Male</label>

 <input type="radio" name="gender" id="male" value="male"><br>

 <label for="female">Female</label>

 <input type="radio" name="gender" id="female" value="female"><br>

 <label for="other">Other</label>

 <input type="radio" name="gender" id="other" value="other"><br><br>

 <input type="submit" value="Submit">

</form>

Try it Yourself »


Definition and Usage

The <label> tag defines a label for several elements:

  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="search">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <meter>
  • <progress>
  • <select>
  • <textarea>

Proper use of labels with the elements above will benefit:

  • Screen reader users (will read out loud the label, when the user is focused on the element)
  • Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area).

The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.


Browser Support

Element
<label> Yes Yes Yes Yes Yes

Tips and Notes

Tip: A label is bound to an element either by using the "for" attribute, or by placing the element inside the <label> element.



Attributes

Attribute Value Description
for element_id Specifies which form element a label is bound to
form form_id Specifies which form the label belongs to

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Label Object


Default CSS Settings

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

Example

label {

  cursor: default;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <legend> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Group related elements in a form:

<form action="/action_page.php">

 <fieldset>

   <legend>Personalia:</legend>

   <label for="fname">First name:</label>

   <input type="text" id="fname" name="fname"><br><br>

   <label for="lname">Last name:</label>

   <input type="text" id="lname" name="lname"><br><br>

   <label for="email">Email:</label>

   <input type="email" id="email" name="email"><br><br>

   <label for="birthday">Birthday:</label>

   <input type="date" id="birthday" name="birthday"><br><br>

   <input type="submit" value="Submit">

 </fieldset>

</form>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

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


Browser Support

Element
<legend> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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



More Examples

Example

Let the fieldset caption float to the right (with CSS):

<form action="/action_page.php">

 <fieldset>

   <legend style="float:right">Personalia:</legend>

   <label for="fname">First name:</label>

   <input type="text" id="fname" name="fname"><br><br>

   <label for="lname">Last name:</label>

   <input type="text" id="lname" name="lname"><br><br>

   <label for="email">Email:</label>

   <input type="email" id="email" name="email"><br><br>

   <label for="birthday">Birthday:</label>

   <input type="date" id="birthday" name="birthday"><br><br>

   <input type="submit" value="Submit">

 </fieldset>

</form>

Try it Yourself »


Related Pages

HTML DOM reference: Legend Object


Default CSS Settings

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

Example

legend {

  display: block;

  padding-left: 2px;

 padding-right: 2px;

 border: none;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <li> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

One ordered (<ol>) and one unordered (<ul>) HTML list:

<ol>

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ol>


<ul>

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ul>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <li> tag defines a list item.

The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).


Browser Support

Element
<li> Yes Yes Yes Yes Yes

Tips and Notes

Tip: Use CSS to define the type of list and to style lists.


Attributes

Attribute Value Description
value number Specifies the value of a list item. The following list items will increment from that number (only for <ol> lists)

Global Attributes

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


Event Attributes

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



More Examples

Example

Set different list style types (with CSS):

<ol>

 <li>Coffee</li>

 <li style="list-style-type:lower-alpha">Tea</li>

 <li>Milk</li>

</ol>


<ul>

 <li>Coffee</li>

 <li style="list-style-type:square">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: Li Object

CSS Tutorial: Styling Lists


Default CSS Settings

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

li {

 display: list-item;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <link> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Link to an external style sheet:

<head>

 <link rel="stylesheet" type="text/css" href="theme.css">

</head>

Try it Yourself »


Definition and Usage

The <link> tag defines a link between a document and an external resource.

The <link> tag is used to link to external style sheets.


Browser Support

When used for style sheets, the <link> tag is supported in all major browsers. No real support for anything else.

Element
<link> Yes Yes Yes Yes Yes

Note: The <link> element is an empty element, it contains attributes only.

Note: This element goes only in the head section, but it can appear any number of times.



Attributes

Attribute Value Description
crossorigin anonymous

use-credentials

Specifies how the element handles cross-origin requests
href URL Specifies the location of the linked document
hreflang language_code Specifies the language of the text in the linked document
media media_query Specifies on what device the linked document will be displayed
referrerpolicy no-referrer

no-referrer-when-downgrade

origin

origin-when-cross-origin

unsafe-url

Specifies which referrer to use when fetching the resource
rel alternate

author

dns-prefetch

help

icon

license

next

pingback

preconnect

prefetch

preload

prerender

prev

search

stylesheet

Required. Specifies the relationship between the current document and the linked document
sizes HeightxWidth

any

Specifies the size of the linked resource. Only for rel="icon"
title Defines a preferred or an alternate stylesheet
type media_type Specifies the media type of the linked document

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Styles

HTML DOM reference: Link Object


Default CSS Settings

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

link {

 display: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <main> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

<main>

 <h2>Web Browsers</h2>

 <p>Chrome, Firefox, and Edge are the most used browsers today.</p>


 <article>

   <h3>Google Chrome</h3>

   <p>Chrome is a free, open-source web browser developed by Google, released in 2008.</p>

 </article>


 <article>

   <h3>Microsoft Edge</h3>

   <p>Edge is a free web browser from Microsoft, released in 1995.</p>

 </article>


 <article>

   <h3>Mozilla Firefox</h3>

   <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>

 </article>

</main>

Try it Yourself »


Definition and Usage

The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.


Browser Support

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

Element
<main> 26.0 12.0 21.0 7.0 16.0

Global Attributes

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


Event Attributes

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


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <map> 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 <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.

The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.


Browser Support

Element
<map> Yes Yes Yes Yes Yes


Attributes

Attribute Value Description
name mapname Required. Specifies the name of an image-map

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Map Object


Default CSS Settings

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

map {

 display: inline;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <mark> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Highlight parts of a text:

<p>Do not forget to buy <mark>milk</mark> today.</p>

Try it Yourself »


Definition and Usage

The <mark> tag defines marked text.

Use the <mark> tag if you want to highlight parts of your text.


Browser Support

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

Element
<mark> 6.0 9.0 4.0 5.0 11.1

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Mark Object


Default CSS Settings

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

Example

mark {

  background-color: yellow;

  color: black;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <meter> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Use the meter element to measure data within a given range (a gauge):

<label for="disk_c">Disk usage C:</label>

<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>


<label for="disk_d">Disk usage D:</label>

<meter id="disk_d" value="0.6">60%</meter>

Try it Yourself »


Definition and Usage

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

Examples: Disk usage, the relevance of a query result, etc.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

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


Browser Support

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

Element
<meter> 8.0 13.0 16.0 6.0 11.5


Attributes

Attribute Value Description
form form_id Specifies which form the <meter> element belongs to
high number Specifies the range that is considered to be a high value
low number Specifies the range that is considered to be a low value
max number Specifies the maximum value of the range
min number Specifies the minimum value of the range. Default value is 0
optimum number Specifies what value is the optimal value for the gauge
value number Required. Specifies the current value of the gauge

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Meter Object


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <nav> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A set of navigation links:

<nav>

 <a href="/html/">HTML</a> |

 <a href="/css/">CSS</a> |

 <a href="/js/">JavaScript</a> |

 <a href="/jquery/">jQuery</a>

</nav>

Try it Yourself »


Definition and Usage

The <nav> tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.


Browser Support

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

Element
<nav> 5.0 9.0 4.0 5.0 11.1


Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Nav Object


Default CSS Settings

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

nav {

 display: block;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <noframes> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <noframes> tag was used in HTML 4 to act as a fallback tag for browsers that did not support frames.


What to Use Instead?

Example

Use the <iframe> tag to embed another document within the current HTML document:

<iframe src="https://www.w3schools.com"></iframe>

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <noscript> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Use of the <noscript> tag:

<script>

document.write("Hello World!")

</script>

<noscript>Your browser does not support JavaScript!</noscript>

Try it Yourself »


Definition and Usage

The <noscript> tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script.

The <noscript> element can be used in both <head> and <body>. When used inside <head>, the <noscript> element must contain only <link>, <style>, and <meta> elements.

The content inside the <noscript> element will be displayed if scripts are not supported, or are disabled in the user's browser.


Browser Support

Element
<noscript> Yes Yes Yes Yes Yes

Tips and Notes

Tip: It is also a good practice to use the comment tag to "hide" scripts from browsers without support for client-side scripts (so they don't show them as plain text):

<script>


</script>



Global Attributes

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


Related Pages

HTML tutorial: HTML Scripts


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <object> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An embedded image:

<object data="pic_trulli.jpg" width="300" height="200">

Try it Yourself »

Example

An embedded HTML page:

<object data="snippet.html" width="500" height="200">

Try it Yourself »

Example

An embedded video:

<object data="video.mp4" width="400" height="300">

Try it Yourself »


Definition and Usage

The <object> tag defines a container for an external resource.

The external resource can be a web page, a picture, a media player, or a plug-in application.

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

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

To embed video or audio, it is better to use the <video> and <audio> tags.


Browser Support

Element
<object> Yes Yes Yes Yes Yes

Plug-ins

The <object> tag was originally designed to embed browser 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

Warning !

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

ActiveX controls are no longer supported in any browser.

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

Tips and Notes

Any text between the <object> and </object> is an alternate text, for browsers that do not support embedded objects.



Attributes

Attribute Value Description
data URL Specifies the URL of the resource to be used by the object
form form_id Specifies which form the object belongs to
height pixels Specifies the height of the object
name name Specifies a name for the object
type media_type Specifies the media type of data specified in the data attribute
usemap #mapname Specifies the name of a client-side image map to be used with the object
width pixels Specifies the width of the object

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Object Element

HTML DOM reference: Object Object


Default CSS Settings

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

object:focus {

 outline: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <ol> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Two different ordered lists (the first list starts at 1, and the second starts at 50):

<ol>

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ol>


<ol start="50">

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ol>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

Use the <li> tag to define list items.


Browser Support

Element
<ol> Yes Yes Yes Yes Yes

Tips and Notes

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

Tip: For unordered list, use the <ul> tag.



Attributes

Attribute Value Description
reversed reversed Specifies that the list order should be descending (9,8,7...)
start number Specifies the start value of an ordered list
type 1

A

a

I

i

Specifies the kind of marker to use in the list

Global Attributes

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


Event Attributes

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


More Examples

Example

Reduce and expand line-height in lists (with CSS):

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

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ol>


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

 <li>Coffee</li>

 <li>Tea</li>

 <li>Milk</li>

</ol>

Try it Yourself »


Related Pages

HTML tutorial: HTML Lists

HTML DOM reference: Ol Object

CSS Tutorial: Styling Lists


Default CSS Settings

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

Example

ol {

 display: block;

  list-style-type: decimal;

  margin-top: 1em;

  margin-bottom: 1em;

 margin-left: 0;

  margin-right: 0;

  padding-left: 40px;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <optgroup> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Group related options with <optgroup> tags:

<label for="cars">Choose a car:</label>

<select id="cars">

 <optgroup label="Swedish Cars">

   <option value="volvo">Volvo</option>

   <option value="saab">Saab</option>

 </optgroup>

 <optgroup label="German Cars">

   <option value="mercedes">Mercedes</option>

   <option value="audi">Audi</option>

 </optgroup>

</select>

Try it Yourself »


Definition and Usage

The <optgroup> tag is used to group related options in a drop-down list.

If you have a long list of options, groups of related options are easier to handle for a user.


Browser Support

Element
<optgroup> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
disabled disabled Specifies that an option-group should be disabled
label text Specifies a label for an option-group

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: OptionGroup Object


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <option> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A drop-down list with four options:

<label for="cars">Choose a car:</label>


<select id="cars">

 <option value="volvo">Volvo</option>

 <option value="saab">Saab</option>

 <option value="opel">Opel</option>

 <option value="audi">Audi</option>

</select>

Try it Yourself »


Definition and Usage

The <option> tag defines an option in a select list.

<option> elements go inside a <select> or <datalist> element.


Browser Support

Element
<option> Yes Yes Yes Yes Yes

Tips and Notes

Note: The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server on form submission.

Tip: If you have a long list of options, you can group related options with the <optgroup> tag.



Attributes

Attribute Value Description
disabled disabled Specifies that an option should be disabled
label text Specifies a shorter label for an option
selected selected Specifies that an option should be pre-selected when the page loads
value text Specifies the value to be sent to a server

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Option Object


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <output> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Perform a calculation and show the result in an <output> element:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

 <input type="range" id="a" value="50">100

  +<input type="number" id="b" value="50">

  =<output name="x" for="a b"></output>

</form>

Try it Yourself »


Definition and Usage

The <output> tag represents the result of a calculation (like one performed by a script).


Browser Support

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

Element
<output> 10.0 13.0 4.0 5.1 11.0

Attributes

Attribute Value Description
for element_id Specifies the relationship between the result of the calculation, and the elements used in the calculation
form form_id Specifies which form the output element belongs to
name name Specifies a name for the output element


Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Output Object


Default CSS Settings

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

output {

 display: inline;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <p> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A paragraph is marked up as follows:

<p>This is some text in a paragraph.</p>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <p> tag defines a paragraph.

Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).


Browser Support

Element
<p> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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



More Examples

Example

Align text in a paragraph (with CSS):

<p style="text-align:right">This is some text in a paragraph.</p>

Try it Yourself »

Example

More on paragraphs:

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>

Try it Yourself »

Example

Poem problems in HTML:

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

Try it Yourself »


Related Pages

HTML tutorial: HTML Paragraphs

HTML DOM reference: Paragraph Object


Default CSS Settings

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

Example

p {

  display: block;

  margin-top: 1em;

  margin-bottom: 1em;

  margin-left: 0;

 margin-right: 0;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <param> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Set the "autoplay" parameter to "true", so the sound will start playing as soon as the page loads:

<object data="horse.wav">

 <param name="autoplay" value="true">

</object>

Try it Yourself »


Definition and Usage

The <param> tag is used to define parameters for plugins embedded with an <object> element.

Tip: HTML also includes two other elements for playing audio or video: <audio> and <video>.


Browser Support

The <param> tag is supported in all major browsers. However, the file format defined in <object> may not be supported in all browsers.

Element
<param> Yes Yes Yes Yes Yes


Attributes

Attribute Value Description
name name Specifies the name of a parameter
value value Specifies the value of the parameter

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Parameter Object


Default CSS Settings

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

param {

 display: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <picture> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

How to use the <picture> tag:

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


Definition and Usage

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

The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

The <picture> element holds two different tags: one or more <source> tags and one <img> tag.

The <source> element has the following attributes:

  • srcset (required) - defines the URL of the image to show
  • media - accepts any valid media query that would normally be defined in a CSS
  • sizes - defines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor
  • type - defines the MIME type

The browser will use the attribute values to load the most appropriate image. The browser will use the first <source> element with a matching hint and ignore any following <source> tags.

The <img> element is required as the last child tag of the <picture> declaration block. The <img> element is used to provide backward compatibility for browsers that do not support the <picture> element, or if none of the <source> tags matched.

The <picture> element works similar to the <video> and <audio> elements. You set up different sources, and the first source that fits the preferences is the one being used.



Browser Support

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

Element
<picture> 38.0 13.0 38.0 9.1 25.0

Global Attributes

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


Event Attributes

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


Related Pages

CSS Tutorial: CSS Responsive Design - Images


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <pre> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Preformatted text:

<pre>

Text in a pre element

is displayed in a fixed-width

font, and it preserves

both      spaces and

line breaks

</pre>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.


Browser Support

Element
<pre> Yes Yes Yes Yes Yes

Tips and Notes

Tip: Use the <pre> element when displaying text with unusual formatting, or some sort of computer code.



Global Attributes

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


Event Attributes

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


More Examples

Example

How to create a pre-formatted text with a fixed width (with CSS):

<div style="width:200px;overflow:auto">

<pre>This is a pre with a fixed width. It will use as much space as specified.</pre>

</div>

Try it Yourself »


Related Pages

HTML Tutorial: HTML Text Formatting

HTML DOM reference: Pre Object


Default CSS Settings

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

Example

pre {

  display: block;

  font-family: monospace;

  white-space: pre;

 margin: 1em 0;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <progress> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Show a progress bar:

<label for="file">Downloading progress:</label>

<progress id="file" value="32" max="100"> 32% </progress>

Try it Yourself »


Definition and Usage

The <progress> tag represents the progress of a task.

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


Browser Support

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

Element
<progress> 8.0 10.0 16.0 6.0 11.0

Tips and Notes

Tip: Use the <progress> tag in conjunction with JavaScript to display the progress of a task.

Note: The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.



Attributes

Attribute Value Description
max number Specifies how much work the task requires in total. Default value is 1
value number Specifies how much of the task has been completed

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Progress Object


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <q> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Mark up a short quotation:

<p>WWF's goal is to:

<q>Build a future where people live in harmony with nature.</q>

We hope they succeed.</p>

Try it Yourself »


Definition and Usage

The <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.


Browser Support

Element
<q> Yes Yes Yes Yes Yes

Tips and Notes

Tip: Use <blockquote> (instead of <q>) to mark up a section that is quoted from another source.


Attributes

Attribute Value Description
cite URL Specifies the source URL of the quote


Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Quote Object


Default CSS Settings

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

Example

q {

 display: inline;

}


q:before {

  content: open-quote;

}


q:after {

 content: close-quote;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <rp> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A ruby annotation:

<ruby>

漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>

</ruby>

Try it Yourself »


Definition and Usage

The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations.

Use <rp> together with <ruby> and <rt>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.


Browser Support

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

Element
<rp> 5.0 5.5 38.0 5.0 15.0

Global Attributes

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


Event Attributes

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


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <rt> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A ruby annotation:

<ruby>

漢 <rt> ㄏㄢˋ </rt>

</ruby>

Try it Yourself »


Definition and Usage

The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.

Use <rt> together with <ruby> and <rp>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.


Browser Support

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

Element
<rt> 5.0 5.5 38.0 5.0 15.0

Global Attributes

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


Event Attributes

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


Default CSS Settings

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

rt {

 line-height: normal;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <ruby> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A ruby annotation:

<ruby>

漢 <rt> ㄏㄢˋ </rt>

</ruby>

Try it Yourself »


Definition and Usage

The <ruby> tag specifies a ruby annotation.

A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. This kind of annotation is often used in Japanese publications.

Use <ruby> together with <rt> and <rp>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that do not support ruby annotations.


Browser Support

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

Element
<ruby> 5.0 5.5 38.0 5.0 15.0

Global Attributes

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


Event Attributes

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


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <s> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Mark up text that is no longer correct:

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

<p>My new car is silver.</p>

Try it Yourself »


Definition and Usage

The <s> tag specifies text that is no longer correct, accurate or relevant.

The <s> tag should not be used to define replaced or deleted text, use the <del> tag to define replaced or deleted text.


Browser Support

Element
<s> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: S Object


Default CSS Settings

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

Example

s {

  text-decoration: line-through;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <samp> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Format text in a document:

<samp>Sample output from a computer program</samp>

Try it Yourself »


Definition and Usage

The <samp> tag is a phrase tag. It defines sample output from a computer program.

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


Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Samp Object


Default CSS Settings

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

Example

samp {

 font-family: monospace;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <script> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Write "Hello JavaScript!" with JavaScript:

<script>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

Try it Yourself »


Definition and Usage

The <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains scripting statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

Tip: If you want to learn JavaScript, visit our JavaScript Tutorial.


Browser Support

Element
<script> Yes Yes Yes Yes Yes

Tips and Notes

Note: If the "src" attribute is present, the <script> element must be empty.

Tip: Also look at the <noscript> element for users that have disabled scripts in their browser, or have a browser that doesn't support client-side scripting.

Note: There are several ways an external script can be executed:

  • If async="async": The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
  • If async is not present and defer="defer": The script is executed when the page has finished parsing
  • If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page


Differences Between HTML and XHTML

In XHTML, the content inside scripts is declared as #PCDATA (instead of CDATA), which means that entities will be parsed.

This means that in XHTML, all special characters should be encoded, or all content should be wrapped inside a CDATA section:

<script type="text/javascript">

//<![CDATA[

var i = 10;

if (i < 5) {

 // some code

}

//]]>

</script>


Attributes

Attribute Value Description
async async Specifies that the script is executed asynchronously (only for external scripts)
charset charset Specifies the character encoding used in an external script file
defer defer Specifies that the script is executed when the page has finished parsing (only for external scripts)
src URL Specifies the URL of an external script file
type media_type Specifies the media type of the script

Global Attributes

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


Related Pages

HTML tutorial: HTML Scripts

HTML DOM reference: Script Object

JavaScript Tutorial: Learn JavaScript


Default CSS Settings

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

script {

  display: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <section> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A section in a document, explaining what WWF is:

<section>

 <h2>WWF</h2>

 <p>The World Wide Fund for Nature (WWF) is....</p>

</section>

Try it Yourself »


Definition and Usage

The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.


Browser Support

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

Element
<section> 5.0 9.0 4.0 5.0 11.5

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Section Object


Default CSS Settings

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

Example

section {

 display: block;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <select> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Create a drop-down list with four options:

<label for="cars">Choose a car:</label>


<select id="cars">

 <option value="volvo">Volvo</option>

 <option value="saab">Saab</option>

 <option value="mercedes">Mercedes</option>

 <option value="audi">Audi</option>

</select>

Try it Yourself »


Definition and Usage

The <select> element is used to create a drop-down list.

The <select> element is a form control and can be used in a form to collect user input.

The <option> tags inside the <select> element define the available options in the list.

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


Browser Support

Element
<select> Yes Yes Yes Yes Yes


Attributes

Attribute Value Description
autofocus autofocus Specifies that the drop-down list should automatically get focus when the page loads
disabled disabled Specifies that a drop-down list should be disabled
form form_id Defines which form the drop-down list belongs to
multiple multiple Specifies that multiple options can be selected at once
name name Defines a name for the drop-down list
required required Specifies that the user is required to select a value before submitting the form
size number Defines the number of visible options in a drop-down list

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Select Object

CSS Tutorial: Styling Forms


Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯