HTML: Οδηγός HyperText Markup Language για Αρχάριους

Η HTML (HyperText Markup Language) είναι η γλώσσα σήμανσης που ορίζει τη δομή και τη σημασιολογία μιας ιστοσελίδας. Δεν είναι γλώσσα προγραμματισμού. Συνεργάζεται με CSS για την παρουσίαση και JavaScript για τη συμπεριφορά της σελίδας.

Βασική δομή HTML5

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Τίτλος σελίδας</title>
    <meta name="description" content="Περιγραφή της σελίδας">
</head>
<body>
    <header>
        <h1>Καλώς ήρθατε</h1>
    </header>
    <main>
        <p>Το περιεχόμενο της σελίδας.</p>
    </main>
    <footer>© 2026</footer>
</body>
</html>

Βασικοί κανόνες σύνταξης

Τα στοιχεία συνήθως αποτελούνται από tag έναρξης, περιεχόμενο και tag λήξης.
Τα ονόματα των HTML elements γράφονται χωρίς διάκριση πεζών/κεφαλαίων, αλλά προτιμάται η πεζή γραφή.
Τα attributes τοποθετούνται στο tag έναρξης και οι τιμές τους μέσα σε εισαγωγικά.
Τα void elements, όπως img, br, hr και input, δεν έχουν tag λήξης.
Η σωστή εμφώλευση και το κλείσιμο των tags βοηθούν την προσβασιμότητα και την ορθή ανάλυση του εγγράφου.

Headings και κείμενο

<h1>Κύριος τίτλος</h1>
<h2>Ενότητα</h2>
<h3>Υποενότητα</h3>
<p>Μια παράγραφος με <strong>σημαντικό</strong> και <em>τονισμένο</em> κείμενο.</p>
<p>Κείμενο με <mark>επισήμανση</mark> και <small>μικρότερη σημείωση</small>.</p>
<blockquote cite="https://example.com">Παράθεση κειμένου.</blockquote>
<pre><code>const message = "Hello";</code></pre>
<hr>
<br>

Links και εικόνες

<a href="https://grcodeclub.gr/">GrCode Club</a>
<a href="/contact/">Επικοινωνία</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Εξωτερικός σύνδεσμος</a>

<img src="images/developer.jpg" alt="Developer που εργάζεται σε υπολογιστή" width="800" height="450" loading="lazy">

<figure>
    <img src="diagram.png" alt="Διάγραμμα αρχιτεκτονικής δικτύου">
    <figcaption>Διάγραμμα δικτύου.</figcaption>
</figure>

Λίστες

<!-- Μη ταξινομημένη λίστα -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>

<!-- Αριθμημένη λίστα -->
<ol>
    <li>Σχεδιασμός</li>
    <li>Υλοποίηση</li>
</ol>

<!-- Λίστα ορισμών -->
<dl>
    <dt>HTML</dt>
    <dd>Γλώσσα σήμανσης για τη δομή ιστοσελίδων.</dd>
</dl>

Πίνακες δεδομένων

<table>
    <caption>Χρήστες συστήματος</caption>
    <thead>
        <tr><th scope="col">Όνομα</th><th scope="col">Ρόλος</th></tr>
    </thead>
    <tbody>
        <tr><td>Μαρία</td><td>Developer</td></tr>
        <tr><td>Νίκος</td><td>Designer</td></tr>
    </tbody>
</table>

Semantic HTML5

Τα semantic elements περιγράφουν τον ρόλο του περιεχομένου και βοηθούν browsers, μηχανές αναζήτησης και βοηθητικές τεχνολογίες.

<header>Κεφαλίδα σελίδας ή ενότητας</header>
<nav aria-label="Κύρια πλοήγηση">...</nav>
<main>
    <article>
        <header><h2>Τίτλος άρθρου</h2></header>
        <section><p>Περιεχόμενο ενότητας.</p></section>
        <aside>Σχετικό περιεχόμενο</aside>
    </article>
</main>
<footer>Υποσέλιδο</footer>

Element	Χρήση
header	Εισαγωγικό περιεχόμενο ή κεφαλίδα
nav	Σημαντική ομάδα συνδέσμων πλοήγησης
main	Κύριο περιεχόμενο εγγράφου
article	Αυτοτελές περιεχόμενο
section	Θεματική ενότητα
aside	Συμπληρωματικό περιεχόμενο
footer	Υποσέλιδο ενότητας ή σελίδας
figure / figcaption	Αυτοτελές media και λεζάντα

Φόρμες – Forms

Οι φόρμες συλλέγουν δεδομένα. Το label πρέπει να συνδέεται με το αντίστοιχο πεδίο.

<form action="/register" method="post">
    <label for="username">Όνομα χρήστη</label>
    <input type="text" id="username" name="username" required minlength="3">

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required autocomplete="email">

    <label for="password">Κωδικός</label>
    <input type="password" id="password" name="password" required>

    <label for="role">Ρόλος</label>
    <select id="role" name="role">
        <option value="developer">Developer</option>
        <option value="designer">Designer</option>
    </select>

    <button type="submit">Εγγραφή</button>
</form>

Συνηθισμένοι τύποι input

Type	Χρήση
text	Απλό κείμενο
email	Email με βασικό έλεγχο μορφής
password	Κωδικός πρόσβασης
number	Αριθμητική τιμή
tel	Τηλέφωνο
url	Διεύθυνση URL
date	Ημερομηνία
checkbox	Πολλαπλές ανεξάρτητες επιλογές
radio	Μία επιλογή από ομάδα
file	Επιλογή αρχείου
submit	Υποβολή φόρμας

Attributes

<input type="text" id="name" name="name" value="Dimitris" placeholder="Το όνομά σου" required disabled>
<img src="logo.png" alt="Λογότυπο" width="160" height="60">
<a href="/about/" title="Πληροφορίες">Σχετικά</a>
<div class="card" data-category="tutorial" id="tutorial-1">Περιεχόμενο</div>

Attribute	Περιγραφή
id	Μοναδικό αναγνωριστικό μέσα στο έγγραφο
class	Μία ή περισσότερες κλάσεις CSS
href	Προορισμός συνδέσμου
src	Πηγή εικόνας ή άλλου resource
alt	Εναλλακτικό κείμενο εικόνας
title	Συμπληρωματική πληροφορία
name	Όνομα πεδίου φόρμας
value	Τιμή πεδίου
required	Υποχρεωτικό πεδίο
data-*	Custom data attributes

Audio και Video

<audio controls preload="metadata">
    <source src="audio.mp3" type="audio/mpeg">
    Το πρόγραμμα περιήγησης δεν υποστηρίζει audio.
</audio>

<video controls width="640" poster="preview.jpg" preload="metadata">
    <source src="video.mp4" type="video/mp4">
    Το πρόγραμμα περιήγησης δεν υποστηρίζει video.
</video>

Ενσωμάτωση περιεχομένου – iframe

<iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Εκπαιδευτικό βίντεο"
    width="560"
    height="315"
    loading="lazy"
    allowfullscreen>
</iframe>

Metadata και SEO

Τα metadata τοποθετούνται στο head. Το meta keywords δεν χρησιμοποιείται από την Google για κατάταξη.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Οδηγός HTML | GrCode Club</title>
    <meta name="description" content="Μάθε HTML με παραδείγματα και οδηγίες.">
    <link rel="canonical" href="https://example.com/html/">
    <meta property="og:title" content="Οδηγός HTML">
    <meta property="og:description" content="Οδηγός HTML για developers.">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://example.com/image.jpg">
</head>

Προσβασιμότητα – Accessibility

<button type="button" aria-label="Κλείσιμο παραθύρου">×</button>
<nav aria-label="Κύρια πλοήγηση">...</nav>
<label for="search">Αναζήτηση</label>
<input id="search" type="search">

<!-- Χρησιμοποίησε alt που περιγράφει τον σκοπό της εικόνας -->
<img src="chart.png" alt="Γράφημα που παρουσιάζει αύξηση επισκεπτών">

<!-- Για διακοσμητικές εικόνες χρησιμοποίησε κενό alt -->
<img src="decoration.svg" alt="">

Χρήσιμες πρακτικές

Χρησιμοποίησε ένα σαφές h1 και λογική ιεραρχία επικεφαλίδων.
Προτίμησε semantic HTML αντί για div για κάθε στοιχείο.
Σύνδεε κάθε πεδίο φόρμας με label.
Πρόσθετε κατάλληλο alt σε ουσιαστικές εικόνες.
Χρησιμοποίησε width και height στις εικόνες για περιορισμό του layout shift.
Μην χρησιμοποιείς HTML για μορφοποίηση που ανήκει στο CSS.
Επικύρωνε το markup και έλεγχε τη σελίδα με keyboard και screen reader.