Difference between div AND span

HTML & CSS
1 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Fluid transparent round corners - no images required</title>
<style type="text/css">


*{margin:0;padding:0}
.inline-block{display:inline-block}
.bdr3{border:2px solid #00f}
.pdg5{padding:5px}
.bdr15{border-radius:15px}

.floatRight {float:right}

.backgroundYellow{background:yellow}

</style>
</head>
<body class="pdg5">

<div style="background:yellow">
  [COLOR="#FF0000"]<div[/COLOR] class="inline-block bdr3 pdg5 bdr15">logo  9999[COLOR="#FF0000"]</div>[/COLOR]
  [COLOR="#FF0000"]<div[/COLOR] class="inline-block bdr3 pdg5 bdr15 floatRight">logIn 555[COLOR="#FF0000"]</div>[/COLOR]
</div>


</body>
</html>

I have the code above at dot.kr/x-test/layOut/divLogo.php .

I tried to change <div> to <span> so that I made the code below at http://dot.kr/x-test/layOut/spanLogo.php .


<div style="background:yellow">
  [COLOR="#FF0000"]<span[/COLOR] class="inline-block bdr3 pdg5 bdr15">logo  9999[COLOR="#FF0000"]</span>[/COLOR]
  [COLOR="#FF0000"]<span[/COLOR] class="inline-block bdr3 pdg5 bdr15 floatRight">logIn 555[COLOR="#FF0000"]</span>[/COLOR]
</div>

I see there is no defference between them.
What is the difference between them?
If I put the rest code of each page, the difference between them will happen?
What is the better choice between them?

2

div are block level by default.
span are inline.

That is the only difference, they are nothing-elements only used as hooks for grouping or styling purposes.
I generally only use spans if I need to style a section within a line of inline elements like paragraphs and images.

3

That’s because you have used CSS to style then to be the same. Without CSS a span will not create a new line and its display is “inline” by default and therefore cannot take dimensions unless you change the display in some way (such as block,float or inline-block etc).

Note that you cannot nest block elements inside inline elements so the choice of a span is usually applied to text/content that is usually contained within a larger context (such as an odd word in a paragraph).

CSS doesn’t care what most elements look like (form controls excluded) as you can always style then to suit. The more important question is “which tag is semantically correct to use in each situation ?”. Don’t confuse appearance with the structural semantics of html.

In your example above you have two snippets of separate text so the choice is not clear cut and a case could be made for a span or a div but using a span will limit you later on should you wish to add structural html inside the span. Indeed looking at your example the left span seems to be a logo of some sorts and therefore should be a more structural html element. If the logo was the main logo of the page then I tend to use an h1 for that and use a p element for the login. If its just a general logo then I would use a p element for both. If you feel that you may add more data later to those elements (popups or more html elements) then both should most likely be divs.