Div VS Span - HTML Tags

        Αν παρατηρήσετε τον κώδικα που κρύβεται πίσω από τα σύγχρονα site, θα παρατηρήσετε πως σε πολλά σημεία υπάρχουν <div...> και <span...> html tags. Αντίθετα, τα παλαιότερα <font...>, <p...>, <basefont...> κτλ τείνουν να εξαφανίζονται, αν αυτό δεν έχει ήδη συμβεί. Ποια όμως η διαφορά μεταξύ των δύο;

        Από τη στιγμή που εισήχθησαν τα φύλλα CSS στην HTML, οι προγραμματιστές είχαν τη δυνατότητα να χρησιμοποιήσουν κώδικα CSS για τη διαμόρφωση των διαφόρων στοιχείων της σελίδας απλά χρησιμοποιώντας την ιδιότητα style="..." του εκάστοτε tag.

        Έτσι, το <p align="center"> έγινε <div style="text-align:center;">, ενώ το <font color="#FFC354" size="+1"> αντικαταστάθηκε από <span style="color:#FFC354;font-size:large;">. Θα μπορούσαμε όμως κάλλιστα να γράψουμε και <div style="color:#FFC354;font-size:large;">.

        Η διαφορά είναι ότι, βάσει προεπιλογής το <span...> δεν περιέχει κανένα στυλ, ενώ το <div...> περιέχει ως στυλ το style="display:block;". Αυτό σημαίνει πως το να γράψουμε πχ.
Εκτός<div>Εντός</div>Εκτός

ισοδυναμεί με το γράψουμε
Εκτός<br/>Εντός<br/>Εκτός

        Kατά τα άλλα, τα δύο tags έχουν εντελώς ίδιες δυνατότητες και μπορούμε να ορίσουμε το στυλ τους, όπως και σε κάθε άλλο html tag, απλώς ορίζοντας σε κάθε span ή div το id τους ή το όνομα της class στην οποία ανήκουν. Πχ. <div class="sample_class"> ή <div id="sample_id">

Comments

Popular Posts