In the world of web development, the term “marquee” refers to a text element that scrolls continuously across the screen. This effect is often used to draw attention to important announcements or promotions. However, the origin of the term “marquee” in this context is not immediately obvious.
The Theatrical Origin
The word “marquee” originally comes from the French word “marquise,” which means “tent.” In the context of live theater, a marquee is a large, canvas-covered structure that is erected over the entrance to a theater. The marquee typically displays the name of the theater and the title of the current production.
The Connection to Web Design
The use of the term “marquee” in web design likely stems from the similarity between the scrolling text effect and the canvas covering of a theatrical marquee. Just as a theatrical marquee draws attention to the entrance of a theater, a scrolling text marquee in a web page can draw attention to important information.
The Controversy
However, the use of marquees in web design has been controversial from the beginning. Critics argue that marquees are distracting and can be difficult to read. They also point out that marquees are not accessible to users with disabilities.
As a result, the use of marquees has declined in recent years. However, they are still occasionally used in situations where it is important to draw attention to a specific piece of information.
Marquee in HTML and CSS
A marquee is a text or image that scrolls horizontally or vertically across a web page. It is created using the <marquee> tag in HTML and styled using CSS.
HTML
The basic syntax of the <marquee> tag is:
<marquee>[attributes]>[text or image]</marquee>
The following attributes can be used to control the appearance and behavior of the marquee:
- direction: Specifies the direction in which the marquee scrolls. Possible values are “left”, “right”, “up”, and “down”.
- scrolldelay: Specifies the delay in milliseconds between each scroll.
- scrollamount: Specifies the number of pixels to scroll each time.
- loop: Specifies whether the marquee should scroll continuously or stop after reaching the end of the content.
- bounce: Specifies whether the marquee should bounce back when it reaches the end of the content.
- behavior: Specifies the behavior of the marquee when the mouse hovers over it. Possible values are “scroll”, “slide”, and “alternate”.
CSS
The appearance of the marquee can be styled using CSS. The following properties are commonly used:
- background-color: Specifies the background color of the marquee.
- color: Specifies the color of the text or image.
- font-family: Specifies the font family of the text.
- font-size: Specifies the font size of the text.
- text-align: Specifies the alignment of the text.
- width: Specifies the width of the marquee.
- height: Specifies the height of the marquee.
Example
The following code creates a marquee that scrolls a text message horizontally across the page:
<marquee direction="left" scrollamount="5">
Welcome to my website!
</marquee>
The following CSS styles the marquee:
marquee {
background-color: #ffffff;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
text-align: center;
width: 100%;
height: 50px;
}
Conclusion
The term “marquee” in the context of HTML and CSS is named after the theatrical marquee, which is a large, canvas-covered structure that is erected over the entrance to a theater. The scrolling text effect that is commonly associated with marquees in web design is meant to mimic the attention-grabbing nature of a theatrical marquee. However, marquees have been controversial in web design due to concerns about accessibility and readability.