Html marquee tag and how to use marquee tag

Html marquee tag and how to use marquee tag

In this article we are discussing about Html marquee tag, use of html marquee, how can we use marquee in our web page and how it will be helpful for us.

HTML Marquee Tags Definition and Usage

  • HTML <marquee> is a scrolling text displayed either horizontally across or vertically down your web site page depending on the settings. This is created by using <marquees>.
  • HTML <marquee> tag is used to to get a scrolling text. As on the television you see the scrolling news headlines. You can do this by using the <marquee> tag.
  • HTML <marquee> tag also use to create a scrolling image from left to right, right to left, top to bottom, bottom to top. There is no limit. It’s user define choice.
  • HTML <marquee> tag is a Container tag to create scrolling text or image.
  • HTML <marquee> tag support some attributes. This attributes use to add more special effect and easy control.
AttributesValuesDescription
behavior“slide”scrollalternateStart completely and stop as soon as text touches the margin.Start completely and off one side.Text bounce as soon as touch both side margin.
bgcolor“Color_Code”Define the background color of scrolling text.
direction“left””right””up”

“down”

Left to RightRight to LeftBottom to Top

Top to Bottom

width“size_px”Define width in marquee.
height“size_px”Define width in marquee.
loop“2””infinite”Loop Continues in limited times.Loop Continues in Infinite.
scrollamount“2”Define Speed to scroll on the text.
scrolldelay“2”Define time wait long before each marquee.
hspace“size_px”Define left or right margin for outside marquee.
vspace“size_px”define top or bottom margin for outside marquee.

Example : HTML Simple Marquee Tag.

 <html>
 <head>
    <title> HTML Simple Marquee Tag Examples </title>
 </head> 
 <body> 
 <!-- Now we are using Simple Marquee Tag -->
 <marquee> Simple Marquee Text </marquee>
 </body> 
 </html>

Output :
Simple Marquee Text

HTML Marquee Examples

Now we are represents some examples of marquee tag for you so let do some practical……

Example : HTML Side Touch Marquee Example

 <html>
 <head>
    <title> HTML Side Touch Marquee Example </title>
 </head>
 <body>
    <!-- Now we are using HTML Side Touch Marquee Example -->
	
	<marquee behavior="alternate" direction="left"> HTML Side Touch Marquee Example </marquee>

 </body>
 </html>

Output :
HTML Side Touch Marquee Example

Example : HTML Upside and Down Text Scrolling Marquee Example

 <html>
 <head>
    <title> HTML Upside and Down Text Scrolling Marquee Example </title>
 </head> 
 <body> 
    <!-- Now we are using HTML Upside and Down Text Scrolling Marquee Example -->
	
	<marquee behavior="scroll" direction="up"> HTML Upside and Down Text Scrolling Marquee Example </marquee>

 </body>
 </html> 

Output :
HTML Upside Text Scrolling Marquee Example
HTML Downside Text Scrolling Marquee Example

Example : HTML Speed Scrolling Marquee Example

 <html>
 <head>
    <title> HTML Speed Scrolling Marquee Example </title>
 </head>
 <body> 
    <!-- Now we are using HTML Speed Text Scrolling Marquee Example -->
	
	<marquee behavior="scroll" direction="left" scrollamount="2">
	HTML Slow Speed Text Scrolling Marquee Example </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="5">
	HTML Medium Speed Text Scrolling Marquee Example </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="10">
	HTML Fast Speed Text Scrolling Marquee Example </marquee>


 </body>
 </html> 

Output :
HTML Slow Speed Text Scrolling Marquee Example
HTML Medium Speed Text Scrolling Marquee Example
HTML Fast Speed Text Scrolling Marquee Example

Example : HTML Image Marquee Example

 <html>
 <head>
    <title> HTML Image Marquee Example </title>
 </head>
 <body>
    <!-- Now we are using HTML Image Marquee Example -->
	
	<marquee behavior="alternate" direction="left"> <img src="http://phpkida.com/phpkida2.png"
	height="200" width="200" title="HTML Image Marquee Example" alt="HTML Image Marquee Example" />
	</marquee>

 </body>
 </html> 

Output :

HTML Image Marquee Example

Example : HTML Click To Stop Marquee Example

 <html>
 <head>
    <title> HTML Click To Stop Marquee Example </title>
 </head>
 <body> 
    <!-- Now we are using HTML Click To Stop Marquee Example -->
	
	<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">
	HTML Click To Stop Marquee Example </marquee>

 </body>
 </html> 

Output :

HTML Click To Stop Marquee Example

Example : HTML Mouse Hover Marquee Example

 <html>
 <head>
    <title> HTML Mouse Hover  Marquee Example </title>
 </head>
 <body> 
    <!-- Now we are using HTML Mouse Hover Marquee Example -->
	
	<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
	HTML Mouse Hover Marquee Example </marquee>

 </body>
 </html> 

Output :
HTML Mouse Hover Marquee Example

Example : HTML Mouse Hover Over The Marquee Slow Example

 <html>
 <head>
    <title> HTML Mouse Hover Over The Marquee Slow Example </title>
 </head>
 <body>
    <!-- Now we are using HTML Mouse Hover Over The Marquee Slow Example -->
	
	<marquee behavior="scroll" direction="left"
	onmouseover="this.setAttribute('scrollamount', 4, 0);"
	onmouseout="this.setAttribute('scrollamount', 8, 0);">
	HTML Mouse Hover Over The Marquee Slow Example </marquee>

 </body>
 </html> 

Output :
HTML Mouse Hover Over The Marquee Slow Example

Leave a Reply

Related Posts: You may like

html5 video tag Complete Guide

How to get multiple selected values of select box in php

Responsive contact form html css

How to increase size of radio button

PHPKIDA Offering Free Tools:

INSTA DOWNLOADER

Download Instagram Videos & Photos.

Download Now

CURRENCY CONVERTER

Real Time Currency Converter

Convert Now

ROBOST.TXT GEN.

Robots.txt File Creater

Create Now

HTML MINIFIER

Compress yout HTML Code

Minify Now

CSS MINIFIER

Compress yout CSS Code

Minify Now

JAVASCRIPT MINIFIER

Compress yout JavaScript Code

Minify Now

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.