HTML for Bi-Directional Override

HTML for Bi-Directional Override

The HTML  element defines bi-directional override.

The element is used to override the current text direction:

Example

<bdo dir="rtl">This text will be written from right to left</bdo>

Try it Yourself »

HTML for Work Title

HTML for Work Title

The HTML  element defines the title of a work.

Browsers usually display elements in italic.

Example

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

Try it Yourself »

HTML Text Size

HTML Text Size

The font-size property defines the text size for an HTML element:

Example

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Try it Yourself »

HTML Tag Reference

HTML Tag Reference

W3Schools' tag reference contains additional information about HTML elements and their attributes.

Tag	Description
	Defines a paragraph
	Inserts a single line break
	Defines pre-formatted text

HTML for Contact Information

HTML

for Contact Information

The HTML 

 element defines contact information (author/owner) of a document or an article.

The

element is usually displayed in italic. Most browsers will add a line break before and after the element.

Example

<address>
Written by John Doe.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

Try it Yourself »

HTML for Abbreviations

HTML for Abbreviations

The HTML  element defines an abbreviation or an acronym.

Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Example

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

Try it Yourself »

HTML for Quotations

HTML

for Quotations

The HTML 

 element defines a section that is quoted from another source.

Browsers usually indent

elements.

Example

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

Try it Yourself »

HTML Text Color

HTML Text Color

The color property defines the text color for an HTML element:

Example

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Try it Yourself »

The Poem Problem

The Poem Problem

This poem will display as one line:

Example

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

HTML for Short Quotations

HTML for Short Quotations

The HTML  element defines a short quotation.

Browsers usually insert quotation marks around the

element.

Example

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

Try it Yourself »

HTML Quotation and Citation Elements

Quotation

Here is a quote from WWF's website:

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

Try it Yourself »

HTML Text Formatting Elements

HTML Text Formatting Elements

Tag	Description
	Defines bold text
	Defines emphasized text
	Defines italic text
	Defines smaller text
	Defines important text
	Defines subscripted text
	Defines superscripted text
	Defines inserted text
	Defines deleted text
	Defines marked/highlighted text

HTML Fonts

HTML Fonts

The font-family property defines the font to be used for an HTML element:

Example

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

Try it Yourself »

HTML Line Breaks

HTML Line Breaks

The HTML 
 element defines a line break.

Use
if you want a line break (a new line) without starting a new paragraph:

Example

<p>This is<br>a paragraph<br>with line breaks.</p>

Try it Yourself »

The
tag is an empty tag, which means that it has no end tag.

HTML Element

HTML ^Element

The HTML  element defines superscripted text.

Example

<p>This is ^{superscripted} text.</p>

Try it Yourself »

HTML Element

HTML _Element

The HTML  element defines subscripted text.

Example

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

Try it Yourself »

HTML Element

HTML Element

The HTML  element defines inserted (added) text.

Example

<p>My favorite <ins>color</ins> is red.</p>

Try it Yourself »

HTML Background Color

HTML Background Color

The background-color property defines the background color for an HTML element.

This example sets the background color for a page to powderblue:

Example

<body style="background-color:powderblue;">

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

</body>

Try it Yourself »

Don't Forget the End Tag

Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:

Example

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

Try it Yourself »

The example above will work in most browsers, but do not rely on it.

Note: Dropping the end tag can produce unexpected results or errors.

HTML Element

HTML Element

The HTML  element defines deleted (removed) text.

Example

<p>My favorite color is <del>blue</del> red.</p>

Try it Yourself »

HTML Element

HTML Element

The HTML  element defines marked or highlighted text:

Example

<h2>HTML <mark>Marked</mark> Formatting</h2>

Try it Yourself »

HTML Element

HTML Element

The HTML  element defines smaller text:

Example

<h2>HTML <small>Small</small> Formatting</h2>

Try it Yourself »

The HTML Style Attribute

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

property

:value;">

The property is a CSS property. The value is a CSS value.

HTML Display

HTML Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

The browser will remove any extra spaces and extra lines when the page is displayed:

Example

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>

Try it Yourself »

Source : http://www.w3schools.com/html/html_paragraphs.asp

HTML Formatting Elements

HTML Formatting Elements

In the previous chapter, you learned about the HTML style attribute.

HTML also defines special elements for defining text with a special meaning.

HTML uses elements like and for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

• - Bold text
• - Important text
• - Italic text
• - Emphasized text
• - Marked text
• - Small text
• - Deleted text
• - Inserted text
• _{- Subscript text}
• ^{- Superscript text}

HTML Text Formatting

Text Formatting

This text is bold

This text is italic

This is subscript and superscript

Try it Yourself »

HTML Text Alignment

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Try it Yourself »

HTML Styles

HTML Styles

I am red

I am blue

Try it Yourself »

HTML Paragraphs

HTML Paragraphs

The HTML  element defines a paragraph:

Example

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

Try it Yourself »

Note: Browsers automatically add some white space (a margin) before and after a paragraph.

Source: http://www.w3schools.com/html/html_paragraphs.asp

Single or Double Quotes?

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

<p title='John "ShotGun" Nelson'>

Or vice versa:

<p title="John 'ShotGun' Nelson">

The alt Attribute

The alt Attribute

The alt attribute specifies an alternative text to be used, when an image cannot be displayed.

The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.

Example

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Try it Yourself »

Source : http://www.w3schools.com/html/html_attributes.asp

Size Attributes

Size Attributes

HTML images are defined with the  tag.

The filename of the source (src), and the size of the image (width and height) are all provided as attributes:

Example

<img src="w3schools.jpg" width="104" height="142">

Try it Yourself »

The image size is specified in pixels: width="104" means 104 screen pixels wide.

You will learn more about images and the tag later in this tutorial.

Source :  http://www.w3schools.com/html/html_attributes.asp

The href Attribute

The href Attribute

HTML links are defined with the  tag. The link address is specified in the href attribute:

Example

<a href="http://www.w3schools.com">This is a link</a>

Try it Yourself »

You will learn more about links and the tag later in this tutorial.

Source : http://www.w3schools.com/html/html_attributes.asp