<div> and <span>

Let's talk about div first!

Have you ever looked into your almirah once in your life?

Is it have any order? No?

Ok we are not talking about you! go, clean and make it order!

we are talking about who have order! like me and my almirah!

ok we make order because that's how we do things, otherwise it'll be so complicated and messy! this is how your web page also we have to make order and good arrangement, so we make sections, for navigation... for search... for login... etc.

for that we use <div> tag; making sections, it is a shortform for division. Web developers use this tag all time. One more thing is we use CSS for <div> tag styling! we will give "class" and "id" for calling div or group of div tags.

Note: <div> tags are block level elements.

Some examples

        
            <div class="parent"> 
            
                <div class="child" id="chid1"> 
                Child 1 </div>

                <div class="child" id="chid2">
                Child 2 </div>

                <div class="child" id="chid3"> 
                Child 3 </div>

                <div class="child" id="chid4"> 
                Child 4 </div>

            </div>

the above code result will look like this! (Without border)

Child 1

Child 2

Child 3

Child 4

the above code result will look like this! (With border and padding (don't worry about these terms now))

Child 1

Child 2

Child 3

Child 4

Block level elements in HTML will take whole width of the line for displaying the element. We can use CSS for reducing that also!

Let's talk about span!

<span> is using for denoting some portions of data. We mostly use <span> inside of div or p or other tags!

let's discuss this with some examples

        
            <div class="parent"> 

                <div class="child" id="chid1"> 
                Child ONE </div>

                <div class="child" id="chid2"> 
                Child TWO </div>

                <div class="child" id="chid3"> 
                Child THREE </div>

                <div class="child" id="chid4"> 
                Child FOUR </div>

            </div>

see the above code I don't like the color of "ONE" in Child ONE;

what to do?

if I apply any styles on the "id" of child1, it'll affect all letters in "child ONE". So this where we will use <span> tag.

"span" usage


<div class="parent">

  <div class="child" id="chid1"> 
  Child <span id="spanEx">ONE</span>
  </div>

  <div class="child" id="chid2"> Child TWO 
  </div>

  <div class="child" id="chid3"> Child THREE 
  </div>

  <div class="child" id="chid4"> Child FOUR 
  </div>

</div>

Now we can add styles on the id "spanEx". Style only affects the word "ONE".

unlike <div>, <span> is an inline element, it'll only take the width of the element, so that we can use anywhere for applying style or displaying or manipulating data.

<div> and <span>

Let's talk about div first!

Note: <div> tags are block level elements.

Let's talk about span!

unlike <div>, <span> is an inline element, it'll only take the width of the element, so that we can use anywhere for applying style or displaying or manipulating data.

« 1 2 3 4 5 6 7 8 9 10 11 »