The <marquee> tag in HTML is used to create a scrolling text or image effect on a webpage. While it was widely used in the past, it is now considered obsolete and not recommended for use in modern web development. The preferred approach is to use CSS animations or JavaScript for dynamic effects.
Here’s a basic example using the <marquee> tag:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Marquee Example</title> </head> <body> <marquee behavior="scroll" direction="left" scrollamount="5"> This is a scrolling text! </marquee> </body> </html>
In this example:
– behavior=”scroll” defines the scrolling behavior.
– direction=”left” specifies the scrolling direction from right to left.
– scrollamount=”5″ sets the speed of the scrolling.
Scrolling Image Using Marquee Tag :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Marquee Example</title> </head> <body> <marquee behavior="scroll" direction="up" scrollamount="3"> <img src="https://crtr4u.com/wp-content/uploads/2024/02/HTML.png" alt="Scrolling Image"> </marquee> </body> </html>
Scrolling Text with Bgcolor:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Marquee Example</title> </head> <body> <marquee behavior="scroll" direction="right" scrollamount="7" bgcolor="#ffeecc"> Scroll with background color! </marquee> </body> </html>
Scrolling Text Loop:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Marquee Example</title> </head> <body> <marquee behavior="alternate" direction="left" scrollamount="3"> This text will scroll back and forth. </marquee> </body> </html>
It’s essential to emphasize that while these examples showcase the usage of the <marquee> tag, it is not recommended for use in production websites due to its lack of support in modern browsers, potential accessibility issues, and better alternatives available through CSS animations or JavaScript. Always consider using more modern and widely supported techniques for creating dynamic effects on your web pages.
However, it’s important to note that the <marquee> tag is deprecated in HTML5, and its usage is discouraged. Instead, consider using CSS animations or JavaScript for more modern and flexible control over dynamic effects on your web pages.