Πώς να το χρησιμοποιήσετε
- Επικολλήστε HTML στο πλαίσιο εισαγωγής, ανοίξτε ένα αρχείο .html ή δοκιμάστε το παράδειγμα.
- Επιλέξτε Ομορφοποίηση για εσοχές και ευανάγνωστη σήμανση ή Συμπίεση για συμπαγή έξοδο.
- Κατά την ομορφοποίηση, επιλέξτε 2 κενά, 4 κενά ή στηλοθέτες και αποφασίστε αν θα διατηρηθούν τα σχόλια.
- Αντιγράψτε το αποτέλεσμα ή κατεβάστε το ως αρχείο .html.
Πώς λειτουργεί
Ο μορφοποιητής διαβάζει το HTML με έναν ανεκτικό αναλυτή (tokenizer), όπως περίπου κάνει ένα πρόγραμμα περιήγησης, και το γράφει ξανά. Δεν αποδίδει ποτέ την είσοδο, επομένως τα σενάρια στον επικολλημένο κώδικα δεν μπορούν να εκτελεστούν και τίποτα δεν φορτώνεται από τον ιστό.
Η επιλογή Beautify τοποθετεί κάθε στοιχείο επιπέδου μπλοκ (div, p, ul, li, section, table, …) σε δική του γραμμή, με εσοχή ανάλογα με το βάθος εμφώλευσης. Το κείμενο και τα ενσωματωμένα στοιχεία όπως a, b, em, span, code, img και br παραμένουν μαζί σε μία γραμμή, ώστε τα κενά μεταξύ λέξεων και συνδέσμων να μην αλλάζουν με τρόπο που αλλοιώνει την εμφανιζόμενη σελίδα. Οι ακολουθίες κενών και αλλαγών γραμμής στο κείμενο γίνονται ένα μόνο κενό, όπως ακριβώς τα εμφανίζουν ούτως ή άλλως τα προγράμματα περιήγησης.
Το περιεχόμενο των στοιχείων pre, textarea, script και style αντιγράφεται ακριβώς όπως είναι γραμμένο, συμπεριλαμβανομένων των κενών διαστημάτων και τυχόν χαρακτήρων < ή >. Τα στοιχεία χωρίς περιεχόμενο (void elements) όπως br, img, input, meta και link δεν λαμβάνουν ποτέ ετικέτα κλεισίματος. Οι αυτοκλειόμενες ετικέτες όπως <path /> σε ενσωματωμένο SVG παραμένουν αυτοκλειόμενες.
Η επιλογή Minify συμπτύσσει τα κενά διαστήματα στο κείμενο σε μονά κενά, αφαιρεί τα κενά δίπλα σε στοιχεία μπλοκ, κανονικοποιεί τα διαστήματα μεταξύ χαρακτηριστικών και, αν η επιλογή «Διατήρηση σχολίων» είναι απενεργοποιημένη, αφαιρεί τα σχόλια. Τα σχόλια υπό όρους διατηρούνται πάντα.
Το εργαλείο δεν διορθώνει μη έγκυρο HTML, δεν προσθέτει ετικέτες που λείπουν, δεν αναδιατάσσει τα χαρακτηριστικά ούτε συμπτύσσει το CSS και τη JavaScript μέσα στα στοιχεία style και script. Τα στοιχεία που μένουν ανοιχτά κλείνουν στο τέλος του γονικού τους στοιχείου και μια ετικέτα κλεισίματος χωρίς αντίστοιχη ετικέτα ανοίγματος διατηρείται όπως είναι γραμμένη.
Παραδείγματα
Ανάγνωση παραγόμενης σήμανσης
Ένα CMS εξάγει ένα πρότυπο ως μία μεγάλη γραμμή. Η ομορφοποίηση με 2 κενά εμφανίζει το nav, τα στοιχεία λίστας και το κύριο περιεχόμενο ως δέντρο με εσοχές, ενώ το “Prices include <strong>VAT</strong>.” παραμένει σε μία ευανάγνωστη γραμμή.
Προετοιμασία προτύπου email
Ελαχιστοποιήστε ένα email HTML με απενεργοποιημένα σχόλια για να μειώσετε το μέγεθός του. Ένα μπλοκ <pre> με πίνακα τιμών και το ενσωματωμένο <style> παραμένουν ακριβώς όπως ήταν.
Έλεγχος δομής
Όταν λείπει ένα κλείσιμο </div>, η μορφοποιημένη έξοδος εμφανίζει τα επόμενα στοιχεία με μία επιπλέον εσοχή, κάτι που δείχνει εύκολα πού θα έπρεπε να είχε κλείσει το στοιχείο.
Συχνές ερωτήσεις
Θα αλλάξει η εμφάνιση της σελίδας μου με την ομορφοποίηση;
Σχεδόν σε όλες τις περιπτώσεις όχι. Τα κενά μέσα σε στοιχεία block συμπτύσσονται και μετατρέπονται σε αλλαγές γραμμής, τις οποίες τα προγράμματα περιήγησης αγνοούν. Το κείμενο και τα inline στοιχεία παραμένουν στην ίδια γραμμή, ενώ τα pre, textarea, script και style δεν αλλάζουν. Εξαίρεση αποτελούν οι σελίδες που βασίζονται στο CSS white-space: pre σε συνηθισμένα στοιχεία.
Ελαχιστοποιεί το CSS και τη JavaScript μέσα στη σελίδα;
Όχι. Το περιεχόμενο των script και style παραμένει ακριβώς όπως γράφτηκε, ώστε να μη σπάσει. Χρησιμοποιήστε το εργαλείο μορφοποίησης CSS για να ελαχιστοποιήσετε ξεχωριστά ένα φύλλο στυλ.
Είναι ασφαλές να επικολλήσω HTML από άγνωστη πηγή;
Ναι. Η είσοδος αντιμετωπίζεται αποκλειστικά ως κείμενο και δεν εισάγεται ποτέ στη σελίδα, επομένως τα scripts της δεν εκτελούνται και οι εικόνες ή οι σύνδεσμοί της δεν φορτώνονται.
Επικυρώνει το HTML μου;
Όχι. Είναι σκόπιμα ανεκτικό και μορφοποιεί χαλασμένη σήμανση αντί να την απορρίπτει. Οι ετικέτες κλεισίματος που δεν αντιστοιχούν διατηρούνται, ώστε η εσοχή να σας βοηθά να τις εντοπίσετε, αλλά δεν παράγεται λίστα σφαλμάτων.
Απόρρητο
Ο κώδικάς σας HTML επεξεργάζεται μόνο στο πρόγραμμα περιήγησής σας και δεν αποδίδεται ούτε μεταφορτώνεται ποτέ. Τίποτα δεν αποθηκεύεται ούτε περιλαμβάνεται στα αναλυτικά στοιχεία.