Learn Marquee tag with it's attributes in html

Marquee is one of the important tags introduced in HTML to support scrolling texts and images within a web page. In this tutorial, you will be learning about the Marquee tag and its different attributes for developing a web page.

HTML <marquee> tag


Html <marquee> tag is used to scroll text or image horizontally across or vertically down your web page.

Syntax:

The marquee element comes in pairs. It means means that the tag has opening and closing elements.

<marquee> CS Tutorials Blogs </marquee>

Output:

CS Tutorials Blogs

It has various attributes like direction, behavior, width, height, bgcolor. Let's see all of these one by one with example.

direction attribute:

By default direction of scrolling is left means content will scroll toward left. You can set it's value to left, right, up or down.

<marquee direction="right"> CS Tutorials Blogs - scrolling right </marquee>

Output:

CS Tutorials Blogs - scrolling right

<marquee direction="up"> CS Tutorials Blogs -scrolling up </marquee>

Output:

CS Tutorials Blogs - scrolling up

<marquee direction="down">
CS Tutorials Blogs -scrolling down </marquee>

Output:

CS Tutorials Blogs - scrolling down

bgcolor attribute:

this attribute is used to set the background color of marquee.

<marquee bgcolor="#b4a7d6">
CS Tutorials Blogs - with bgcolor set to light purple </marquee>

Output:

CS Tutorials Blogs - with bgcolor set to light purple

behavior attribute:

you can use this set marquee text movement behavior like scroll, slide and alternate. default value is scroll.

<marquee behavior="Alternate">
CS Tutorials Blogs - behavior set to alternate </marquee>

Output:

CS Tutorials Blogs - behavior set to alternate

scrollamount attribute:

Use this attribute to control the speed of movement. It takes value in milliseconds. 1000 milliseconds are equal to 1 second.

<marquee scrollamount="1">Slow Scrolling</marquee> <marquee scrollamount="12">Little Fast Scrolling</marquee> <marquee scrollamount="20">Fast Scrolling</marquee> <marquee scrollamount="50">Very Fast Scrolling</marquee>

Output:

Slow Scrolling
Little Fast Scrolling
Fast Scrolling
Very Fast Scrolling

For live demo, go though below Youtube video:


Comments

Popular Posts

How to Import and Export Delimited Files, like CSV, in PowerShell

How to generate a GUID in PowerShell

PowerShell Arithmetic Operators