Η HTML είναι η γλώσσα που δίνει δομή σε κάθε ιστοσελίδα. Μάθε τι είναι η HTML, πώς λειτουργεί και τι σημαίνει για την ιστοσελίδα σου ως ιδιοκτήτη επιχείρησης.
Πίσω από κάθε ιστοσελίδα υπάρχει μια γλώσσα που τα κάνει όλα δυνατά. Όχι μια γλώσσα προγραμματισμού που την καταλαβαίνουν μόνο οι προγραμματιστές, αλλά μια απλή, ευανάγνωστη γλώσσα που είναι η ραχοκοκαλιά του διαδικτύου από την αρχή. Κάθε σελίδα που έχεις φορτώσει, κάθε άρθρο που έχεις διαβάσει online, κάθε σελίδα προϊόντος που έχεις δει: όλα ξεκινούν από αυτή τη μία γλώσσα.
Αυτή η γλώσσα είναι η HTML. Κάθε ιστοσελίδα που έχεις δει φτιάχτηκε με αυτήν. Ο τίτλος στην κορυφή, η παράγραφος από κάτω, η εικόνα στο πλάι, το κουμπί στο τέλος: όλα είναι HTML. Είναι το σημείο εκκίνησης για κάθε ιστοσελίδα στο διαδίκτυο, και αν καταλάβεις τι κάνει, βλέπεις πολύ πιο καθαρά πώς λειτουργεί η ιστοσελίδα σου.
Δεν χρειάζεται να γράφεις HTML για να έχεις ιστοσελίδα. Οι σύγχρονοι δημιουργοί ιστοσελίδων τα αναλαμβάνουν όλα αυτά για σένα. Αλλά αν ξέρεις τι είναι η HTML και τι ρόλο παίζει, παίρνεις καλύτερες αποφάσεις για την ιστοσελίδα σου και συνεννοείσαι πιο καθαρά όταν δουλεύεις με σχεδιαστές ή προγραμματιστές.
Τι σημαίνει HTML;
Η HTML σημαίνει HyperText Markup Language. Κάθε μέρος αυτού του ονόματος σου λέει κάτι για το τι κάνει.
Το HyperText αναφέρεται σε κείμενο που συνδέεται με άλλο περιεχόμενο. Οι σύνδεσμοι ανάμεσα στις σελίδες είναι αυτό που κάνει το web δίκτυο: μπορείς να πηδάς από σελίδα σε σελίδα επειδή η HTML υποστηρίζει υπερσυνδέσμους. Το Markup σημαίνει ότι η γλώσσα χρησιμοποιεί tags για να επισημαίνει, δηλαδή να βάζει ετικέτα σε κομμάτια περιεχομένου, ώστε ο browser να ξέρει τι να κάνει με αυτά. Το Language σημαίνει ότι ακολουθεί ένα σταθερό σύνολο κανόνων και σύνταξης.
Σε τι χρησιμεύει η HTML;
Η HTML χρησιμοποιείται για να ορίζει τη δομή μιας ιστοσελίδας. Λέει στον browser τι είναι κάθε κομμάτι περιεχομένου. Είναι τίτλος; Είναι παράγραφος; Είναι λίστα; Είναι εικόνα; Είναι σύνδεσμος; Η HTML απαντά σε όλες αυτές τις ερωτήσεις μέσω των tags.
Ένα tag είναι μια ετικέτα μέσα σε γωνιακές αγκύλες. Ένας τίτλος μπορεί να μοιάζει έτσι στην HTML: οι λέξεις «Σχετικά με εμάς» τυλιγμένες σε tag τίτλου. Ο browser διαβάζει το tag, καταλαβαίνει ότι είναι τίτλος και τον εμφανίζει ανάλογα. Το ίδιο ισχύει για κάθε στοιχείο της σελίδας. Η HTML δεν ελέγχει πώς φαίνονται τα πράγματα, μόνο τι είναι.
Τι δεν κάνει η HTML
Η HTML δίνει δομή σε μια ιστοσελίδα, αλλά δεν ελέγχει πώς φαίνεται ή πώς συμπεριφέρεται. Εκεί μπαίνουν δύο άλλες γλώσσες.
Η CSS ελέγχει την οπτική εμφάνιση: χρώματα, γραμματοσειρές, αποστάσεις, διάταξη και μεγέθη. Χωρίς CSS, μια σελίδα HTML θα ήταν απλό κείμενο χωρίς στυλ. Η JavaScript ελέγχει τη συμπεριφορά: τι γίνεται όταν πατάς ένα κουμπί, πώς επικυρώνεται μια φόρμα, πώς φορτώνει περιεχόμενο χωρίς να ανανεώνεται η σελίδα. Μαζί, η HTML, η CSS και η JavaScript σχηματίζουν τα τρία επίπεδα πάνω στα οποία χτίζεται κάθε ιστοσελίδα. Η HTML είναι το θεμέλιο. Διάβασε περισσότερα για το τι κάνει η CSS και το τι κάνει η JavaScript στα επόμενα κεφάλαια.
Πώς χρησιμοποιεί η HTML ο browser;
Όταν επισκέπτεσαι μια ιστοσελίδα, ο browser κατεβάζει το αρχείο HTML της σελίδας. Το διαβάζει από πάνω προς τα κάτω και χτίζει το λεγόμενο DOM, ένα μοντέλο όλων των στοιχείων της σελίδας και του πώς σχετίζονται μεταξύ τους. Μετά εφαρμόζει την CSS για να δώσει στυλ σε αυτά τα στοιχεία και τρέχει την JavaScript για να προσθέσει διαδραστικότητα. Αυτό που βλέπεις στην οθόνη είναι το αποτέλεσμα και των τριών που δουλεύουν μαζί.
Η HTML είναι αυτό που διαβάζει πρώτο ο browser. Αν η HTML είναι καθαρή και καλά δομημένη, ο browser μπορεί να την επεξεργαστεί πιο γρήγορα και να εμφανίσει τη σελίδα πιο αποδοτικά. Αυτό συνδέεται άμεσα με την ταχύτητα της ιστοσελίδας. Η φουσκωμένη ή κακογραμμένη HTML προσθέτει βάρος σε κάθε σελίδα και καθυστερεί το πόσο γρήγορα βλέπουν οι επισκέπτες το περιεχόμενό σου.
Τι σημαίνει αυτό για την ιστοσελίδα σου ως ιδιοκτήτη επιχείρησης;
Αν χρησιμοποιείς δημιουργό ιστοσελίδων, δεν γράφεις μόνος σου HTML. Η πλατφόρμα την παράγει για σένα όταν προσθέτεις περιεχόμενο και οργανώνεις τη διάταξη. Αυτό που μετράει για σένα είναι η HTML που παράγει να είναι καθαρή, σημασιολογική και βελτιστοποιημένη.
Η καθαρή HTML φορτώνει πιο γρήγορα. Η σημασιολογική HTML, δηλαδή η HTML που επισημαίνει σωστά τι είναι κάθε κομμάτι περιεχομένου, βοηθά τις μηχανές αναζήτησης να καταλάβουν τις σελίδες σου. Ένας τίτλος που έχει επισημανθεί ως τίτλος έχει μεγαλύτερο βάρος στα αποτελέσματα αναζήτησης από έναν τίτλο που απλώς έχει στυλ για να φαίνεται μεγάλος. Αυτές οι λεπτομέρειες γίνονται αυτόματα όταν χτίζεις σε μια καλή πλατφόρμα. Ο δημιουργός ιστοσελίδων του WEMASY παράγει καλά δομημένη HTML στο παρασκήνιο, ώστε οι σελίδες σου να χτίζονται εξαρχής για ταχύτητα και για αναζήτηση.
Συχνές ερωτήσεις
Πρέπει να μάθω HTML για να φτιάξω ιστοσελίδα;
Όχι. Οι δημιουργοί ιστοσελίδων σου επιτρέπουν να φτιάχνεις και να διαχειρίζεσαι μια ιστοσελίδα μέσα από οπτικό επεξεργαστή, χωρίς να γράφεις HTML. Την ανάγκη για κώδικα την αναλαμβάνει η πλατφόρμα. Τα βασικά της HTML βοηθούν αν θέλεις να καταλάβεις πώς λειτουργεί η ιστοσελίδα σου, αλλά δεν είναι προϋπόθεση για να τη φτιάξεις ή να τη διαχειριστείς. Με τον δημιουργό ιστοσελίδων του WEMASY δουλεύεις με οπτικό επεξεργαστή και η HTML παράγεται αυτόματα.
Ποια είναι η διαφορά ανάμεσα στην HTML και σε μια ιστοσελίδα;
Η HTML είναι ένα από τα δομικά στοιχεία μιας ιστοσελίδας. Μια ιστοσελίδα αποτελείται από πολλά αρχεία, μεταξύ των οποίων HTML για τη δομή, CSS για το στυλ, JavaScript για τη συμπεριφορά, εικόνες και συχνά μια βάση δεδομένων που αποθηκεύει το περιεχόμενο. Η HTML είναι αυτό που διαβάζει ο browser για να καταλάβει τι υπάρχει στη σελίδα, αλλά η πλήρης εμπειρία της ιστοσελίδας περιλαμβάνει όλα αυτά τα επίπεδα που δουλεύουν μαζί.
Επηρεάζει η HTML το SEO;
Ναι, άμεσα. Οι μηχανές αναζήτησης διαβάζουν την HTML σου για να καταλάβουν περί τίνος πρόκειται η σελίδα. Αν χρησιμοποιείς τα σωστά tags για επικεφαλίδες, παραγράφους, εικόνες και συνδέσμους, λες στις μηχανές αναζήτησης τι είναι κάθε κομμάτι περιεχομένου και πόσο σημαντικό είναι. Μια σελίδα με καθαρή, σημασιολογική HTML είναι πιο εύκολο να ευρετηριαστεί σωστά από μια με ακατάστατο ή φουσκωμένο κώδικα. Αυτός είναι ένας λόγος που μετράει να χτίζεις σε πλατφόρμα που παράγει καθαρή HTML για την κατάταξή σου.
Τι είναι η σημασιολογική HTML;
Η σημασιολογική HTML σημαίνει ότι χρησιμοποιείς tags που περιγράφουν με ακρίβεια τον τύπο του περιεχομένου που περιέχουν. Ένας τίτλος πρέπει να χρησιμοποιεί tag τίτλου και όχι tag παραγράφου με στυλ για να φαίνεται μεγάλο. Μια λίστα πρέπει να χρησιμοποιεί tag λίστας και όχι μια σειρά από αλλαγές γραμμής. Η σημασιολογική HTML κάνει τη σελίδα σου πιο εύκολη στην κατανόηση για browsers, μηχανές αναζήτησης και προγράμματα ανάγνωσης οθόνης. Είναι βέλτιστη πρακτική που επηρεάζει και την προσβασιμότητα και το SEO, χωρίς να χρειάζεται επιπλέον ορατό περιεχόμενο.
Μπορεί η κακή HTML να χαλάσει την ιστοσελίδα μου;
Η κακογραμμένη HTML μπορεί να προκαλέσει προβλήματα εμφάνισης, αργούς χρόνους φόρτωσης και προβλήματα στο πώς διαβάζουν οι μηχανές αναζήτησης τις σελίδες σου. Οι browsers είναι αρκετά επιεικείς και θα προσπαθήσουν να εμφανίσουν μια σελίδα ακόμα κι αν η HTML έχει λάθη, αλλά το αποτέλεσμα μπορεί να μη φαίνεται σωστό. Γι' αυτό μετράει η ποιότητα του κώδικα της πλατφόρμας στην οποία χτίζεις. Η καλά δομημένη HTML που παράγει ένας αξιόπιστος δημιουργός ιστοσελίδων μειώνει πολύ αυτόν τον κίνδυνο.
Είναι η HTML ίδια σε όλες τις ιστοσελίδες;
Η HTML ακολουθεί ένα τυπικό σύνολο κανόνων που ορίζει η World Wide Web Consortium, δηλαδή η βασική γλώσσα είναι ίδια παντού. Ωστόσο, το πώς γράφεται και δομείται διαφέρει πολύ από ιστοσελίδα σε ιστοσελίδα. Κάποιες ιστοσελίδες έχουν καθαρή, ελάχιστη HTML. Άλλες έχουν στρώματα περιττού κώδικα. Η διαφορά φαίνεται στην ταχύτητα, στην απόδοση στην αναζήτηση και στο πόσο καλά δουλεύει η σελίδα σε διαφορετικούς browsers και συσκευές.