Difference in using Lightning Component <lightning:badge/> and Normal DOM with slds <span class="slds-badge"></span>? Which is Better and Why?

Badge is relatively very simple component. However, the main difference even for simple component is that lightning base components are loaded as custom components and you cannot reach into the DOM for customisation. For example, in lightning:badge, you cannot have hyperlink, but using raw HTML, you can have hyperlink as everything is in your hands. Sample:

Also, when you compare complex components like datatable or fileUpload, its highly time consuming for implementing through raw HTML. Another example is spinner for which if you want to add some info you have to use raw HTML (example - How to add some informative text to loading spinner?).

Conclusion: It is always better to use lightning components as they provide encapsulation and upgraded with salesforce upgrades BUT if you need custom functionality which cannot be attained through standard component, then you can use raw HTML with slds classes

In lightning:badge, there is not much difference.

Suppose there is scenario where you have a form and you want to build upload document functionality in form, then it will be to difficult if you are using native HTML tag and you need to write all logic manually so that it will work.

But if you are using lightning:fileUpload tag, here you need to give some parameters and it is ready to use. This will save your time for developing functionality in lightning.

Using the component makes the code marginally more readable, and you get "free upgrades" if SLDS ever changes its specification of a badge. You're always free to use whichever you like. I would personally use the component as a matter of preference, since it is more consistent to read component code than raw HTML, especially in a larger component.