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

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

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


HTML <dd> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A description list, with terms and descriptions:

<dl>

 <dt>Coffee</dt>

 <dd>Black hot drink</dd>

 <dt>Milk</dt>

 <dd>White cold drink</dd>

</dl>

Try it Yourself »


Definition and Usage

The <dd> tag is used to describe a term/name in a description list.

The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names).

Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.


Browser Support

Element
<dd> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Lists

HTML DOM reference: DD Object


Default CSS Settings

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

Example

dd {

  display: block;

  margin-left: 40px;

}

Try it Yourself »

❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <del> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A text with a deleted part, and a new, inserted part:

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

Try it Yourself »


Definition and Usage

The <del> tag defines text that has been deleted from a document.


Browser Support

Element
<del> Yes Yes Yes Yes Yes

Tips and Notes

Tip: Also look at the <ins> tag to markup inserted text. Browsers will normally strike a line through deleted text and underline inserted text.


Attributes

Attribute Value Description
cite URL Specifies a URL to a document that explains the reason why the text was deleted
datetime YYYY-MM-DDThh:mm:ssTZD Specifies the date and time of when the text was deleted

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Del Object


Default CSS Settings

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

Example

del {

  text-decoration: line-through;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <details> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Specify details that the user can view or hide on demand:

<details>

 <summary>Copyright 1999-2018.</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 <details> tag specifies additional details that the user can view or hide on demand.

The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.

The content of a <details> element should not be visible unless the open attribute is set.


Browser Support

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

Element
<details> 12.0 79.0 49.0 6.0 15.0

Tips and Notes

Tip: The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details.


Attributes

Attribute Value Description
open open Specifies that the details should be visible (open) to the user

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Details Object


Default CSS Settings

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

details {

  display: block;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <dfn> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Mark up the defining instance of a term:

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

Try it Yourself »


Definition and Usage

The <dfn> tag represents the defining instance of a term in HTML.

The defining instance is often the first use of a term in a document.

The nearest parent of the <dfn> tag must also contain the definition/explanation for the term.

The term inside the <dfn> tag can be any of the following:

1. The content of the <dfn> element (without a title attribute), like this:

Example

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

Try it Yourself »

2. Or the title attribute of the <dfn> tag, like this:

Example

<p><dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.</p>

Try it Yourself »

3. Or the title attribute of an <abbr> tag inside the <dfn> element, like this:

Example

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the standard markup language for creating web pages.</p>

Try it Yourself »

4. Or, you can also add an id attribute to the <dfn> element. Then, whenever a term is used, it can refer back to the definition using an <a> tag, like this:

Example

<p><dfn id="html-def">HTML</dfn> is the standard markup language for creating web pages.</p>


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

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

<p>Learn <a href="#html-def">HTML</a> now.</p>

Try it Yourself »



Browser Support

Element
<dfn> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Quotation Elements

HTML DOM reference: DFN Object


Default CSS Settings

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

Example

dfn {

  font-style: italic;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <dialog> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Using the <dialog> element:

<table>

<tr>

 <th>January <dialog open>This is an open dialog window</dialog></th>

 <th>February</th>

 <th>March</th>

</tr>

<tr>

 <td>31</td>

 <td>28</td>

 <td>31</td>

</tr>

</table>

Try it Yourself »


Definition and Usage

The <dialog> tag defines a dialog box or window.

The <dialog> element makes it easy to create popup dialogs and modals on a web page.


Browser Support

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

Element
<dialog> 37.0 79.0 53.0* Not supported 24.0

* Not supported by default, but can be enabled in about:config (set dom.dialog_element.enabled to true).


Attributes

Attribute Value Description
open open Specifies that the dialog element is active and that the user can interact with it

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Dialog Object


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <dir> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <dir> tag was used in HTML 4 to list directory titles.


What to Use Instead?

Example

Use <ul> to create a directory list:

<ul>

 <li>html</li>

 <li>xhtml</li>

 <li>css</li>

</ul>

Try it Yourself »

Example

Reduce line-height in a list (with CSS):

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

 <li>html</li>

 <li>xhtml</li>

 <li>css</li>

</ul>

Try it Yourself »

Tip: In our CSS tutorial you can find more details about styling lists.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <div> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A section in a document that will have a light blue background color:

<div style="background-color:lightblue">

 <h3>This is a heading</h3>

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

</div>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <div> tag defines a division or a section in an HTML document.

The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.


Browser Support

Element
<div> Yes Yes Yes Yes Yes

Tips and Notes

Tip: The <div> element is very often used together with CSS, to layout a web page.

Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.



Global Attributes

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


Event Attributes

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


More Examples

Example

Align text in a <div> element (with CSS):

<div style="text-align:center;border:1px solid red;">

This is some text in a div element!

</div>

Try it Yourself »


Related Pages

HTML tutorial: HTML Blocks

HTML tutorial: HTML Layout

HTML DOM reference: Div Object


Default CSS Settings

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

Example

div {

 display: block;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <dl> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A description list, with terms and descriptions:

<dl>

 <dt>Coffee</dt>

 <dd>Black hot drink</dd>

 <dt>Milk</dt>

 <dd>White cold drink</dd>

</dl>

Try it Yourself »


Definition and Usage

The <dl> tag defines a description list.

The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).


Browser Support

Element
<dl> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Lists

HTML DOM reference: DList Object


Default CSS Settings

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

Example

dl {

  display: block;

  margin-top: 1em;

  margin-bottom: 1em;

  margin-left: 0;

  margin-right: 0;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <dt> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A description list, with terms and descriptions:

<dl>

 <dt>Coffee</dt>

 <dd>Black hot drink</dd>

 <dt>Milk</dt>

 <dd>White cold drink</dd>

</dl>

Try it Yourself »


Definition and Usage

The <dt> tag defines a term/name in a description list.

The <dt> tag is used in conjunction with <dl> (defines a description list) and <dd> (describes each term/name).


Browser Support

Element
<dt> Yes Yes Yes Yes Yes

Global Attributes

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



Event Attributes

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


Related Pages

HTML tutorial: HTML Lists

HTML DOM reference: DT Object


Default CSS Settings

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

Example

dt {

  display: block;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <em> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Format text in a document:

<em>Emphasized text</em>

Try it Yourself »


Definition and Usage

The <em> tag is a phrase tag. It renders as emphasized 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
<em> Yes Yes Yes Yes Yes


Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Emphasized Object


Default CSS Settings

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

Example

em {

  font-style: italic;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <embed> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An embedded image:

<embed src="pic_trulli.jpg" width="300" height="200">

Try it Yourself »

Example

An embedded HTML page:

<embed src="snippet.html" width="500" height="200">

Try it Yourself »

Example

An embedded video:

<embed src="video.mp4" width="400" height="300">

Try it Yourself »


Definition and Usage

The <embed> 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 display a picture, it is better to use the <img> tag.

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

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


Browser Support

Element
<embed> Yes Yes Yes Yes Yes


Plug-ins

The <embed> 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 browsers.

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


Attributes

Attribute Value Description
height pixels Specifies the height of the embedded content
src URL Specifies the address of the external file to embed
type media_type Specifies the media type of the embedded content
width pixels Specifies the width of the embedded content

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Embed Object


Default CSS Settings

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

embed:focus {

 outline: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


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


Definition and Usage

The <fieldset> tag is used to group related elements in a form.

The <fieldset> tag draws a box around the related elements.


Browser Support

Element
<fieldset> Yes Yes Yes Yes Yes

Tips and Notes

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



Attributes

Attribute Value Description
disabled disabled Specifies that a group of related form elements should be disabled
form form_id Specifies which form the fieldset belongs to
name text Specifies a name for the fieldset

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Fieldset Object


Default CSS Settings

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

fieldset {

  display: block;

  margin-left: 2px;

  margin-right: 2px;

  padding-top: 0.35em;

  padding-bottom: 0.625em;

  padding-left: 0.75em;

  padding-right: 0.75em;

  border: 2px groove (internal value);

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <figcaption> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo:

<figure>

 <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">

 <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>

</figure>

Try it Yourself »


Definition and Usage

The <figcaption> tag defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or last child of the <figure> element.


Browser Support

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

Element
<figcaption> 8.0 9.0 4.0 5.1 11.0

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Figcaption Object


Default CSS Settings

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

figcaption {

  display: block;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <figure> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo:

<figure>

 <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">

 <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>

</figure>

Try it Yourself »


Definition and Usage

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.


Browser Support

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

Element
<figure> 8.0 9.0 4.0 5.1 11.0

Tips and Notes

Tip: The <figcaption> element is used to add a caption for the <figure> element.



Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Figure Object


Default CSS Settings

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

Example

figure {

  display: block;

  margin-top: 1em;

  margin-bottom: 1em;

  margin-left: 40px;

  margin-right: 40px;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <font> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.


What to Use Instead?

Example

Set the color of text (with CSS):

<p style="color:red">This is a paragraph.</p>

<p style="color:blue">This is another paragraph.</p>

Try it Yourself »

Example

Set the font of text (with CSS):

<p style="font-family:verdana">This is a paragraph.</p>

<p style="font-family:'Courier New'">This is another paragraph.</p>

Try it Yourself »

Example

Set the size of text (with CSS):

<p style="font-size:30px">This is a paragraph.</p>

<p style="font-size:11px">This is another paragraph.</p>

Try it Yourself »

In our CSS tutorial you can find more information about CSS Text and CSS Fonts.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <footer> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A footer section in a document:

<footer>

 <p>Posted by: Hege Refsnes</p>

 <p>Contact information: <a href="mailto:someone@example.com">

  someone@example.com</a>.</p>

</footer>

Try it Yourself »


Definition and Usage

The <footer> tag defines a footer for a document or section.

A <footer> element typically contains:

  • authorship information
  • copyright information
  • contact information
  • sitemap
  • back to top links
  • related documents

You can have several <footer> elements in one document.


Browser Support

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

Element
<footer> 5.0 9.0 4.0 5.0 11.1


Tips and Notes

Tip: Contact information inside a <footer> element should go inside an <address> tag.


Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Footer Object


Default CSS Settings

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

footer {

  display: block;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <form> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An HTML form with two input fields and one submit button:

<form action="/action_page.php" method="get">

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

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

</form>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <form> tag is used to create an HTML form for user input.

The <form> element can contain one or more of the following form elements:

  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>
  • <optgroup>
  • <fieldset>
  • <label>
  • <output>

Browser Support

Element
<form> Yes Yes Yes Yes Yes


Attributes

Attribute Value Description
accept-charset character_set Specifies the character encodings that are to be used for the form submission
action URL Specifies where to send the form-data when a form is submitted
autocomplete on

off

Specifies whether a form should have autocomplete on or off
enctype application/x-www-form-urlencoded

multipart/form-data

text/plain

Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method get

post

Specifies the HTTP method to use when sending form-data
name text Specifies the name of a form
novalidate novalidate Specifies that the form should not be validated when submitted
target _blank

_self

_parent

_top

Specifies where to display the response that is received after submitting the form

Global Attributes

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


Event Attributes

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


More Examples

Example

An HTML form with checkboxes:

<form action="/action_page.php" method="get">

 <input type="checkbox" name="vehicle1" value="Bike">

 <label for="vehicle1"> I have a bike</label><br>

 <input type="checkbox" name="vehicle2" value="Car">

 <label for="vehicle2"> I have a car</label><br>

 <input type="checkbox" name="vehicle3" value="Boat" checked>

 <label for="vehicle3"> I have a boat</label><br><br>

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

</form>

Try it Yourself »

Example

An HTML form with radiobuttons:

<form action="/action_page.php" method="get">

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

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

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

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

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

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

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

</form>

Try it Yourself »


Related Pages

HTML tutorial: HTML Forms and Input

HTML DOM reference: Form Object

CSS Tutorial: Styling Forms


Default CSS Settings

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

Example

form {

 display: block;

 margin-top: 0em;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <frame> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <frame> tag was used in HTML 4 to define one particular window (frame) within a <frameset>.


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 <frameset> Tag

❮ PreviousComplete HTML ReferenceNext ❯


Not Supported in HTML5.

The <frameset> tag was used in HTML 4 to define a frameset.


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 <h1> to <h6> Tags

❮ PreviousComplete HTML ReferenceNext ❯

Example

The six different HTML headings:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <h1> to <h6> tags are used to define HTML headings.

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


Browser Support

Element
<h1> - <h6> Yes Yes Yes Yes Yes

Global Attributes

The <h1> to <h6> tags also supports the Global Attributes in HTML.


Event Attributes

The <h1> to <h6> tags also supports the Event Attributes in HTML.



More Examples

Example

Set the alignment of headings (with CSS):

<h1 style="text-align:center">This is heading 1</h1>

<h2 style="text-align:left">This is heading 2</h2>

<h3 style="text-align:right">This is heading 3</h3>

<h4 style="text-align:justify">This is heading 4</h4>

Try it Yourself »


Related Pages

HTML tutorial: HTML Headings

HTML DOM reference: Heading Object


Default CSS Settings

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

Example

h1 {

  display: block;

  font-size: 2em;

  margin-top: 0.67em;

  margin-bottom: 0.67em;

  margin-left: 0;

  margin-right: 0;

  font-weight: bold;

}

Try it Yourself »

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

Example

h2 {

  display: block;

  font-size: 1.5em;

  margin-top: 0.83em;

  margin-bottom: 0.83em;

  margin-left: 0;

  margin-right: 0;

  font-weight: bold;

}

Try it Yourself »

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

Example

h3 {

 display: block;

 font-size: 1.17em;

  margin-top: 1em;

  margin-bottom: 1em;

  margin-left: 0;

  margin-right: 0;

  font-weight: bold;

}

Try it Yourself »

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

Example

h4 {

 display: block;

 font-size: 1em;

  margin-top: 1.33em;

  margin-bottom: 1.33em;

  margin-left: 0;

 margin-right: 0;

  font-weight: bold;

}

Try it Yourself »

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

Example

h5 {

  display: block;

  font-size: .83em;

  margin-top: 1.67em;

  margin-bottom: 1.67em;

  margin-left: 0;

  margin-right: 0;

  font-weight: bold;

}

Try it Yourself »

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

Example

h6 {

  display: block;

  font-size: .67em;

  margin-top: 2.33em;

  margin-bottom: 2.33em;

 margin-left: 0;

  margin-right: 0;

 font-weight: bold;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <head> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An HTML document, with a <title> tag inside the head section:

<!DOCTYPE html>

<html>

<head>

 <title>Title of the document</title>

</head>


<body>

The content of the document......

</body>


</html>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <head> element is a container for all the head elements.

The <head> element can include a title for the document, scripts, styles, meta information, and more.

The following elements can go inside the <head> element:

  • <title> (this element is required in an HTML document)
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>

Browser Support

Element
<head> Yes Yes Yes Yes Yes


Global Attributes

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


More Examples

Example

The <base> tag (used to specify a default URL and a default target for all links on a page) goes inside <head>:

<html>

<head>

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

</head>

<body>


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

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


</body>

</html>

Try it Yourself »

Example

The <style> tag (used to add style information to a page) goes inside <head>:

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

Example

The <link> tag (used to link to an external style sheet) goes inside <head>:

<html>

<head>

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

</head>

<body>


<h1>I am formatted with a linked style sheet</h1>

<p>Me too!</p>


</body>

</html>

Try it Yourself »


Related Pages

HTML tutorial: HTML Head

HTML DOM reference: Head Object


Default CSS Settings

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

head {

 display: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <header> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A header for an <article>:

<article>

 <header>

   <h1>Most important heading here</h1>

   <h2>Less important heading here</h2>

   <p>Some additional information here</p>

 </header>

 <p>Lorem Ipsum dolor set amet....</p>

</article>

Try it Yourself »


Definition and Usage

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

  • one or more heading elements (<h1> - <h6>)
  • logo or icon
  • authorship information

You can have several <header> elements in one document.

Note: A <header> tag cannot be placed within a <footer>, <address> or another <header> element.


Browser Support

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

Element
<header> 5.0 9.0 4.0 5.0 11.1

Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Header Object


Default CSS Settings

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

header {

 display: block;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <hr> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Use the <hr> tag to define a thematic change in the content:

<h1>HTML</h1>

<p>HTML is a language for describing web pages.....</p>


<hr>


<h1>CSS</h1>

<p>CSS defines how to display HTML elements.....</p>

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.


Browser Support

Element
<hr> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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



More Examples

Example

Align a <hr> element (with CSS):

<hr style="width:50%;text-align:left;margin-left:0">

Try it Yourself »

Example

A noshaded <hr> (with CSS):

<hr style="height:2px;border-width:0;color:gray;background-color:gray">

Try it Yourself »

Example

Set the height of a <hr> element (with CSS):

<hr style="height:30px">

Try it Yourself »

Example

Set the width of a <hr> element (with CSS):

<hr style="width:50%">

Try it Yourself »


Related Pages

HTML DOM reference: HR Object


Default CSS Settings

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

Example

hr {

  display: block;

 margin-top: 0.5em;

  margin-bottom: 0.5em;

  margin-left: auto;

  margin-right: auto;

 border-style: inset;

  border-width: 1px;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <html> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A simple HTML document:

<!DOCTYPE HTML>

<html>

<head>

<title>Title of the document</title>

</head>


<body>

The content of the document......

</body>


</html>

Try it Yourself »


Definition and Usage

The <html> tag tells the browser that this is an HTML document.

The <html> tag represents the root of an HTML document.

The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).


Browser Support

Element
<html> Yes Yes Yes Yes Yes


Attributes

Attribute Value Description
xmlns http://www.w3.org/1999/xhtml Specifies the XML namespace attribute (If you need your content to conform to XHTML)

Global Attributes

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


Related Pages

HTML tutorial: HTML Introduction

HTML DOM reference: HTML Object


Default CSS Settings

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

html {

  display: block;

}


html:focus {

 outline: none;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <i> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

Try it Yourself »


Definition and Usage

The <i> tag defines a part of text in an alternate voice or mood. The content of the <i> tag is usually displayed in italic.

The <i> tag can be used to indicate a technical term, a phrase from another language, a thought, or a ship name, etc.

Use the <i> element only when there is not a more appropriate semantic element, such as:

  • <em> (emphasized text)
  • <strong> (important text)
  • <mark> (marked/highlighted text)
  • <cite> (the title of a work)
  • <dfn> (a definition term)

Browser Support

Element
<i> Yes Yes Yes Yes Yes

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Italic Object


Default CSS Settings

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

Example

i {

 font-style: italic;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <iframe> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An inline frame is marked up as follows:

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

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.


Browser Support

Element
<iframe> Yes Yes Yes Yes Yes

Tips and Notes

Tip: Use CSS to style the <iframe> (even to include scrollbars).


Attributes

Attribute Value Description
allow Specifies a feature policy for the <iframe>
allowfullscreen true

false

Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method
allowpaymentrequest true

false

Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API
height pixels Specifies the height of an <iframe>. Default height is 150 pixels
name text Specifies the name of an <iframe>
referrerpolicy no-referrer

no-referrer-when-downgrade

origin

origin-when-cross-origin

same-origin

strict-origin

strict-origin-when-cross-origin

unsafe-url

Specifies how much/which referrer information that will be sent when processing the iframe attributes
sandbox allow-forms

allow-pointer-lock

allow-popups

allow-same-origin

allow-scripts

allow-top-navigation

Enables an extra set of restrictions for the content in an <iframe>
src URL Specifies the address of the document to embed in the <iframe>
srcdoc HTML_code Specifies the HTML content of the page to show in the <iframe>
width pixels Specifies the width of an <iframe>. Default width is 300 pixels


Global Attributes

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


Event Attributes

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


More Examples

Example

Float an iframe to the right (with CSS):

<iframe src="/default.asp" width="200" height="200" style="float:right"></iframe>

Try it Yourself »

Example

Add iframe borders (with CSS):

<iframe src="/default.asp" width="200" height="200" style="border:1px solid lightgrey;"></iframe>

Try it Yourself »


Related Pages

HTML tutorial: HTML Iframes

HTML DOM reference: IFrame Object


Default CSS Settings

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

iframe:focus {

 outline: none;

}


iframe[seamless] {

  display: block;

}


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <img> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

How to insert an image:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <img> tag defines an image in an HTML page.

The <img> tag has two required attributes: src and alt.

Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag. Try it »


Browser Support

Element
<img> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
alt text Specifies an alternate text for an image
crossorigin anonymous

use-credentials

Allow images from third-party sites that allow cross-origin access to be used with canvas
height pixels Specifies the height of an image
ismap ismap Specifies an image as a server-side image-map
longdesc URL Specifies a URL to a detailed description of an image
referrerpolicy no-referrer

no-referrer-when-downgrade

origin

origin-when-cross-origin

unsafe-url

Specifies which referrer to use when fetching the image
sizes sizes Specifies image sizes for different page layouts
src URL Specifies the URL of an image
srcset URL Specifies the URL of the image to use in different situations
usemap #mapname Specifies an image as a client-side image-map
width pixels Specifies the width of an image


Global Attributes

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


Event Attributes

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


More Examples

Example

Align image (with CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom">

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle">

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top">

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right">

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left">

Try it Yourself »

Example

Add image border (with CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid black">

Try it Yourself »

Example

Add left and right margins to image (with CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" align="middle" style="margin:0px 50px">

Try it Yourself »

Example

Add top and bottom margins to image (with CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" align="middle" style="margin:50px 0px">

Try it Yourself »

Example

How to insert images from another folder or from another web site:

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

<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32">

Try it Yourself »

Example

How to add a hyperlink to an image:

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

<img src="smiley.gif" alt="Go to W3Schools!" width="42" height="42" border="0">

</a>

Try it Yourself »

Example

How to create an image map, with clickable regions. Each region is a hyperlink:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">

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

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

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

</map>

Try it Yourself »


Related Pages

HTML tutorial: HTML Images

HTML DOM reference: Image Object

CSS Tutorial: Styling Images


Default CSS Settings

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

Example

img {

  display: inline-block;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <input> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

An HTML form with three input fields; two text fields and one submit button:

<form action="/action_page.php">

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

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

</form>

Try it Yourself »


Definition and Usage

The <input> tag specifies an input field where the user can enter data.

<input> elements are used within a <form> element to declare input controls that allow users to input data.

An input field can vary in many ways, depending on the type attribute.


Browser Support

Element
<input> Yes Yes Yes Yes Yes

Tips and Notes

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

Tip: Always use the <label> tag to define labels for <input type="text">, <input type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">.



Attributes

Attribute Value Description
accept file_extension

audio/*

video/*

image/*

media_type

Specifies a filter for what file types the user can pick from the file input dialog box (only for type="file")
alt text Specifies an alternate text for images (only for type="image")
autocomplete on

off

Specifies whether an <input> element should have autocomplete enabled
autofocus autofocus Specifies that an <input> element should automatically get focus when the page loads
checked checked Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio")
dirname inputname.dir Specifies that the text direction will be submitted
disabled disabled Specifies that an <input> element should be disabled
form form_id Specifies the form the <input> element belongs to
formaction URL Specifies the URL of the file that will process the input control when the form is submitted (for type="submit" and type="image")
formenctype application/x-www-form-urlencoded

multipart/form-data

text/plain

Specifies how the form-data should be encoded when submitting it to the server (for type="submit" and type="image")
formmethod get

post

Defines the HTTP method for sending data to the action URL (for type="submit" and type="image")
formnovalidate formnovalidate Defines that form elements should not be validated when submitted
formtarget _blank

_self

_parent

_top

framename

Specifies where to display the response that is received after submitting the form (for type="submit" and type="image")
height pixels Specifies the height of an <input> element (only for type="image")
list datalist_id Refers to a <datalist> element that contains pre-defined options for an <input> element
max number

date

Specifies the maximum value for an <input> element
maxlength number Specifies the maximum number of characters allowed in an <input> element
min number

date

Specifies a minimum value for an <input> element
minlength number Specifies the minimum number of characters required in an <input> element
multiple multiple Specifies that a user can enter more than one value in an <input> element
name text Specifies the name of an <input> element
pattern regexp Specifies a regular expression that an <input> element's value is checked against
placeholder text Specifies a short hint that describes the expected value of an <input> element
readonly readonly Specifies that an input field is read-only
required required Specifies that an input field must be filled out before submitting the form
size number Specifies the width, in characters, of an <input> element
src URL Specifies the URL of the image to use as a submit button (only for type="image")
step number

any

Specifies the interval between legal numbers in an input field
type button

checkbox

color

date

datetime-local

email

file

hidden

image

month

number

password

radio

range

reset

search

submit

tel

text

time

url

week

Specifies the type <input> element to display
value text Specifies the value of an <input> element

 

width pixels Specifies the width of an <input> element (only for type="image")

Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Forms

HTML DOM reference:

  • Input Button Object
  • Input Checkbox Object
  • Input Color Object
  • Input Date Object
  • Input Datetime Object
  • Input DatetimeLocal Object
  • Input Email Object
  • Input FileUpload Object
  • Input Hidden Object
  • Input Image Object
  • Input Month Object
  • Input Number Object
  • Input Password Object
  • Input Range Object
  • Input Radio Object
  • Input Reset Object
  • Input Search Object
  • Input Submit Object
  • Input Text Object
  • Input Time Object
  • Input URL Object
  • Input Week Object

Default CSS Settings

None.


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <ins> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

A text with a deleted part, and a new, inserted part:

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

Try it Yourself »


Definition and Usage

The <ins> tag defines a text that has been inserted into a document.

Tip: Also look at the <del> tag to markup deleted text.

Browsers will normally strike a line through deleted text and underline inserted text.


Browser Support

Element
<ins> Yes Yes Yes Yes Yes

Tips and Notes

Tip: Use <ins> together with <del> to markup updates and modifications in a document.


Attributes

Attribute Value Description
cite URL Specifies a URL to a document that explains the reason why the text was inserted/changed
datetime YYYY-MM-DDThh:mm:ssTZD Specifies the date and time when the text was inserted/changed


Global Attributes

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


Event Attributes

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


Related Pages

HTML DOM reference: Ins Object


Default CSS Settings

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

Example

ins {

 text-decoration: underline;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯

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


HTML <kbd> Tag

❮ PreviousComplete HTML ReferenceNext ❯

Example

Format text in a document:

<kbd>Keyboard input</kbd>

Try it Yourself »


Definition and Usage

The <kbd> tag is a phrase tag. It defines keyboard input.

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


Global Attributes

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


Event Attributes

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


Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Kbd Object


Default CSS Settings

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

Example

kbd {

  font-family: monospace;

}

Try it Yourself »


❮ PreviousComplete HTML ReferenceNext ❯