HTML Quotation and Citation Elements

 HTML Quotation and Citation Elements

HTML <blockquote> for Quotations

A passage that is quoted from another source is designated by the HTML "blockquote" element.

Browsers usually indent <blockquote> 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>

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example:

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

HTML <abbr> for Abbreviations

The HTML abbr> element defines an acronym or abbreviation, such as "HTML," "CSS," "Mr.," "Dr.," "ASAP," or "ATM."

Search engines, translation services, and browsers can all benefit from abbreviation marking.

Use the global title property to make the abbreviation or acronym's description visible when you hover your cursor over the element. 

Example:

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

HTML <address> for Contact Information

The contact information for the creator/owner of a page or article is specified in the HTML address> element.

Contact information might include a phone number, email address, website, physical location, and social media handles, among other things.

Italic text often appears in the address> element, and browsers always include a line break before and after the address> element.

Example:

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

HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example:

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

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example:

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

Create a Bookmark in HTML

If a web page is lengthy, bookmarks may be helpful.

make the bookmark first, then connect to it to make a bookmark.

The page will scroll down or up to the spot marked by the bookmark when the link is

clicked.

Example:

First, use the id attribute to create a bookmark:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same

page:

Example:

<a href="#C4">Jump to Chapter 4</a>

you can also add a link to a bookmark on another page

<a href="html_demo.html#C4">Jump to Chapter 4</a>

HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is.

There are two display values: block and inline.

Block-level Elements

Every block-level element begins on a fresh line.

A block-level element always occupies the entire available width and extends as far to the left and right as it can.

An inline element lacks a top and bottom margin but a block level element does.

The <div> element is a block-level element.

Example:

<div>Hello World</div>

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Example:

<span>Hello World</span>

Image Maps

An image map is defined using the HTML "map" tag. An image map is a picture with regions that may be clicked. One or more area> tags are used to specify the areas.

The HTML source code for the above picture map is provided here:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

</map>

The Image

The img> element is used to insert the picture. The usemap property is the sole thing that separates this image from others:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value, which establishes a connection between the picture and the image map, begins with the hash tag # and is followed by the name of the image map.

Create Image Map

Then, add a <map> element.

The mandatory name property is needed to link the picture to the <map> element, which is used to construct an image map:

<map name="workmap">

The name attribute must have the same value as the <img>'s usemapattribute .

The Areas

Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

• rect - defines a rectangular region
• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image. 

HTML Iframes

An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax

An inline frame is defined by the HTML "iframe" element.

To embed another document inside the current HTML document, use an inline frame.

Syntax 

<iframe src="url" title="description"></iframe>

Tip: Always include a title property for the iframe> is a good idea. Screen readers utilise this to read aloud the contents of the iframe.

Iframe - Set Height and Width

To specify the iframe's dimensions, use the parameters height and width.

By default, the height and width are set in pixels:

Example:

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Or you can add the style attribute and use the CSS height and width properties:

Example:

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

 

Iframe - Remove the Border

An iframe always has a border surrounding it by design.

Use the CSS border property and the style attribute to remove the border:

Example:

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

You may alter the border of the iframe's size, style, and colour using CSS.

Example:

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

 

Iframe - Target for a Link

The target frame for a link may be an iframe.

The name attribute of the iframe must be referenced by the target attribute of the link.

Example:

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>