Utilia
Κατηγορίες ▾
Γλώσσα: el ▾

Μορφοποίηση HTML

Μορφοποιήστε ακατάστατο HTML με καθαρές εσοχές ή ελαχιστοποιήστε το με ασφάλεια στο πρόγραμμα περιήγησής σας, μαζί με το ενσωματωμένο CSS και JavaScript.

Πώς να μορφοποιήσετε HTML

  1. Επικολλήστε τον κώδικα HTML ή πατήστε Άνοιγμα αρχείου για να φορτώσετε ένα αρχείο .html ή .htm (έως 10 MB).
  2. Επιλέξτε την Εσοχή (2 κενά, 4 κενά ή Tab) και αν θα γίνεται Αναδίπλωση γραμμών στους 80 ή 120 χαρακτήρες.
  3. Επιλέξτε Εσοχή για και αν θέλετε να έχουν εσοχή μέσα στο <html> και Αφαίρεση σχολίων για να αφαιρεθούν τα σχόλια <!-- … -->.
  4. Πατήστε Μορφοποίηση (beautify) για ευανάγνωστο κώδικα ή Ελαχιστοποίηση για τη μικρότερη ασφαλή έκδοση.
  5. Αντιγράψτε ή κατεβάστε το αποτέλεσμα. Η γραμμή κατάστασης δείχνει το μέγεθος πριν και μετά.

Το αποτέλεσμα εμφανίζεται ως απλό κείμενο στο πλαίσιο εξόδου. Ο κώδικας HTML δεν αποδίδεται ούτε εκτελείται ποτέ σε αυτή τη σελίδα, επομένως τα σενάρια στον κώδικα που επικολλάτε δεν μπορούν να κάνουν τίποτα.

Μορφοποίηση: ευανάγνωστο HTML με συνεπείς εσοχές

Η Μορφοποίηση (beautify) χρησιμοποιεί το js-beautify, τον μορφοποιητή που βρίσκεται πίσω από πολλούς επεξεργαστές κώδικα:

  • τα στοιχεία επιπέδου μπλοκ μπαίνουν σε δικές τους γραμμές, με εσοχή ανάλογα με το βάθος εμφώλευσης, ενώ τα ενσωματωμένα στοιχεία όπως τα <a>, <b> ή <span> μένουν μέσα στο κείμενο·
  • τα περιεχόμενα των <script> και <style> μορφοποιούνται ως JavaScript και CSS·
  • τα <pre> και <textarea> μένουν ακριβώς όπως γράφτηκαν, αφού τα κενά τους είναι ορατά·
  • οι διαδοχικές κενές γραμμές περιορίζονται σε μία·
  • με ορισμένο πλάτος αναδίπλωσης, οι μεγάλες γραμμές κειμένου και οι μεγάλες λίστες χαρακτηριστικών αναδιπλώνονται.

Η μορφοποίηση δεν διορθώνει σπασμένη σήμανση: ένα <div> που δεν κλείνει παραμένει ανοιχτό και η εσοχή που ακολουθεί δείχνει πού βρίσκεται το πρόβλημα.

Ελαχιστοποίηση: μικρότερο HTML χωρίς αλλαγή της σελίδας

Η Ελαχιστοποίηση ακολουθεί σκόπιμα συντηρητική προσέγγιση:

  • οι διαδοχικές σειρές κενών, tab και αλλαγών γραμμής στο κείμενο γίνονται ένα μόνο κενό, όπως ακριβώς τις εμφανίζει το πρόγραμμα περιήγησης·
  • τα κενά δίπλα σε στοιχεία επιπέδου μπλοκ και στοιχεία κεφαλίδας (<div>, <p>, <li>, <td>, <meta>, <br>…) αφαιρούνται, επειδή δεν αποδίδονται ποτέ·
  • ένα μεμονωμένο κενό ανάμεσα σε ενσωματωμένα στοιχεία διατηρείται, ώστε το <b>μεγάλος</b> <i>κόσμος</i> να μη γίνει «μεγάλοςκόσμος»·
  • τα σχόλια αφαιρούνται όταν είναι επιλεγμένο το Αφαίρεση σχολίων, εκτός από τα υπό συνθήκη σχόλια (<!--[if IE]>) και τα σχόλια που ξεκινούν με <!--!·
  • τα περιεχόμενα των <script>, <style>, <pre> και <textarea> δεν αγγίζονται ποτέ και οι τιμές των χαρακτηριστικών διατηρούνται ακριβώς, μαζί με τα εισαγωγικά.

Δεν αφαιρεί προαιρετικές ετικέτες κλεισίματος, δεν ξαναγράφει χαρακτηριστικά και δεν συμπιέζει ενσωματωμένη JavaScript και CSS: αυτές οι βελτιστοποιήσεις εξοικονομούν λίγο περισσότερο, αλλά μπορεί να χαλάσουν σελίδες. Στις περισσότερες σελίδες, η συμπίεση HTTP (gzip ή Brotli) εξοικονομεί πολύ περισσότερα από οποιονδήποτε ελαχιστοποιητή, οπότε η ελαχιστοποίηση είναι πιο χρήσιμη για HTML που ενσωματώνεται σε email, πρότυπα ή συμβολοσειρές JavaScript.

Συχνές ερωτήσεις

Μεταφορτώνεται ο κώδικάς μου;

Όχι. Τόσο η μορφοποίηση όσο και η ελαχιστοποίηση εκτελούνται στο πρόγραμμα περιήγησής σας· ο κώδικάς σας δεν φεύγει ποτέ από τον υπολογιστή σας.

Γιατί η σελίδα μου φαίνεται διαφορετική μετά την ελαχιστοποίηση;

Σε κανονικές περιπτώσεις δεν πρέπει. Η μοναδική εξαίρεση είναι το CSS που αλλάζει τον τρόπο εμφάνισης των κενών, για παράδειγμα το white-space: pre σε στοιχείο διαφορετικό από τα <pre> ή <textarea>, ή ένα στοιχείο του οποίου η εμφάνιση άλλαξε από block σε inline: τα κενά που συμπτύχθηκαν εκεί γίνονται ορατά.

Ελέγχει ο μορφοποιητής την εγκυρότητα του HTML μου;

Όχι. Μορφοποιεί ό,τι του δώσετε. Για να ελέγξετε ότι η σήμανση είναι έγκυρη, χρησιμοποιήστε έναν επικυρωτή όπως το W3C Nu HTML Checker.

Μπορώ να μορφοποιήσω πρότυπα Vue, Svelte ή Django;

Κατά το μεγαλύτερο μέρος, ναι. Οι ετικέτες προτύπων μέσα σε κείμενο και χαρακτηριστικά διατηρούνται, αλλά η σύνθετη σύνταξη προτύπων μπορεί να μπερδέψει τις εσοχές, γι’ αυτό ελέγξτε το αποτέλεσμα.

Τι αλλάζει το «Εσοχή για <head> και <body>»;

Από προεπιλογή, τα <head> και <body> ξεκινούν στο ίδιο επίπεδο με το <html>, μια κοινή σύμβαση που εξοικονομεί ένα επίπεδο εσοχής. Επιλέξτε την επιλογή για να έχουν εσοχή ένα επίπεδο βαθύτερα.

Σχετικά εργαλεία