How to add Marquee in HTML?

Hello coders, In this blog, you will learn to add Marquee in HTML. Marquee in HTML is used to add Scrollable & Floating text and images within a webpage. The text in it can be scrolled horizontally across or vertically down depending on the settings that are set. Let’s learn about it in detail:-

Marquee

Adding Marquee in Website:-

The HTML tag <marquee> is used to create a marquee in HTML. It is a container tag. There are various attributes of a marquee which are:-

Attributes Description
Width It provides the width for a marquee.
Height It provides the height for a marquee.
Loop It provides the no of times the marquee will loop.
Bgcolor It provides the Background color.
Direction It provides the direction in which a marquee will scroll.
Behavior It provides a scrolling type of marquee.
Scrolldelay It provides a feature that provides the value for delaying each jump.
Scrollamount It provides value for speeding the marquee.
Vspace It provides vertical space for the marquee.
Hspace It provides horizontal space for the marquee.

The code to add Marquee is:-

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Marquee Up</title>
    </head>
    <marquee width=”40%” direction=”up” height=”120px”>
        CodeBlockx Code for scrolling text in upper direction.
    </marquee>
</html>

OUTPUT

CodeBlockx Code for scrolling text in upper direction.

Index1.html

<!DOCTYPE html>
<html>
    <head>
        <title>Example of a blinking text using CSS within a marquee</title>
        <style>
            .blink {
                animation: blinker 2s linear infinite;
                color:  seagreen;
            }
            @keyframes blinker {
                80% {
                    opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <marquee class=”blink”>
            CodeBlockx This is blinking text.
        </marquee>
    </body>

 

</html>

OUTPUT

CodeBlockx This is blinking text.

Hope this blog was helpful to you and you got the answer to your question. Check out our more detailed blogs on HTML questions. They will be definitely helpful to you.

 

Thank you for visiting our blog. If you have any doubts related to any coding questions then let us know in the comments section. We will answer it as soon as possible.

Leave a Comment

Your email address will not be published. Required fields are marked *