Category: HTML

There are 2 different properties to hide element from User Interface. One is visibility Property and other is display property.

For example if we want to hide one element like button. Then using code “visibility:hidden” html page will hide the button from UI. But space occupied or size of the button will get consumed on front page. So tag is getting rendered but not data. So tag size is visible on page but not its content.

If user want to hide the complete tag and associated data from page then html/css provide property like “display:none”. By using display none property user can hide not only data but associated tag as well. This will have no impact on page layout.

Below are example which will give difference between visibility:hidden and display:none

Step 1) Displaying two buttons

<button type="button" >Button One</button>
<button type="button" >Button Two</button>

Step 2) Now using visibility:hidden for first button.

<button type="button" style="visibility:hidden">Button One</button>
<button type="button" >Button Two</button>

If you observe in above code button one is hidden but size is occupied on page layout.

Let’s use display:none property and see the effect.

<button type="button" style="display:none">Button One</button>
<button type="button" >Button Two</button>

So in above example if you observe due to display:none property button one is completed hide and associated tag is not rendered on page. That’s why button two is completely left aligned.

Run time user can change property to hide the element by using below code in java script.

document.getElementById("button1").style.visibility = "visible"; 

To show scrollable texts or images within a web page we use marquee tag in html. Marquee tag has around ten attributes. Marquee can be implemented by using CSS. Below are examples of marquee tag with different attributes and their code.

Width Attribute: By providing width in percent we design marquee.

<marquee width="60%" >
This is a example of width attribute in marquee tag.
</marquee>

Height Attribute: provides the height of a marquee

<marquee width="80%" height="80%">
This is a example of width attribute in marquee tag.
</marquee>

Direction: Direction attribute provides the direction to scroll. values which can be used are left, right, up or down.

<marquee  direction="up" >Text going Up</marquee>
<marquee  direction="right">Text going Right</marquee>
<marquee direction="left" >Text going left</marquee>
<marquee  direction="right">Text going Down</marquee>

Scrolldelay: The Marquee scrolldelay attribute in HTML is used to set the interval between each scroll movement in milliseconds.

<marquee direction="up" scrolldelay=500>Text going Up</marquee>
<marquee direction="right" scrolldelay=200>Scroll Delay for 200</marquee>
<marquee direction="down" scrolldelay=1500>Scroll delay around 1500</marquee>

scrollamount: Marquee speed can be changed using the “scrollmount” attribute. By Setting value 1 it scrolls slow and to increase the speed we can specify value more than 1

<marquee behavior="scroll" direction="right" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="10">Little Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="25">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="45">Very Fast Scrolling</marquee>

Behavior: Three different values we can pass in behavior tag. Sliding, scrolling or alternate.

<marquee behavior="Slide" direction="right" scrollamount="10">Sliding Behavior</marquee>
<marquee behavior="scroll" direction="right" scrollamount="10">Scrolling Behavior</marquee>
<marquee behavior="alternate" direction="right" scrollamount="10">Alternate Behavior</marquee>

Loop: This category will decide number of times marquee is repeated. Valid values are number and “infinite”. Infinite is default value which means it runs endlessly.

<marquee scrollamount="5" loop="infinite">Infinite example for marquee</marquee>
<marquee scrollamount="5" loop="1">Loop through 1 time only for marquee</marquee>

Alternative for marquee tag in html 5

There is no such alternative for marquee tag. But similar type effect we can achieve by using CSS, JavaScript.

Refer this for alternate of marquee in CSS.

For more information refer