Preformatted text (how to control line breaks and spaces)
<!DOCTYPE html>
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
OUTPUT:
=======
This is
preformatted text.
It preserves both spaces
and line breaks.
The pre tag is good for displaying computer code:
for i = 1 to 10
print i
next i
================================================================================
Different computer-output tags
<!DOCTYPE html>
<html>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p><b>Note:</b> These tags are often used to display computer/programming code.</p>
</body>
</html>
output
======
Computer code
Keyboard input
Teletype text
Sample text
Computer variable
Note: These tags are often used to display computer/programming code.
--------------------------------------------------------------------------------------------------------
========================================================================
Insert contact information
<!DOCTYPE html>
<html>
<body>
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
</body>
</html>
output:
=====
Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78
==========================================================
Abbreviations and acronyms
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
</body>
</html>
output:
=====
The
WHO was founded in 1948.
The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation
=======================================================================
Text direction
<!DOCTYPE html>
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
output:
=====
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
Here is some Hebrew text
=====================================================================
Long and short quotations
<!DOCTYPE html>
<html>
<body>
A long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also inserts margins.</p>
A short quotation:
<q>This is a short quotation</q>
<p><b>Note:</b> The browser inserts quotation marks around the short quotation.</p>
</body>
</html>
output:
=====
A long quotation:
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
Note: The browser inserts white space before and after a blockquote element. It also inserts margins.
A short quotation: This is a short quotation
Note: The browser inserts quotation marks around the short quotation.
======================================================================
How to mark deleted and inserted text
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>
</body>
</html>
output:
=====
My favorite color is
blue
red
!
Notice that browsers will strikethrough deleted text and underline inserted text.
========================================================================
Open link in a new browser window
<!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>
</body>
</html>
output:
=====
Visit W3Schools.com!
If you set the target attribute to "_blank", the link will open in a new browser window/tab.
=====================================================================
Jump to another part of a document (on the same page)
<!DOCTYPE html>
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
output
==========
Chapter 1
This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
This chapter explains ba bla bla
Chapter 5
This chapter explains ba bla bla
Chapter 6
This chapter explains ba bla bla
Chapter 7
This chapter explains ba bla bla
Chapter 8
This chapter explains ba bla bla
Chapter 9
This chapter explains ba bla bla
Chapter 10
This chapter explains ba bla bla
Chapter 11
This chapter explains ba bla bla
Chapter 12
This chapter explains ba bla bla
Chapter 13
This chapter explains ba bla bla
Chapter 14
This chapter explains ba bla bla
Chapter 15
This chapter explains ba bla bla
Chapter 16
This chapter explains ba bla bla
Chapter 17
This chapter explains ba bla bla
======================================================================
Break out of a frame
<!DOCTYPE html>
<html>
<body>
<p>Locked in a frame?</p>
<a href="http://www.w3schools.com/" target="_top">Click here!</a>
</body>
</html>
output:
======
Locked in a frame?
Click here!
=======================================================================
How to link to a mail message (will only work if you have mail installed)
<!DOCTYPE html>
<html>
<body>
<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>
</body>
</html>
output:
====
Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
=====================================================================
Another mailto link
<!DOCTYPE html>
<html>
<body>
<p>
This is another mailto link:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>
</body>
</html>
output:
=====
Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
========================================================================
Table cells that span more than one row/column
<!DOCTYPE html>
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
output:
=====
Cell that spans two columns:
Name | Telephone |
Bill Gates | 555 77 854 | 555 77 855 |
Cell that spans two rows:
First Name: | Bill Gates |
Telephone: | 555 77 854 |
555 77 855 |
=====================================================================
Tags inside a table
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
output:
=====
This is a paragraph
This is another paragraph | This cell contains a table:
|
This cell contains a list
- apples
- bananas
- pineapples
| HELLO |
========================================================================
Cell spacing (control the distance between cells)
<!DOCTYPE html>
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
output
======
Without cellspacing:
With cellspacing="0":
With cellspacing="10":
=====================================================================
The frame attribute
<!DOCTYPE html>
<html>
<body>
<p>
<b>Note:</b>
If you see no frames/borders around the tables below, your browser does not support
the "frame" attribute.
</p>
<h4>With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="void":</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="above":</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="below":</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
output:
=====
Note: If you see no frames/borders around the tables below, your browser does not support the "frame" attribute.
With frame="border":
With frame="box":
With frame="void":
With frame="above":
With frame="below":
With frame="hsides":
With frame="vsides":
With frame="lhs":
With frame="rhs":
======================================================================
Different types of ordered lists
<!DOCTYPE html>
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
output:
=====
Numbered list:
- Apples
- Bananas
- Lemons
- Oranges
Letters list:
- Apples
- Bananas
- Lemons
- Oranges
Lowercase letters list:
- Apples
- Bananas
- Lemons
- Oranges
Roman numbers list:
- Apples
- Bananas
- Lemons
- Oranges
Lowercase Roman numbers list:
- Apples
- Bananas
- Lemons
- Oranges
===================================================================
Different types of unordered Lists
<!DOCTYPE html>
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
output:
=====
Disc bullets list:
- Apples
- Bananas
- Lemons
- Oranges
Circle bullets list:
- Apples
- Bananas
- Lemons
- Oranges
Square bullets list:
- Apples
- Bananas
- Lemons
- Oranges
=====================================================================
Inline frame (a frame inside an HTML page)
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
output:
=====
Some older browsers don't support iframes.
If they don't, the iframe will not be visible.
======================================================================
One target for all links on a page
<!DOCTYPE html>
<html>
<head>
<base href="http://www.w3schools.com/images/" />
<base target="_blank" />
</head>
<body>
<img src="stickman.gif" width="24" height="39" /> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "http://www.w3schools.com/images/stickman.gif"
<br /><br />
<a href="http://www.w3schools.com">W3Schools</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".
</body>
</html>
output:
====
- Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "http://www.w3schools.com/images/stickman.gif" W3Schools - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".
======================================================================
Document description
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Hege Refsnes" />
<meta name="revised" content="2010/06/20" />
</head>
<body>
<p>The meta elements on this page identifies the author and the revise date.</p>
</body>
</html>
output:
======
The meta elements on this page identifies the author and the revise date.
====================================================================
Document description
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Hege Refsnes" />
<meta name="revised" content="2010/06/20" />
</head>
<body>
<p>The meta elements on this page identifies the author and the revise date.</p>
</body>
</html>
output:
======
The meta elements on this page identifies the author and the revise date.
====================================================================
Redirect a user
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Refresh" content="5;url=http://www.w3schools.com" />
</head>
<body>
<h1>Sorry! We have moved!</h1>
<h2>The new URL is: <a href="http://www.w3schools.com">http://www.w3schools.com</a></h2>
<p>You will be redirected to the new address in five seconds.</p>
<p>If you see this message for more than 5 seconds, please click on the link above!</p>
</body>
</html>
output:
=====
Sorry! We have moved!
You will be redirected to the new address in five seconds.
If you see this message for more than 5 seconds, please click on the link above!
======================================================================