Span and div tags

 6- Span and div tag 

----- Description-----
Div tag
This tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections.

 Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.
Span tag
This tag is used for grouping and applying styles to inline elements.

 This tag is similar to <div> tag, to see difference between the two, check the next example.
Difference between <div> and <span> tag
The <span> tag is used with inline elements while the <div> tag is used with block-level content.

Example-input 
<!DOCTYPE html> 
<html> 
<head> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <title>div tag</title> 
</head> 
<body> 
<span> tag
<span>Testing 1</span>
<span>Testing 2</span>
<span>Testing 3</span>
<div> tag
<div>Testing 1</div>
<div>Testing 2</div>
<div>Testing 3</div>
</body>
</html>


Output-span tag
Testing 1 Testing 2 Testing 3
Output-div tag 
Testing 1
Testing 2
Testing 3

Comments

Post a Comment

Popular posts from this blog

Fish effect

Image
                          🐋Fish🏊effect🐟🐋 Input🐋 <html> <body> <style> .scroll-left {  height: 100px;   overflow: hidden;  position: relative; } .scroll-left .inner {  position: absolute;  width: 100%;  height: 100%;  margin: 0;  line-height: 50px;  text-align: center;  /* Starting position */  -moz-transform:translateX(100%);  -webkit-transform:translateX(100%);   transform:translateX(100%);  /* Apply animation to this element */   -moz-animation: scroll-left 15s linear infinite;  -webkit-animation: scroll-left 15s linear infinite;  animation: scroll-left 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes scroll-left {  0%   { -moz-transform: translateX(100%); }  100% { -moz-transform: translateX(-100%); } } @-webkit-k...
Read more

Bulb cool Effect

Image
💡Bulb on/off💡 Output   Input <!DOCTYPE html> <html> <body> <script> function light(sw) {   var pic;   if (sw == 0) {     pic = "pic_bulboff.gif"   } else {     pic = "pic_bulbon.gif"   }   document.getElementById('myImage').src = pic; } </script> <img id="myImage" src="pic_bulboff.gif" width="100" height="180"> <p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button> </p> </body> </html>
Read more