Μορφοποίηση HTML online
Μετατρέψτε τον συμπυκνωμένο πηγαίο κώδικα μιας σελίδας σε ευανάγνωστη σήμανση. Οι ετικέτες αποκτούν εσοχές ανάλογα με το βάθος ένθεσης, τα γνωρίσματα οργανώνονται καθαρά και τα ενσωματωμένα scripts και στυλ μορφοποιούνται μαζί με το έγγραφο.
Γιατί ο πηγαίος κώδικας μιας σελίδας μοιάζει έτσι
Οι ελαχιστοποιητές HTML συμπτύσσουν τα κενά ανάμεσα στις ετικέτες, αφαιρούν σχόλια, παραλείπουν προαιρετικές ετικέτες κλεισίματος και αφαιρούν εισαγωγικά από τιμές γνωρισμάτων όπου επιτρέπεται. Τα πρότυπα του διακομιστή περιπλέκουν ακόμη περισσότερο την εικόνα, καθώς μια σελίδα που συναρμολογήθηκε από δεκάδες μικρότερα τμήματα φτάνει ως ενιαία ροή, χωρίς εμφανή σχέση με τα αρχεία που τη δημιούργησαν. Ανοίξτε τον πηγαίο κώδικα σχεδόν οποιουδήποτε ιστοτόπου παραγωγής και θα βρείτε λίγες τεράστιες γραμμές, όπου για να εντοπίσετε το τέλος μιας ενότητας πρέπει να μετράτε ετικέτες με το μάτι.
Η δομή είναι το ζητούμενο
Η HTML είναι δέντρο και ένα δέντρο δεν διαβάζεται όταν εμφανίζεται επίπεδο. Οι εσοχές ανά επίπεδο ένθεσης αποκαλύπτουν αμέσως τη μορφή του εγγράφου: πού τελειώνει η κεφαλίδα, ποιο στοιχείο περιβάλλει το κύριο περιεχόμενο, πόσο βαθιά βρίσκεται ένα στοιχείο διεπαφής και ποια ετικέτα κλεισίματος λείπει. Έτσι ο μορφοποιημένος πηγαίος κώδικας γίνεται χρήσιμος για να ελέγξετε τη σειρά των επικεφαλίδων, να εξετάσετε τη σήμανση που παρήγαγε ένα framework ή να καταλάβετε πώς οργανώθηκε μια συγκεκριμένη ενότητα σε μια άλλη ιστοσελίδα.
Μορφοποιούνται και τα ενσωματωμένα scripts και στυλ
Μια πραγματική σελίδα σπάνια περιέχει μόνο σήμανση. Αποσπάσματα αναλυτικών στοιχείων, δομημένα δεδομένα JSON-LD, αντικείμενα ρυθμίσεων και κρίσιμη CSS ενσωματώνονται απευθείας στο έγγραφο και ο ελαχιστοποιητής τα συμπυκνώνει επίσης. Ο μορφοποιητής επεξεργάζεται κάθε ενσωματωμένο μπλοκ με τον κατάλληλο αναλυτή. Έτσι μια ετικέτα script με ελαχιστοποιημένη JavaScript μετατρέπεται σε ευανάγνωστη JavaScript και μια ετικέτα style σε ευανάγνωστη CSS, διατηρώντας ταυτόχρονα τις σωστές εσοχές μέσα στο συνολικό έγγραφο.
Σεβασμός στις ετικέτες όπου τα κενά έχουν σημασία
Η προσθήκη εσοχών στην HTML αλλάζει τα κενά ανάμεσα στις ετικέτες, και τα κενά ενδέχεται να επηρεάζουν την εμφάνιση. Ο μορφοποιητής το λαμβάνει υπόψη: το περιεχόμενο των pre και textarea μένει ακριβώς όπως είναι, ενώ τα inline στοιχεία δεν χωρίζονται με τρόπο που προσθέτει ή αφαιρεί ορατά διαστήματα γύρω από το κείμενο. Το αποτέλεσμα παραμένει ευανάγνωστο χωρίς να αλλάζει η προβλεπόμενη απόδοση της σελίδας.
Συχνές ερωτήσεις
Μπορώ να επικολλήσω ολόκληρο τον πηγαίο κώδικα μιας σελίδας;
Ναι. Αντιγράψτε τον πηγαίο κώδικα μέσω του view-source στο πρόγραμμα περιήγησής σας ή αποθηκεύστε τη σελίδα και ανοίξτε το αρχείο. Μορφοποιείται ολόκληρο το έγγραφο, μαζί με τα head, body, ενσωματωμένα scripts και δομημένα δεδομένα.
Η μορφοποίηση θα αλλάξει την εμφάνιση της σελίδας;
Κανονικά όχι. Στοιχεία όπου τα κενά είναι σημαντικά, όπως τα pre και textarea, διατηρούνται, ενώ το inline περιεχόμενο αντιμετωπίζεται προσεκτικά. Ωστόσο, μορφοποιείτε πάντα ένα αντίγραφο για ανάγνωση και μην επαναφέρετε το αποτέλεσμα σε παραγωγή χωρίς έλεγχο.
Λειτουργεί με πρότυπα όπως Twig ή Blade;
Εν μέρει. Η απλή σήμανση μορφοποιείται κανονικά, αλλά οι ετικέτες προτύπων με δική τους σύνταξη μπορεί να μπερδέψουν τον αναλυτή HTML. Το εργαλείο προορίζεται για την HTML που λαμβάνει τελικά το πρόγραμμα περιήγησης και όχι για το πρότυπο που τη δημιούργησε.