Περιγράψτε τα κενά στο HTML και τη χρήση τους…

Τα κενά διαστήματα στο HTML, επίσης γνωστά ως "whitespace", είναι χαρακτήρες που δεν εμφανίζονται από το πρόγραμμα περιήγησης (κενά, καρτέλες, χαρακτήρες νέας γραμμής). Τα προγράμματα περιήγησης τα συμπτύσσουν συνήθως σε ένα μόνο κενό κατά την απόδοση, εκτός από ορισμένα στοιχεία και ιδιότητες CSS.

Χρήση:

Βελτίωση αναγνωσιμότητας κώδικα: Οι προγραμματιστές χρησιμοποιούν κενά διαστήματα για οπτικό διαχωρισμό στοιχείων στον πηγαίο κώδικα HTML, καθιστώντας τον πιο κατανοητό και δομημένο. Αυτό δεν επηρεάζει την εμφάνιση της σελίδας στον περιηγητή.
Διαχωρισμός inline στοιχείων: Οι περιηγητές εισάγουν αυτόματα ένα κενό μεταξύ inline στοιχείων που τοποθετούνται το ένα δίπλα στο άλλο στον κώδικα HTML. Αυτή η συμπεριφορά μπορεί να αλλάξει με CSS.
Στοιχεία που διατηρούν κενά διαστήματα:
- <pre>: Διατηρεί όλα τα κενά και τις γραμμές, μορφοποιώντας το κείμενο ακριβώς όπως γράφτηκε στον πηγαίο κώδικα.
- <code>: Συνήθως χρησιμοποιείται μέσα σε <pre> για διατήρηση της μορφοποίησης κώδικα.
- <textarea>: Μέσα σε πεδίο εισαγωγής κειμένου, διατηρούνται τα κενά και οι γραμμές.
Ιδιότητα CSS white-space: Επιτρέπει τον έλεγχο του τρόπου επεξεργασίας των κενών διαστημάτων από τον περιηγητή:
- normal (προεπιλογή): Συμπτύσσει τα κενά, οι γραμμές διακοπής αγνοούνται (εκτός από <br>).
- nowrap: Συμπτύσσει τα κενά, αποτρέποντας τις γραμμές διακοπής.
- pre: Ισοδυναμεί με τη χρήση της ετικέτας <pre>.
- pre-wrap: Διατηρεί τα κενά και τις γραμμές, επιτρέπει επίσης την αυτόματη διαμόρφωση γραμμής σύμφωνα με το πλάτος του κοντέινερ.
- pre-line: Συμπτύσσει τα κενά, διατηρεί τις γραμμές διακοπής.

Παράδειγμα συμπίεσης κενών διαστημάτων:

HTML:

<p>
    Πολλά        κενά

    και
    γραμμές
    διακοπής
</p>

Αποτέλεσμα στον περιηγητή:

Πολλά κενά και γραμμές διακοπής

Παράδειγμα με <pre>:

HTML:

<pre>
    Τα κενά διατηρούνται
        όλα
            ακριβώς
    και
    γραμμές
</pre>

Αποτέλεσμα στον περιηγητή:

    Τα κενά διατηρούνται
        όλα
            ακριβώς
    και
    γραμμές

Παράδειγμα με CSS white-space:

HTML:

<div class="pre-wrap">
    Αυτό το κείμενο θα διατηρεί
        τα κενά του
            και τις γραμμές

    και θα προσαρμόζεται αυτόματα στο πλάτος.
</div>

CSS:

.pre-wrap {
    white-space: pre-wrap;
    border: 1px solid black;
    width: 150px;
}

Περιγράψτε τα κενά στο HTML και τη χρήση τους.