HTML Βασικές Ετικέτες: Οδηγός για Αρχάριους με Παραδείγματα

Yorut · Mar 29, 2025, 02:15 ΜΜ

Η HTML (HyperText Markup Language) είναι η βασική γλώσσα που χρησιμοποιείται για τη δημιουργία ιστοσελίδων. Οι ετικέτες (tags) αποτελούν τα θεμέλια της HTML, καθορίζοντας τη δομή και το περιεχόμενο μιας ιστοσελίδας. Σε αυτό το άρθρο, θα εξετάσουμε τις πιο σημαντικές βασικές ετικέτες HTML, τη λειτουργία τους και πώς να τις χρησιμοποιήσετε με παραδείγματα κώδικα. Αυτός ο οδηγός είναι φιλικός προς το SEO, ιδανικός για αρχάριους που θέλουν να μάθουν τα βασικά της HTML.

Τι Είναι οι Ετικέτες HTML;
Οι ετικέτες HTML είναι λέξεις-κλειδιά που περικλείονται σε γωνιακές αγκύλες (< και >), οι οποίες λένε στον φυλλομετρητή (browser) πώς να εμφανίσει το περιεχόμενο. Κάθε ετικέτα έχει ανοιχτή (<tag>) και κλειστή (</tag>) μορφή, με το περιεχόμενο να βρίσκεται ανάμεσά τους.

Βασικές Ετικέτες HTML
1. <html>
Η ετικέτα <html> είναι η ρίζα κάθε εγγράφου HTML. Όλος ο κώδικας της ιστοσελίδας βρίσκεται μέσα σε αυτήν.

2. <head>
Η ετικέτα <head> περιέχει πληροφορίες για το έγγραφο, όπως τον τίτλο, τα μεταδεδομένα και συνδέσεις με εξωτερικά αρχεία (π.χ. CSS).

3. <title>
Η ετικέτα <title> ορίζει τον τίτλο της ιστοσελίδας, που εμφανίζεται στην καρτέλα του φυλλομετρητή.

4. <body>
Η ετικέτα <body> περιλαμβάνει το ορατό περιεχόμενο της ιστοσελίδας, όπως κείμενο, εικόνες και συνδέσμους.

5. <h1> έως <h6>
Οι ετικέτες επικεφαλίδων (<h1> έως <h6>) χρησιμοποιούνται για τίτλους και υπότιτλους, με το <h1> να είναι το μεγαλύτερο και πιο σημαντικό.

6. <p>
Η ετικέτα <p> ορίζει μια παράγραφο κειμένου.

7. <a>
Η ετικέτα <a> δημιουργεί υπερσυνδέσμους (links) προς άλλες σελίδες ή τοποθεσίες.

8. <img>
Η ετικέτα <img> εισάγει εικόνες στην ιστοσελίδα. Είναι αυτοκλειόμενη, δηλαδή δεν χρειάζεται κλείσιμο (</img>).

9. <div>
Η ετικέτα <div> χρησιμοποιείται για τη δημιουργία τμημάτων ή ομάδων περιεχομένου, συχνά για σκοπούς μορφοποίησης με CSS.

Παράδειγμα 1: Βασική Δομή HTML
Ακολουθεί ένα απλό παράδειγμα που δείχνει τη χρήση των βασικών ετικετών:

Κώδικας [Επιογή]

<!DOCTYPE html>
<html>
<head>
    <title>Η Πρώτη μου Ιστοσελίδα</title>
</head>
<body>
    <h1>Καλώς Ήρθατε!</h1>
    <p>Αυτή είναι μια απλή παράγραφος κειμένου.</p>
</body>
</html>

Εξήγηση:

<!DOCTYPE html>: Δηλώνει ότι το έγγραφο είναι HTML5.
<html>: Η ρίζα του εγγράφου.
<head>: Περιέχει τον τίτλο.
<body>: Περιέχει το ορατό περιεχόμενο.

Παράδειγμα 2: Ετικέτες με Συνδέσμους και Εικόνες

Κώδικας [Επιογή]

<!DOCTYPE html>
<html>
<head>
    <title>Παράδειγμα HTML</title>
</head>
<body>
    <h2>Εξερευνήστε την HTML</h2>
    <p>Μάθετε περισσότερα για την <a href="https://www.example.com">HTML εδώ</a>.</p>
    <img src="example-image.jpg" alt="Περιγραφή εικόνας">
</body>
</html>

Εξήγηση:

<a href="...">: Δημιουργεί έναν σύνδεσμο.
<img src="..." alt="...">: Προσθέτει μια εικόνα με εναλλακτικό κείμενο (alt) για SEO και προσβασιμότητα.

Παράδειγμα 3: Χρήση <div> και Επικεφαλίδων

Κώδικας [Επιογή]

<!DOCTYPE html>
<html>
<head>
    <title>Δομή με Div</title>
</head>
<body>
    <div>
        <h1>Κύριος Τίτλος</h1>
        <h3>Υπότιτλος</h3>
        <p>Αυτό το κείμενο βρίσκεται μέσα σε ένα div.</p>
    </div>
</body>
</html>

Εξήγηση:

<div>: Ομαδοποιεί το περιεχόμενο.
<h1> και <h3>: Δίνουν ιεραρχία στους τίτλους.

Πλεονεκτήματα των Βασικών Ετικετών HTML

Απλότητα: Εύκολες στη χρήση, ακόμα και για αρχάριους.
Δομή: Βοηθούν στη δημιουργία οργανωμένων ιστοσελίδων.
SEO: Ετικέτες όπως <title>, <h1> και alt βελτιώνουν την κατάταξη στις μηχανές αναζήτησης.

Πότε να Χρησιμοποιήσετε τις Βασικές Ετικέτες;

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

Συμπέρασμα
Οι βασικές ετικέτες HTML είναι ο ακρογωνιαίος λίθος κάθε ιστοσελίδας. Με τη σωστή χρήση τους, μπορείτε να δημιουργήσετε δομημένες, λειτουργικές και φιλικές προς το SEO σελίδες. Ξεκινήστε πειραματιζόμενοι με τον κώδικα, προσθέτοντας ετικέτες όπως <p>, <a> και <img>, και σύντομα θα είστε σε θέση να φτιάξετε τη δική σας ιστοσελίδα από το μηδέν!

HTML Βασικές Ετικέτες: Οδηγός για Αρχάριους με Παραδείγματα

Yorut