1.4 Κατευθυντήριες γραμμές και συμβουλές για τη δημιουργία καλού κώδικα HTML

Ένας συνεπής, καθαρός και τακτοποιημένος κώδικας HTML καθιστά ευκολότερο στους άλλους να διαβάζουν και να κατανοούν τον κώδικά σας.

Εδώ είναι μερικές κατευθυντήριες γραμμές και συμβουλές για τη δημιουργία καλού κώδικα HTML:

  1. Χρησιμοποιήστε σωστή σύνταξη: Βεβαιωθείτε ότι το HTML σας ακολουθεί τη σωστή σύνταξη με ανοίγοντες και κλείνοντες ετικέτες, σωστή εμφάνιση ενθέτων και σωστή δομή.
  2. Προτιμήστε σημασιολογικά στοιχεία: Χρησιμοποιήστε τα σημασιολογικά στοιχεία HTML (όπως <header>, <nav>, <section>, <article>, <footer>) για να περιγράψετε τη δομή και το νόημα του περιεχομένου σας.
  3. Σωστή ιεραρχία ετικετών: Βεβαιωθείτε ότι οι ετικέτες HTML τοποθετούνται με τη σωστή ιεραρχία και δομή, με κατάλληλη χρήση στοιχείων όπως <h1><h6> για τίτλους, <p> για παράγραφους κ.λπ.
  4. Χρησιμοποιήστε κατάλληλα ονόματα κλάσεων και αναγνωριστικών: Όταν δίνετε ονόματα σε κλάσεις ή αναγνωριστικά, προσπαθήστε να είναι περιγραφικά και συνεπή. Αυτό θα βοηθήσει στην κατανόηση της δομής του κώδικα και στην εφαρμογή στυλ και λειτουργικότητας.
  1. Χρησιμοποιήστε σωστά τα επιλογεία: Επιλέξετε τις κατάλληλες ετικέτες HTML για κατηγοριοποίηση και δομή του περιεχομένου. Παραδείγματα είναι οι ετικέτες <ul> για αμέτρητες λίστες, <ol> για αριθμημένες λίστες και <dl> για λίστες ορισμών.
  2. Σχολιάστε τον κώδικά σας: Προσθέστε σχόλια στον κώδικά σας για να εξηγήσετε τη λογική και τη λειτουργία του. Αυτό θα βοηθήσει εσάς και άλλους προγραμματιστές να κατανοήσουν τον κώδικα.
  3. Επαναχρησιμοποίηση κώδικα: Χρησιμοποιήστε την αρχή της επαναχρησιμοποίησης για να αποφύγετε την επανάληψη του κώδικα. Δημιουργήστε επαναχρησιμοποιήσιμα τμήματα κώδικα με τη χρήση κλάσεων ή id και εισαγάγετε τα όπου χρειάζονται.
  4. Είναι καλή πρακτική να ελέγχετε τον κώδικά σας: Χρησιμοποιήστε έναν επεξεργαστή κειμένου ή ένα εργαλείο επεξεργασίας κώδικα που να παρέχει λειτουργίες ελέγχου σύνταξης για να εντοπίζετε και να διορθώνετε σφάλματα.
  1. Συμμορφωθείτε με τα πρότυπα και τις συστάσεις: Ακολουθήστε τις προδιαγραφές και τις συστάσεις που ορίζουν οι οργανισμοί όπως η W3C για το σωστό HTML.

Αυτές είναι μερικές κατευθυντήριες γραμμές για τη δημιουργία καλού HTML κώδικα. Πάντα θυμηθείτε να διατηρείτε τον κώδικά σας καθαρό, οργανωμένο και ευανάγνωστο για να διευκολύνετε τη συντήρηση και τη συνεργασία με άλλους προγραμματιστές.

Πάντα δηλώνετε τον τύπο του εγγράφου ως πρώτη γραμμή στο έγγραφό σας.

Ο σωστός τύπος εγγράφου για τη γλώσσα HTML είναι ο εξής:

<!DOCTYPE html>

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

[adinserter block=”2″]

Παραδείγματα για διάφορες εκδόσεις του HTML:

Για HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Για HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Για XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

Το HTML επιτρέπει τον συνδυασμό κεφαλαίων και πεζών γραμμάτων στα ονόματα των στοιχείων.

Ωστόσο, συνιστούμε τη χρήση πεζών γραμμάτων για τα ονόματα των στοιχείων, διότι:

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

Παράδειγμα:

<!-- Σωστή χρήση πεζών γραμμάτων -->
<div>
  <p>Κείμενο</p>
</div>

<!-- Λανθασμένη χρήση κεφαλαίων και πεζών γραμμάτων -->
<DIV>
  <P>Κείμενο</P>
</DIV>

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

Στο HTML, δεν είναι απαραίτητο να κλείνετε όλα τα στοιχεία (για παράδειγμα, το στοιχείο <p>).

Ωστόσο, συνιστούμε ανεπιφύλακτα να κλείνετε όλα τα στοιχεία HTML, όπως στο παρακάτω παράδειγμα:

<p>Αυτό είναι ένα παράδειγμα κειμένου.</p>

Αν και οι περισσότεροι περιηγητές μπορούν να αντιληφθούν το περιεχόμενο του στοιχείου <p> ακόμα και αν δεν κλείνει επίσημα με το στοιχείο κλεισίματος </p>, η κλείσιμο όλων των στοιχείων προάγει την καθαρή και συνεπή δομή του κώδικα.

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

Το HTML επιτρέπει τον συνδυασμό κεφαλαίων και πεζών γραμμάτων στα ονόματα των γνωρισμάτων (attributes).

Ωστόσο, συνιστούμε τη χρήση πεζών γραμμάτων για τα ονόματα των γνωρισμάτων, διότι:

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

Παραδείγματα:

<!-- Σωστή χρήση πεζών γραμμάτων -->
<input type="text" name="username">

<!-- Λανθασμένη χρήση κεφαλαίων γραμμάτων -->
<input type="text" NAME="username">

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

Το HTML επιτρέπει τη χρήση των τιμών των γνωρισμάτων χωρίς εισαγωγικά.

Ωστόσο, συνιστούμε να εισάγετε πάντα τις τιμές των γνωρισμάτων με εισαγωγικά, διότι:

Οι περισσότεροι προγραμματιστές χρησιμοποιούν εισαγωγικά για τις τιμές των γνωρισμάτων
Οι εισαγωγικές τιμές είναι πιο ευανάγνωστες
ΠΡΕΠΕΙ να χρησιμοποιήσετε εισαγωγικά αν η τιμή περιέχει κενά

[adinserter block=”3″]

Παραδείγματα:

<!-- Σωστή χρήση εισαγωγικών -->
<input type="text" value="John Doe">

<!-- Λανθασμένη χρήση χωρίς εισαγωγικά -->
<input type=text value=John Doe>

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

Πάντα καθορίζετε το γνώρισμα “alt” για τις εικόνες. Αυτό το γνώρισμα είναι σημαντικό εάν η εικόνα για οποιονδήποτε λόγο δεν μπορεί να εμφανιστεί.

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

Παραδείγματα:

<!-- Συμπληρώνετε το γνώρισμα "alt" για περιγραφή της εικόνας -->
<img src="image.jpg" alt="Περιγραφή της εικόνας">

<!-- Καθορίζετε το πλάτος και το ύψος της εικόνας -->
<img src="image.jpg" alt="Περιγραφή της εικόνας" width="500" height="300">

Η καθορισμένη τιμή για το πλάτος και το ύψος μπορεί να είναι σε εικονοστοιχεία (pixels) ή σε ποσοστό του γονικού στοιχείου. Ο καθορισμός του πλάτους και του ύψους των εικόνων συμβάλλει στην ομαλή φόρτωση και αποτρέπει τις αλλαγές στη διάταξη της σελίδας κατά τη φόρτωση της εικόνας.

Το HTML επιτρέπει την παρουσία κενών γύρω από τα ισόνομα σημάντρα (=) στα γνωρίσματα (attributes). Ωστόσο, η χρήση χωρίς κενά είναι πιο ευανάγνωστη και ομαδοποιεί καλύτερα τις συνιστώσες.

Παραδείγματα:

<!-- Συνιστώμενη χρήση χωρίς κενά -->
<input type="text" name="username" value="JohnDoe">

<!-- Αποδεκτή, αλλά λιγότερο ευανάγνωστη χρήση με κενά -->
<input type = "text" name = "username" value = "JohnDoe">

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

Όταν χρησιμοποιείτε έναν επεξεργαστή HTML, δεν είναι βολικό να κάνετε οριζόντια κύλιση για να διαβάσετε τον HTML κώδικα.

Προσπαθήστε να αποφεύγετε πολύ μακριές γραμμές κώδικα.

Αντί για αυτό, μπορείτε να ακολουθήσετε μερικές κατευθυντήριες γραμμές:

  • Οργανώστε τον κώδικά σας σε λογικές και αναγνώσιμες ενότητες.
  • Χωρίστε τον κώδικα σε περισσότερες γραμμές όταν αυτό είναι δικαιολογημένο και βελτιώνει την αναγνωσιμότητα.
  • Χρησιμοποιήστε κενά ή στοίχιση για να ομαδοποιήσετε στοιχεία κώδικα και να τονίσετε τη δομή του.
  • Χρησιμοποιήστε εργαλεία αυτοματοποιημένης μορφοποίησης (prettifiers) που μπορούν να ευθυγραμμίσουν αυτόματα τον κώδικά σας για καλύτερη αναγνωσιμότητα.

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

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

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

Για αυξημένη αναγνωσιμότητα, χρησιμοποιήστε δύο κενά για τη στοίχιση. Μην χρησιμοποιείτε το πλήκτρο tab.

[adinserter block=”4s”]

Παραδείγματα:

<!-- Σωστή χρήση κενών γραμμών και στοιχίσεων -->
<div>
  <h1>Κείμενο</h1>

  <p>Παράγραφος 1</p>

  <p>Παράγραφος 2</p>
</div>

<!-- Λανθασμένη χρήση περιττών κενών γραμμών και στοιχίσεων -->
<div>

  <h1>Κείμενο</h1>


  <p>Παράγραφος 1</p>

  <p>Παράγραφος 2</p>

</div>

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

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>30</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>

Στο παραπάνω παράδειγμα, δημιουργείται ένας πίνακας HTML με δύο στήλες: “Όνομα”, “Ηλικία”, “Email”. Ο πίνακας περιλαμβάνει μια επικεφαλίδα <thead> που περιέχει τις επικεφαλίδες των στηλών, καθώς και ένα σώμα <tbody> που περιέχει τα περιεχόμενα του πίνακα.

[adinserter block=”5″]

Οι γραμμές του πίνακα δημιουργούνται με το στοιχείο <tr>, ενώ οι κελίδες του πίνακα δημιουργούνται με το στοιχείο <td>. Ο πίνακας περιέχει δύο γραμμές με τις πληροφορίες “John Doe”, “25”, “john@example.com” και “Jane Smith”, “30”, “jane@example.com”.

Αυτός ο πίνακας ακολουθεί τις βέλτιστες πρακτικές για τη δημιουργία καθαρού, οργανωμένου και ευανάγνωστου κώδικα HTML για πίνακες.

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

Στο παραπάνω παράδειγμα, δημιουργείται μια αταξινόμητη λίστα (unordered list) με τρία στοιχεία. Τα στοιχεία της λίστας δημιουργούνται με το στοιχείο <li>. Η λίστα περιλαμβάνει τα στοιχεία “Apple”, “Banana” και “Orange”.

Αυτό το παράδειγμα ακολουθεί τις βέλτιστες πρακτικές για τη δημιουργία καθαρού, οργανωμένου και ευανάγνωστου κώδικα HTML για λίστες.

Το στοιχείο <title> απαιτείται στο HTML.

Το περιεχόμενο του τίτλου σε μια σελίδα είναι πολύ σημαντικό για την βελτιστοποίηση μηχανών αναζήτησης (SEO)! Ο τίτλος της σελίδας χρησιμοποιείται από τους αλγορίθμους των μηχανών αναζήτησης για να αποφασίσουν τη σειρά κατατεταγμένων σελίδων στα αποτελέσματα αναζήτησης.

Το στοιχείο <title>:

  • Ορίζει έναν τίτλο στη γραμμή εργαλείων του προγράμματος περιήγησης
  • Παρέχει έναν τίτλο για τη σελίδα όταν προστίθεται στα αγαπημένα
  • Εμφανίζει έναν τίτλο για τη σελίδα στα αποτελέσματα των μηχανών αναζήτησης

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

Ένας HTML κώδικας μπορεί να είναι έγκυρος ακόμα και χωρίς τις ετικέτες <html> και <body>.

Οι περισσότεροι σύγχρονοι περιηγητές έχουν τη δυνατότητα να ερμηνεύουν και να προβάλλουν τον HTML κώδικα ακόμα και αν λείπουν αυτές οι ετικέτες. Αυτό συμβαίνει επειδή οι περισσότεροι περιηγητές έχουν τη δυνατότητα να εκτελέσουν έναν είδος αυτόματης διόρθωσης και επισυμπλήρωσης του κώδικα για να δημιουργήσουν ένα έγκυρο δέντρο DOM.

Ωστόσο, παρά το γεγονός ότι μπορεί να λειτουργήσει σε περισσότερες περιπτώσεις, είναι καλή πρακτική να περιλαμβάνετε τις ετικέτες <html> και <body> στον HTML κώδικα σας. Αυτό καθιστά τον κώδικα πιο οργανωμένο και ακολουθεί τις προτεινόμενες δομές της γλώσσας HTML.

Στην HTML, είναι προαιρετικό να κλείνουμε άδεια στοιχεία (empty elements).

Τα άδεια στοιχεία είναι στοιχεία που δεν περιέχουν περιεχόμενο μεταξύ της ανοίξτε και κλείστε ετικέτας. Παραδείγματα άδειων στοιχείων είναι η εικόνα <img>, το βίντεο <video>, και το άλλο <source>.

Έτσι, τα παρακάτω παραδείγματα κώδικα είναι έγκυρα:

<img src="image.jpg" alt="Example Image">
<input type="text" name="username" value="">
<br>

Σημειώστε ότι η παράλειψη του κλειστού ετικέτας σε άδεια στοιχεία είναι αποδεκτή από τους περισσότερους σύγχρονους περιηγητές. Ωστόσο, εάν ακολουθείτε έναν αυστηρότερο προγραμματισμό και θέλετε να τηρείτε τις συντακτικές συστάσεις της HTML, τότε θα πρέπει να κλείνετε και τα άδεια στοιχεία:

<img src="image.jpg" alt="Example Image" />
<input type="text" name="username" value="" />
<br />

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

Θα πρέπει πάντα να περιλαμβάνετε το attribut lang μέσα στην ετικέτα , προκειμένου να δηλώσετε τη γλώσσα της ιστοσελίδας σας. Αυτό βοηθά τις μηχανές αναζήτησης και τους περιηγητές να κατανοήσουν τη γλώσσα της σελίδας σας και να παρέχουν τη σωστή απεικόνιση και επεξεργασία.

Παράδειγμα:

<!DOCTYPE html>
<html lang="el">
  <head>
    <meta charset="UTF-8">
    <title>Τίτλος Ιστοσελίδας</title>
  </head>
  <body>
    <!-- Περιεχόμενο ιστοσελίδας -->
  </body>
</html>

Στο παραπάνω παράδειγμα, ο κώδικας HTML περιλαμβάνει το attribut lang με την τιμή “el” για να δηλώσει ότι η γλώσσα της ιστοσελίδας είναι τα ελληνικά (Greek). Αυτή η πληροφορία είναι χρήσιμη για την απόδοση του κειμένου, την αναζήτηση και άλλες λειτουργίες που αφορούν τη γλώσσα της σελίδας.

Για να διασφαλίσετε τη σωστή ερμηνεία και τη σωστή ευρετηρίαση από τις μηχανές αναζήτησης, θα πρέπει να ορίζετε τόσο τη γλώσσα (lang) όσο και την κωδικοποίηση χαρακτήρων (character encoding) το συντομότερο δυνατόν στο έγγραφο HTML.

Για να καθορίσετε την κωδικοποίηση χαρακτήρων, μπορείτε να χρησιμοποιήσετε την ετικέτα <meta charset="charset"> στην επικεφαλίδα (head) του HTML κώδικα σας. Το charset πρέπει να αντικατασταθεί με τη σωστή κωδικοποίηση χαρακτήρων που χρησιμοποιείτε, όπως UTF-8.

Παράδειγμα:

<!DOCTYPE html>
<html lang="el">
  <head>
    <meta charset="UTF-8">
    <title>Τίτλος Ιστοσελίδας</title>
    <!-- Άλλα meta tags και επιπλέον πληροφορίες -->
  </head>
  <body>
    <!-- Περιεχόμενο ιστοσελίδας -->
  </body>
</html>

Στο παραπάνω παράδειγμα, η ετικέτα <meta charset="UTF-8"> ορίζει την κωδικοποίηση χαρακτήρων UTF-8 για τη σελίδα. Αυτό διασφαλίζει ότι οι χαρακτήρες στη σελίδα θα ερμηνευθούν σωστά.

Επιπλέον, η ετικέτα <html lang="el"> ορίζει τη γλώσσα της ιστοσελίδας ως ελληνική (Greek). Αυτή η πληροφορία είναι χρήσιμη για τις μηχανές αναζήτησης και άλλα εργαλεία που απαιτούν πληροφορίες γλώσσας για να προσαρμόσουν την απεικόνιση και την αναζήτηση της σελίδας.

Τα σχόλια στο HTML μπορούν να γραφούν με τη χρήση της σύνταξης <!-- Σχόλιο -->. Για σύντομα σχόλια που χωρούν σε μία γραμμή, η καλή πρακτική είναι να γράφονται σε μία γραμμή όπως το παρακάτω παράδειγμα:

<!-- Αυτό είναι ένα σύντομο σχόλιο -->

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

Για να φορτώσετε εξωτερικά σενάρια (scripts) στο HTML, μπορείτε να χρησιμοποιήσετε απλή σύνταξη χωρίς την ανάγκη για το attribut “type”. Οι περισσότεροι περιηγητές αναγνωρίζουν αυτόματα τον τύπο “text/javascript” για τα σενάρια (scripts).

Έτσι, μπορείτε να χρησιμοποιήσετε την ακόλουθη σύνταξη για να φορτώσετε ένα εξωτερικό σενάριο στο HTML:

<script src="script.js"></script>

Στο παραπάνω παράδειγμα, η ετικέτα <script> χρησιμοποιείται για τον φορτωμένο σενάριο. Το attribut “src” δηλώνει τον δρομολόγησης του αρχείου σεναρίου.

Είναι σημαντικό να σημειωθεί ότι η ακριβής σύνταξη και το όνομα του αρχείου σεναρίου (στο παράδειγμα “script.js”) πρέπει να προσαρμοστούν στο δομημένο σας περιβάλλον και στην τοποθεσία του αρχείου στον διακομιστή.

Χρησιμοποιώντας “αταξινόμητο” κώδικα HTML μπορεί να οδηγήσει σε σφάλματα στο JavaScript.

Οι παρακάτω δύο δηλώσεις JavaScript θα παράξουν διαφορετικά αποτελέσματα:

var element1 = document.getElementById("myElement");
var element2 = document.getElementById ("myElement");

Στην πρώτη δήλωση, χρησιμοποιείται η σωστή σύνταξη με την ετικέτα <script> να ακολουθείται από μια κενή ανάθεση (assignment) μεταξύ του αναγνωριστικού (ID) του στοιχείου και του αριστερού μέλους της εντολής.

Στη δεύτερη δήλωση, υπάρχει ένας επιπλέον κενός χαρακτήρας (δηλαδή ένα κενό διάστημα) μεταξύ της λειτουργίας getElementById και των παρενθέσεων που περικλείουν το αναγνωριστικό του στοιχείου. Αυτό μπορεί να οδηγήσει σε σφάλμα, καθώς ο JavaScript θεωρεί την κενή ανάθεση ως μη έγκυρη σύνταξη.

Είναι σημαντικό να γράφετε τον κώδικα σας με προσοχή και να εξασφαλίζετε ότι οι δηλώσεις σας συμμορφώνονται με τη σωστή σύνταξη της γλώσσας JavaScript. Παρακαλούμε να προσέχετε την κατάλληλη χρήση κενών, σημείων στίξης και ονομάτων μεταβλητών για αποφυγή σφαλμάτων.

Ορισμένοι διακομιστές ιστού (όπως ο Apache σε συστήματα Unix) είναι ευαίσθητοι στη διάκριση πεζών-κεφαλαίων για τα ονόματα αρχείων: το “london.jpg” δεν μπορεί να προσπελαστεί ως “London.jpg”.

Άλλοι διακομιστές ιστού (όπως ο Microsoft IIS) δεν είναι ευαίσθητοι στη διάκριση πεζών-κεφαλαίων: το “london.jpg” μπορεί να προσπελαστεί ως “London.jpg”.

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

Εάν μετακινηθείτε από έναν διακομιστή που δεν είναι ευαίσθητος στη διάκριση πεζών-κεφαλαίων σε έναν που είναι, ακόμη και μικρά σφάλματα θα προκαλέσουν προβλήματα στην ιστοσελίδα σας!

Για να αποφύγετε αυτά τα προβλήματα, πάντα χρησιμοποιείτε πεζά ονόματα αρχείων! Αυτό θα εξασφαλίσει την ομαλή λειτουργία της ιστοσελίδας σας ανεξάρτητα από τον διακομιστή που χρησιμοποιείτε.

Τα αρχεία HTML πρέπει να έχουν την κατάληξη .html (το .htm είναι αποδεκτό).

Τα αρχεία CSS πρέπει να έχουν την κατάληξη .css.

Τα αρχεία JavaScript πρέπει να έχουν την κατάληξη .js.

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

Δεν υπάρχει διαφορά μεταξύ των καταλήξεων αρχείων .htm και .html!

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

21 Αυγούστου, 2023
top
error: Content is protected !!
Μετάβαση σε γραμμή εργαλείων