Οι διαφορές μεταξύ στοιχείων επιπέδου μπλοκ και ενσωματωμένων στοιχείων

HTML αποτελείται από διάφορα στοιχεία που λειτουργούν ως δομικά στοιχεία των ιστοσελίδων. Κάθε ένα από αυτά τα στοιχεία εμπίπτει σε μία από τις δύο κατηγορίες: στοιχεία επιπέδου μπλοκ ή ένα ενσωματωμένο στοιχείο. Η κατανόηση της διαφοράς μεταξύ αυτών των δύο τύπων στοιχείων είναι ένα σημαντικό βήμα στη δημιουργία ιστοσελίδων.

Στοιχεία επιπέδου μπλοκ

Λοιπόν, τι είναι ένα στοιχείο επιπέδου μπλοκ; Ένα στοιχείο επιπέδου μπλοκ είναι ένα στοιχείο HTML που ξεκινά μια νέα γραμμή σε μια ιστοσελίδα και επεκτείνει το πλήρες πλάτος του διαθέσιμου οριζόντιου χώρου του γονικού του στοιχείου. Δημιουργεί μεγάλα τμήματα περιεχομένου όπως παραγράφους ή τμήματα σελίδων. Στην πραγματικότητα, τα περισσότερα στοιχεία HTML είναι στοιχεία επιπέδου μπλοκ.

Τα στοιχεία επιπέδου μπλοκ χρησιμοποιούνται στο σώμα του εγγράφου HTML. Μπορούν να περιέχουν ενσωματωμένα στοιχεία, καθώς και άλλα στοιχεία επιπέδου μπλοκ.

Ενσωματωμένα στοιχεία

Σε αντίθεση με ένα στοιχείο επιπέδου μπλοκ, ένα ενσωματωμένο στοιχείο:

• Μπορεί να ξεκινήσει μέσα σε μια γραμμή.
instagram viewer
• Δεν ξεκινά μια νέα γραμμή.
• Το πλάτος του εκτείνεται μόνο στο βαθμό που ορίζεται από τις ετικέτες του.

Ένα παράδειγμα ενός ενσωματωμένου στοιχείου είναι το , η οποία κάνει τη γραμματοσειρά του περιεχομένου κειμένου που περιέχεται σε έντονη γραφή. Ένα ενσωματωμένο στοιχείο γενικά περιέχει μόνο άλλα ενσωματωμένα στοιχεία, ή δεν μπορεί να περιέχει καθόλου, όπως το
σπάσιμο ετικέτας.

Υπάρχει επίσης ένας τρίτος τύπος στοιχείου σε HTML: εκείνοι που δεν εμφανίζονται καθόλου. Αυτά τα στοιχεία παρέχουν πληροφορίες σχετικά με τη σελίδα, αλλά δεν εμφανίζονται όταν αποδίδονται σε πρόγραμμα περιήγησης στο Web.

Για παράδειγμα:

•  ορίζει μεταδεδομένα.
•  είναι το στοιχείο εγγράφου HTML που κρατά αυτά τα στοιχεία.

Εναλλαγή τύπων στοιχείων Inline και Block

Μπορείτε να αλλάξετε τον τύπο ενός στοιχείου από ενσωματωμένο σε αποκλεισμό ή αντίστροφα, χρησιμοποιώντας μία από αυτές τις ιδιότητες CSS:

• οθόνη: μπλοκ; 

• οθόνη: inline; 

• οθόνη: κανένα;

ο CSS Η ιδιότητα εμφάνισης σάς επιτρέπει να αλλάξετε μια ενσωματωμένη ιδιότητα σε αποκλεισμό ή ένα μπλοκ σε ενσωματωμένο ή να μην εμφανίζεται καθόλου.

Πότε να αλλάξετε την ιδιότητα εμφάνισης

Σε γενικές γραμμές, αφήστε την ιδιότητα εμφάνισης μόνη της, αλλά υπάρχουν ορισμένες περιπτώσεις στις οποίες μπορεί να είναι χρήσιμη η εναλλαγή των ενσωματωμένων και αποκλεισμένων ιδιοτήτων εμφάνισης.

• Μενού οριζόντιας λίστας: Οι λίστες είναι στοιχεία σε επίπεδο μπλοκ, αλλά αν θέλετε το μενού σας να εμφανίζεται οριζόντια, πρέπει να μετατρέψετε τη λίστα σε ένα ενσωματωμένο στοιχείο, έτσι ώστε κάθε στοιχείο μενού να μην ξεκινά σε μια νέα γραμμή.
• Κεφαλίδες στο κείμενο: Μερικές φορές μπορεί να θέλετε μια κεφαλίδα να παραμείνει στο κείμενο, αλλά να διατηρήσετε τις τιμές κεφαλίδας HTML. Η αλλαγή των τιμών h1 έως h6 σε ενσωματωμένο θα επιτρέψει στο κείμενο που έρχεται μετά την ετικέτα κλεισίματος να συνεχίσει να ρέει δίπλα του στην ίδια γραμμή, αντί να ξεκινήσει σε μια νέα γραμμή.
• Αφαίρεση του στοιχείου: Εάν θέλετε να αφαιρέσετε ένα στοιχείο εντελώς από το έγγραφο κανονική ροή, μπορείτε να ρυθμίσετε την οθόνη σε

  κανένας

  Μια σημείωση, προσέξτε κατά τη χρήση της οθόνης: κανένα. Αν και αυτό το στυλ θα κάνει, πράγματι, ένα στοιχείο αόρατο, δεν θέλετε ποτέ να το χρησιμοποιήσετε για να αποκρύψετε κείμενο που προσθέσατε για λόγους SEO, αλλά δεν θέλετε να εμφανίζεται για τους επισκέπτες. Αυτός είναι ένας σίγουρος τρόπος για να τιμωρήσετε τον ιστότοπό σας για μια προσέγγιση μαύρου καπέλου στο SEO.

Συνήθη λάθη μορφοποίησης Inline Element

Ένα από τα πιο συνηθισμένα λάθη που κάνει ένας νεοεισερχόμενος στο σχεδιασμό Web είναι να προσπαθήσει να ορίσει ένα πλάτος σε ένα ενσωματωμένο στοιχείο. Αυτό δεν λειτουργεί επειδή τα πλάτη ενσωματωμένων στοιχείων δεν καθορίζονται από το πλαίσιο κοντέινερ.

Τα ενσωματωμένα στοιχεία αγνοούν πολλές ιδιότητες:

• πλάτος

  και

  ύψος

• μέγιστο πλάτος

  και

  μέγιστο ύψος

• ελάχιστο πλάτος

  και

  ελάχιστο ύψος

Εάν πρέπει να καθορίσετε το πλάτος ή το ύψος που πρέπει να καταλάβει ένα στοιχείο, θα θελήσετε να το εφαρμόσετε στο στοιχείο επιπέδου μπλοκ που περιέχει το ενσωματωμένο κείμενο.