Κορυφαίες 50 ερωτήσεις και απαντήσεις συνεντεύξεων HTML (2026)

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

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

Η ανάλυσή μας βασίζεται σε σχόλια που παρείχαν περισσότεροι από 60 τεχνικοί ηγέτες, σε πληροφορίες από περισσότερους από 45 διευθυντές και σε συζητήσεις με πάνω από 100 επαγγελματίες. Συνολικά, αυτές οι οπτικές γωνίες αναδεικνύουν ποικίλες προσδοκίες και εξελισσόμενες ανάγκες του κλάδου.

Κορυφαίες ερωτήσεις και απαντήσεις συνέντευξης HTML για το θέμα "Κορυφαίες ερωτήσεις και απαντήσεις"

1) Τι είναι η HTML και γιατί θεωρείται η ραχοκοκαλιά της ανάπτυξης ιστοσελίδων;

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

👉 Δωρεάν Λήψη PDF: Ερωτήσεις Συνέντευξης HTML

2) Εξηγήστε τη διαφορά μεταξύ HTML και HTML5 με παραδείγματα.

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

Χαρακτηριστικό	HTML	HTML5
Τύπος εγγράφου	Μακρύ & πολύπλοκο	Απλός:
πολυμέσων	Χρειάζονται πρόσθετα	,
γραφικά	Δεν υποστηρίζεται εγγενώς	,
έντυπα	Περιορισμένες εισροές	Νέες εισροές όπως `email`, `date`
Σημασιολογικές ετικέτες	Βασίστηκε σε	, ,

Παράδειγμα:

<video controls>
	<source src="sample.mp4" type="video/mp4">
</video>

3) Πώς είναι οργανωμένη η βασική δομή ενός εγγράφου HTML;

Κάθε έγγραφο HTML ακολουθεί μια καθορισμένη δομή για να διασφαλιστεί ότι τα προγράμματα περιήγησης ερμηνεύουν σωστά το περιεχόμενο. Στο επάνω μέρος βρίσκεται το δήλωση που καθορίζει τη χρήση HTML5. Η Το στοιχείο περικλείει ολόκληρο το περιεχόμενο, χωρισμένο σε και Το περιέχει μεταδεδομένα, τίτλο, συνδέσμους προς CSS και σενάρια, ενώ αποδίδει το ορατό περιεχόμενο. Για παράδειγμα:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sample Page</title>
</head>
<body>
	<h1>Hello World</h1>
</body>
</html>

4) Τι είναι οι ετικέτες και τα στοιχεία στην HTML; Δώστε παραδείγματα.

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

Ετικέτα: και
Προϊόν: Αυτή είναι μια παράγραφος

Ορισμένα στοιχεία είναι αυτοκλειόμενα, όπως και , που σημαίνει ότι δεν απαιτούν ετικέτες κλεισίματος.

5) Ποιοι τύποι λιστών υποστηρίζονται στην HTML και πού χρησιμοποιούνται;

Υποστηρίζει HTML τρεις κύριοι τύποι λιστών:

Ταξινομημένη λίστα ( ) – τα στοιχεία εμφανίζονται με αριθμούς ή γράμματα.
Μη ταξινομημένη λίστα ( ) – τα αντικείμενα εμφανίζονται με κουκκίδες.
DescriptΛίστα ιόντων ( ) – χρησιμοποιείται για όρους και τους ορισμούς τους.

Παράδειγμα:

<dl>
	<dt>HTML</dt>
	<dd>HyperText Markup Language</dd>
</dl>

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

6) Πώς χρησιμοποιούνται τα χαρακτηριστικά στην HTML και ποια είναι τα συνηθισμένα παραδείγματα;

Τα χαρακτηριστικά παρέχουν πρόσθετες πληροφορίες στα στοιχεία HTML. Καθορίζονται πάντα μέσα στην ετικέτα ανοίγματος και ακολουθούν ένα ζεύγος ονόματος-τιμής. Συνηθισμένα παραδείγματα περιλαμβάνουν:

src σε για την τοποθεσία της εικόνας.
href για προορισμό υπερσυνδέσμου.
id και class για styling και JavaΣτόχευση σεναρίου.
alt σε εικόνες για προσβασιμότητα.

Για παράδειγμα:

<img src="logo.png" alt="Company Logo">

7) Τι είναι τα σημασιολογικά στοιχεία HTML και ποια οφέλη προσφέρουν;

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

οφέλη:

Βελτιώστε την προσβασιμότητα για τους αναγνώστες οθόνης.
Παρέχετε στις μηχανές αναζήτησης σαφέστερη έννοια περιεχομένου (SEO)
Βελτιώστε την αναγνωσιμότητα και τη συντηρησιμότητα του κώδικα.

Παράδειγμα:

<article>
	<h2>News Update</h2>
	<p>Latest update about web development trends.</p>
</article>

8) Εξηγήστε τη διαφορά μεταξύ στοιχείων σε επίπεδο μπλοκ και ενσωματωμένων στοιχείων με παραδείγματα.

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

Χαρακτηριστικά	Παραδείγματα	Χαρακτηριστικά:
Επίπεδο μπλοκ	,	Έναρξη σε νέα γραμμή, πλήρους πλάτους
Στη γραμμή	,	Ροή μέσα στο κείμενο, το πλάτος εξαρτάται από το περιεχόμενο

9) Πώς δημιουργούνται οι υπερσύνδεσμοι και ποια είναι η διαφορά μεταξύ απόλυτου και σχετικού; URLs?

Οι υπερσύνδεσμοι δημιουργούνται χρησιμοποιώντας την ετικέτα με το href αποδίδουν.

Απόλυτος URL: Περιέχει την πλήρη διαδρομή, συμπεριλαμβανομένου του πρωτοκόλλου και του τομέα.
Παράδειγμα: <a href="https://example.com/page.html">Visit</a>
Σχετικό URL: Αναφέρεται σε ένα αρχείο που σχετίζεται με την τρέχουσα σελίδα.
Παράδειγμα: <a href="/el/about.html">About Us</a>

Απόλυτος URLΤα s προτιμώνται κατά τη σύνδεση με εξωτερικούς πόρους, ενώ τα σχετικά URLείναι αποτελεσματικά μέσα στον ίδιο ιστότοπο.

10) Ποιος είναι ο ρόλος του ετικέτα και τα χαρακτηριστικά της;

Ο Η ετικέτα χρησιμοποιείται για τη συλλογή των δεδομένων χρήστη και την αποστολή τους σε έναν διακομιστή. Τα δύο πιο κρίσιμα χαρακτηριστικά της είναι:

δράση – καθορίζει πού θα αποσταλούν τα δεδομένα.
μέθοδος – καθορίζει τη μέθοδο HTTP ( GET or POST ).

Παράδειγμα:

<form action="/el/submit" method="post">
	<input type="text" name="username">
	<input type="submit">
</form>

11) Ποιοι διαφορετικοί τύποι πεδίων εισαγωγής είναι διαθέσιμοι σε φόρμες HTML5;

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

Βασισμένο σε κείμενο: κείμενο, κωδικός πρόσβασης, email, url, αναζήτηση, τηλ.
Με βάση την ημερομηνία και την ώρα: ημερομηνία, ημερομηνία-ώρα-τοπική, μήνας, εβδομάδα, ώρα.
Αριθμητικός: αριθμός, εύρος.
Boolean: πλαίσιο ελέγχου, ραδιόφωνο.
Αρχείο και χρώμα: αρχείο, χρώμα.

Παράδειγμα:

<input type="email" placeholder="Enter your email">
<input type="date">
<input type="range" min="1" max="10">

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

12) Πώς λειτουργούν οι σημασιολογικές ετικέτες HTML5 όπως , , , και διαφέρουν στη χρήση;

Οι σημασιολογικές ετικέτες εισήχθησαν για να αντικαταστήσουν τις γενικές στοιχεία και να προσδίδουν νόημα στη δομή της σελίδας.

ετικέτα	Σκοπός	Παράδειγμα
	Επάνω τμήμα, συχνά με λογότυπα/πλοήγηση	Πλοήγηση ιστότοπου
	Κάτω τμήμα, πνευματικά δικαιώματα ή σύνδεσμοι	Υποσέλιδο σελίδας
	Λογική ομάδαping σχετικού περιεχομένου	Ενότητα ιστολογίου
	Ανεξάρτητο περιεχόμενο που μπορεί να σταθεί μόνο του	Άρθρο ειδήσεων

Παράδειγμα:

<article>
	<header><h2>Breaking News</h2></header>
	<p>Details of the story...</p>
	<footer>Author: John Doe</footer>
</article>

Η χρήση αυτών των στοιχείων βελτιώνει το SEO και την προσβασιμότητα.

13) Εξηγήστε τη διαφορά μεταξύ του ενσωματωμένου CSS, του εσωτερικού CSS και του εξωτερικού CSS.

Υπάρχουν τρεις βασικοί τρόποι για να εφαρμόσετε CSS σε HTML:

Ενσωματωμένο CSS: Εφαρμόζεται απευθείας σε στοιχεία χρησιμοποιώντας το style αποδίδουν.
Παράδειγμα: <p style="color:red;">Text</p>
Εσωτερικό CSS: Δηλώθηκε εντός tags in the .
Εξωτερικό CSS: Συνδέεται μέσω ενός .css αρχείο χρησιμοποιώντας .

Μέθοδος	Πλεονεκτήματα	Μειονεκτήματα
Στη γραμμή	Γρήγορο, συγκεκριμένο	Δύσκολο στη συντήρηση, δεν υπάρχει δυνατότητα επαναχρησιμοποίησης
Εσωτερικός	Κατάλληλο για μία σελίδα	Δεν είναι επαναχρησιμοποιήσιμο σε πολλές σελίδες
Εξωτερικός	Επαναχρησιμοποιήσιμο, καθαρό	Απαιτείται επιπλέον φόρτωση αρχείου

καλυτερα πρακτική είναι να χρησιμοποιείς εξωτερικό CSS για συντηρησιμότητα.

14) Τι είναι οι οντότητες HTML και γιατί χρησιμοποιούνται;

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

Παραδείγματα κοινών οντοτήτων:

< →
> → >
& → &
© → ©
→ μη διακοπτόμενος χώρος

Για παράδειγμα:

<p>Use <strong> instead of <b>.</p>

Οι οντότητες είναι κρίσιμες για τη διατήρηση της αναγνωσιμότητας του κώδικα και την αποτροπή προβλημάτων απόδοσης.

15) Πώς γίνεται στοιχεία λειτουργούν και ποια είναι τα πλεονεκτήματα και τα μειονεκτήματά τους;

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

Πλεονεκτήματα:

Εύκολη ενσωμάτωση εξωτερικού περιεχομένου, όπως YouTube or Google Χάρτες
Διαχωρισμός περιεχομένου από την κύρια σελίδα.

Μειονεκτήματα:

Χαμηλότερη απόδοση φόρτωσης λόγω πρόσθετων αιτημάτων.
Κίνδυνοι ασφαλείας (clickjacking, cross-site scripting).
Δεν είναι πάντα φιλικό προς τις μηχανές αναζήτησης (SEO).

Παράδειγμα:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

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

16) Τι είναι οι μετα-ετικέτες (meta tags) στην HTML και πώς επηρεάζουν το SEO;

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

Βασικοί τύποι μετα-ετικετών:

Descriptιόν:
Λέξεις-κλειδιά (καταργημένα):
Viewport (σχεδιασμός με δυνατότητα απόκρισης):
Σύνολο χαρακτήρων:

Οι μηχανές αναζήτησης χρησιμοποιούν μετα-περιγραφές για να δημιουργήσουν αποσπάσματα στα αποτελέσματα αναζήτησης, κάτι που επηρεάζει άμεσα Ποσοστό κλικ (CTR).

17) Ποια είναι η διαφορά μεταξύ απόλυτων, σχετικών και σχετικών με τη ρίζα μονοπατιών σε συνδέσμους HTML;

Οι σύνδεσμοι μπορούν να γραφτούν με τρεις διαφορετικούς τρόπους, ανάλογα με τις αναφορές διαδρομής.

Χαρακτηριστικά	Παράδειγμα	Χρήση θήκης
Απόλυτος	https://example.com/images/pic.jpg	Εξωτερικοί πόροι
Σχετικό	εικόνες/pic.jpg	Ίδιος κατάλογος ή υποκατάλογος
Ρίζα-συγγενής	/assets/images/pic.jpg	Από τη ρίζα τομέα

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

18) Πώς λειτουργούν τα API HTML5, όπως η γεωγραφική τοποθεσία, η αποθήκευση ιστού και Canvaβελτιώνουν τη λειτουργικότητα;

Η HTML5 εισήγαγε API που επεκτείνουν τις δυνατότητες των εφαρμογών ιστού χωρίς να απαιτούν πρόσθετα (plugins).

API γεωγραφικής τοποθεσίας: Ανακτά την τοποθεσία του χρήστη (με άδεια).
API αποθήκευσης ιστού: Παρέχει localStorage και sessionStorage για την αποθήκευση δεδομένων κλειδιού-τιμής έως και 10MB.
CanvaAPI: Επιτρέπει τη σχεδίαση σχημάτων, εικόνων και κινούμενων σχεδίων απευθείας σε μια ιστοσελίδα.

Παράδειγμα: Τοπική αποθήκευση

localStorage.setItem("user", "John");
alert(localStorage.getItem("user"));

Αυτά τα API βελτιώνουν την διαδραστικότητα και την απόδοση στις σύγχρονες εφαρμογές.

19) Εξηγήστε τα πλεονεκτήματα και τα μειονεκτήματα της χρήσης του στοιχείο για το σχεδιασμό της διάταξης.

Οι πίνακες χρησιμοποιούνταν κάποτε για τη διάταξη σελίδων, αλλά τώρα αποθαρρύνονται.

Πλεονεκτήματα:

Παρέχει δομή για δεδομένα σε μορφή πίνακα.
Υποστηρίζεται σε όλα τα προγράμματα περιήγησης.

Μειονεκτήματα:

Κακή προσβασιμότητα για τους αναγνώστες οθόνης σε περίπτωση κακής χρήσης.
Επιβραδύνει την απόδοση της σελίδας.
Πιο δύσκολο στη συντήρηση σε σύγκριση με συστήματα διάταξης CSS όπως το Flexbox και το Grid.

καλύτερη πρακτική: Χρήση αυστηρά για δεδομένα σε μορφή πίνακα (π.χ., χρονοδιαγράμματα, συγκρίσεις προϊόντων) και CSS για διάταξη.

20) Μπορούν να εφαρμοστούν πολλαπλές κλάσεις CSS σε ένα μόνο στοιχείο HTML; Πώς επιτυγχάνεται αυτό;

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

Παράδειγμα:

<p class="text-bold text-red highlight">Important Notice</p>

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

21) Ποια είναι η διαφορά μεταξύ και σε HTML;

Και οι δύο και είναι γενικά κοντέινερ, αλλά εξυπηρετούν διαφορετικούς σκοπούς.

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

Χαρακτηριστικό
Display	Επίπεδο μπλοκ	Στη γραμμή
Χρήση	Διάταξη, κοντέινερ	Επισήμανση κειμένου
Παράδειγμα	Τυλίξτεping τμήματα	Λέξεις στυλ

Παράδειγμα:

<div class="container">
	<p>This is a <span class="highlight">highlighted</span> word.</p>
</div>

22) Πώς λειτουργεί το εργασία με στοιχεία και πού χρησιμοποιείται;

Ο Το στοιχείο στην HTML5 παρέχει μια επιφάνεια σχεδίασης που εξαρτάται από την ανάλυση και βασίζεται σε bitmap. Χρησιμοποιείται για την απόδοση γραφικών, κινούμενων εικόνων, διαγραμμάτων, ακόμη και απλών παιχνιδιών απευθείας στο πρόγραμμα περιήγησης. JavaAPI σεναρίων όπως getContext("2d") επιτρέπουν στους προγραμματιστές να σχεδιάζουν σχήματα, διαδρομές, εικόνες και κείμενο.

Παράδειγμα:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 50);
</script>

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

23) Εξηγήστε τη διαφορά μεταξύ `id` και `class` χαρακτηριστικά σε HTML.

Και τα δύο id και class είναι χαρακτηριστικά που χρησιμοποιούνται για το στυλ και JavaΣτόχευση σεναρίου, αλλά διαφέρουν ως προς τη μοναδικότητα και την εφαρμογή.

Χαρακτηριστικό	Χαρακτηριστικά:	Παράδειγμα
id	Πρέπει να είναι μοναδικό σε ένα έγγραφο· χρησιμοποιείται για ένα μόνο στοιχείο.
τάξη	Μπορεί να εφαρμοστεί σε πολλά στοιχεία· επιτρέπει την ομαδοποίησηping.

Παράδειγμα χρήσης:

<div id="main-header">Welcome</div>
<p class="text-highlight">Hello</p>

καλυτερα πρακτική: Χρήση id για μοναδικά αναγνωριστικά, και class για επαναχρησιμοποιήσιμες ομάδες styling.

24) Τι είναι τα χαρακτηριστικά data-* στην HTML5 και ποια είναι τα οφέλη τους;

The data-* Τα χαρακτηριστικά επιτρέπουν στους προγραμματιστές να αποθηκεύουν προσαρμοσμένα δεδομένα απευθείας μέσα σε στοιχεία HTML. Αυτά τα χαρακτηριστικά έχουν το πρόθεμα data- ακολουθούμενο από ένα όνομα, καθιστώντας τα προσβάσιμα μέσω JavaΓραφή.

οφέλη:

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

Παράδειγμα:

<button data-user="123" data-role="admin">Edit User</button>
<script>
	let btn = document.querySelector("button");
	console.log(btn.dataset.user); // 123
</script>

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

25) Πώς διασφαλίζεται η προσβασιμότητα στην HTML χρησιμοποιώντας ρόλους και χαρακτηριστικά ARIA;

Η προσβασιμότητα σε HTML διασφαλίζει ότι οι εφαρμογές ιστού είναι χρηστικές από άτομα με αναπηρίες. Οι ρόλοι και τα χαρακτηριστικά ARIA (Accessible Rich Internet Applications - Προσβάσιμες Πλούσιες Εφαρμογές Διαδικτύου) παρέχουν πρόσθετο πλαίσιο για τις υποστηρικτικές τεχνολογίες.

Παραδείγματα χαρακτηριστικών ARIA:

role=”navigation” – ορίζει τα μενού πλοήγησης.
aria-label=”Κλείσιμο” – παρέχει περιγραφικές ετικέτες.
aria-hidden=”true” – αποκρύπτει στοιχεία από τα προγράμματα ανάγνωσης οθόνης.

Παράδειγμα:

<button aria-label="Close window">X</button>

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

26) Ποια είναι η διαφορά μεταξύ στοιχείων inline, block και inline-block;

Τα στοιχεία HTML κατηγοριοποιούνται με βάση τη συμπεριφορά εμφάνισής τους.

Χαρακτηριστικά	Χαρακτηριστικά:	Παραδείγματα
Στη γραμμή	Μην ξεκινάτε από νέα γραμμή. Μόνο όσο ευρύ είναι το περιεχόμενο.	,
Αποκλεισμός	Καταλάβετε ολόκληρο το πλάτος, ξεκινώντας από μια νέα γραμμή.	,
Ενσωματωμένο μπλοκ	Συμπεριφέρεται σαν ενσωματωμένη αλλά επιτρέπει ιδιότητες μπλοκ (ύψος, πλάτος).	, με στυλ

Παράδειγμα:

<span>Inline</span>
<div>Block</div>
<span style="display:inline-block; width:100px;">Inline-block</span>

27) Πώς βελτιστοποιείτε εικόνες σε HTML για καλύτερη απόδοση;

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

Χρησιμοποιώντας σύγχρονες μορφές όπως WebP or AVIF.
Εφαρμογή εικόνων που προσαρμόζονται με και srcset.
Ορισμός χαρακτηριστικών πλάτους και ύψους για την αποφυγή μετατοπίσεων διάταξης.
Συμπίεση εικόνων πριν από την μεταφόρτωση.
Αργή φόρτωση χρησιμοποιώντας loading="lazy".

Παράδειγμα:

<img src="image.webp" alt="Optimized Image" loading="lazy">

Οι καλά βελτιστοποιημένες εικόνες βελτιώνουν την εμπειρία χρήστη και τις βαθμολογίες Core Web Vitals.

28) Ποιος είναι ο κύκλος ζωής μιας σελίδας HTML στο πρόγραμμα περιήγησης;

Ο κύκλος ζωής μιας σελίδας HTML περιλαμβάνει διάφορα βήματα:

Τεχνολογία: Το πρόγραμμα περιήγησης διαβάζει HTML και κατασκευάζει το μοντέλο αντικειμένου εγγράφου (DOM).
Φόρτωση πόρων: Ανακτώνται συνδεδεμένα CSS, JS και εικόνες.
Απόδοση: Το πρόγραμμα περιήγησης εφαρμόζει στοιχεία στυλ και διάταξης.
Σενάριο: JavaΤο σενάριο εκτελεί και χειρίζεται το DOM εάν απαιτείται.
ΑΛΛΗΛΕΠΙΔΡΑΣΗ: Γίνεται επεξεργασία συμβάντων όπως κλικ και κύλιση.

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

29) Ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα της χρήσης σημασιολογικής HTML;

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

Πλεονεκτήματα	Μειονεκτήματα
Βελτιώνει την προσβασιμότητα για τους αναγνώστες οθόνης.	Απαιτεί εκμάθηση νέων ετικετών.
Βελτιώνει το SEO διευκρινίζοντας τη δομή.	Μπορεί να αυξήσει τον αρχικό χρόνο ανάπτυξης.
Ευκολότερη αναγνωσιμότητα και συντηρησιμότητα κώδικα.	Τα παλαιότερα προγράμματα περιήγησης ενδέχεται να έχουν περιορισμένη υποστήριξη.

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

30) Πώς είναι το στοιχείο που χρησιμοποιείται για εικόνες που προσαρμόζονται στις ανάγκες;

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

Παράδειγμα:

<picture>
	<source srcset="image-large.webp" media="(min-width: 800px)">
	<source srcset="image-small.webp" media="(max-width: 799px)">
	<img src="fallback.jpg" alt="Responsive Image">
</picture>

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

31) Ποιοι είναι οι διαφορετικοί τρόποι ενσωμάτωσης ήχου σε HTML5;

Η HTML5 παρέχει το στοιχείο, εξαλείφοντας την ανάγκη για εξωτερικά πρόσθετα. Υποστηρίζει πολλαπλές μορφές όπως MP3, OGG και WAV για να διασφαλιστεί η συμβατότητα μεταξύ προγραμμάτων περιήγησης. Οι προγραμματιστές μπορούν να καθορίσουν πολλαπλές πηγές μέσα στο στοιχείο, επιτρέποντας στο πρόγραμμα περιήγησης να επιλέξει την πρώτη υποστηριζόμενη μορφή.

Παράδειγμα:

<audio controls>
	<source src="sound.mp3" type="audio/mpeg">
	<source src="sound.ogg" type="audio/ogg">
	Your browser does not support the audio element.
</audio>

Τα οφέλη περιλαμβάνουν εγγενείς ελέγχους, αυτόματη αναπαραγωγή, τουαλέταpingκαι προσβασιμότητα με υπότιτλους μέσωtrack>.

32) Πώς λειτουργεί το εργασία με ετικέτες και ποια είναι τα πλεονεκτήματά της;

Ο Το στοιχείο επιτρέπει την ενσωμάτωση βίντεο χωρίς προγράμματα αναπαραγωγής τρίτων. Οι υποστηριζόμενες μορφές περιλαμβάνουν MP4 (H.264), WebM και Ogg. Οι προγραμματιστές μπορούν να προσθέσουν πολλαπλές πηγές και χαρακτηριστικά όπως controls, autoplay, loopκαι poster.

Παράδειγμα:

<video controls width="600" poster="thumbnail.jpg">
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.webm" type="video/webm">
	Your browser does not support the video tag.
</video>

Πλεονεκτήματα:

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

33) Ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα της χρήσης φορμών HTML;

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

Πλεονεκτήματα	Μειονεκτήματα
Τυποποιημένο, υποστηρίζεται από όλα τα προγράμματα περιήγησης.	Ευάλωτο σε κινδύνους ασφαλείας (π.χ., XSS, CSRF).
Εύκολη ενσωμάτωση με διακομιστές backend.	Οι κακώς σχεδιασμένες φόρμες μειώνουν την χρηστικότητα.
Υποστηρίζει επικύρωση και πολλαπλούς τύπους εισόδου.	Απαιτείται HTTPS για ασφαλή διαχείριση δεδομένων.

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

34) Πώς διαφέρει η επικύρωση φόρμας από την πλευρά του πελάτη από την πλευρά του διακομιστή;

Επικύρωση από την πλευρά του πελάτη εκτελείται στο πρόγραμμα περιήγησης χρησιμοποιώντας χαρακτηριστικά HTML5 ( required, pattern ) ή JavaΣενάριο. Παρέχει άμεση ανατροφοδότηση, αλλά μπορεί να παρακαμφθεί.

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

Άποψη	Από την πλευρά του πελάτη	Πλευρά του διακομιστή
Ταχύτητα	Άμεση ανατροφοδότηση	Πιο αργά, μετά την υποβολή
Ασφάλεια	Μπορεί να παρακαμφθεί	Πιο ασφαλής
Παράδειγμα		PHP, επικύρωση Node.js

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

35) Ποιος είναι ο σκοπός του `viewport` μετα-ετικέτα σε responsive σχεδιασμό;

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

Παράδειγμα:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

οφέλη:

Εξασφαλίζει προσαρμοστικές διατάξεις.
Αποτρέπει προβλήματα ζουμ.
Βελτιώνει τα Core Web Vitals και τη χρηστικότητα σε μικρές οθόνες.

Χωρίς αυτό, οι ιστότοποι ενδέχεται να φαίνονται μικροσκοπικοί και άχρηστοι σε κινητές συσκευές.

36) Πώς γίνεται και στοιχεία βελτιώνουν τις εφαρμογές HTML5;

: Παρέχει έναν εγγενή τρόπο δημιουργίας αναδυόμενων παραθύρων. Μπορεί να ανοίξει ή να κλείσει μέσω JavaΣενάριο ( show() και close() ).

: Ορίζει επαναχρησιμοποιήσιμα τμήματα HTML που δεν αποδίδονται μέχρι να ενεργοποιηθούν από JavaΓραφή.

Παράδειγμα:

<dialog id="myDialog">Hello!</dialog>
<template id="card">
	<div class="card">Reusable content</div>
</template>

οφέλη:

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

37) Εξηγήστε τις διαφορές μεταξύ , , and .

Τα σενάρια μπορούν να εμποδίσουν την απόδοση σελίδας εάν δεν διαχειριστούν σωστά.

Χαρακτηριστικό	Συμπεριφορά	Χρήση θήκης
	Αποκλείει την ανάλυση HTML μέχρι να ολοκληρωθεί η εκτέλεση.	Μικρά ενσωματωμένα σενάρια
	Φορτώνει ασύγχρονα, εκτελείται αμέσως μόλις είναι έτοιμο.	Αναλυτικά στοιχεία, διαφημίσεις
	Φορτώνει ασύγχρονα, εκτελείται μετά την ανάλυση HTML.	Σενάρια που εξαρτώνται από το DOM

Παράδειγμα:

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

Χρησιμοποιώντας async και defer βελτιώνει την απόδοση και αποτρέπει προβλήματα αποκλεισμού απόδοσης.

38) Πώς μπορείτε να διασφαλίσετε την ασφαλή διαχείριση φορμών σε HTML;

Η ασφάλεια των φορμών απαιτεί τόσο πρακτικές HTML όσο και διασφαλίσεις backend.

Οι βασικές πρακτικές περιλαμβάνουν:

Να χρησιμοποιείτε πάντα HTTPS για τη μετάδοση δεδομένων.
Επικυρώστε τις εισόδους τόσο από την πλευρά του πελάτη όσο και από την πλευρά του διακομιστή.
Χρησιμοποιήστε το autocomplete="off" χαρακτηριστικό για ευαίσθητα πεδία όπως οι κωδικοί πρόσβασης.
Εγγραφές rel="noopener noreferrer" σε εξωτερικές ενέργειες φόρμας.
Αποτρέψτε την πλαστογράφηση αιτημάτων μεταξύ ιστότοπων (CSRF) με διακριτικά.

Παράδειγμα:

<form method="post" action="/el/secure" autocomplete="off">
	<input type="password" name="pwd" required>
</form>

Οι ασφαλείς φόρμες προστατεύουν από διαρροές δεδομένων και κοινά τρωτά σημεία.

39) Ποια είναι η διαφορά μεταξύ των cookies, του localStorage και του sessionStorage σε HTML5;

Η HTML5 εισήγαγε την αποθήκευση ιστού ως εναλλακτική λύση στα cookies.

Τύπος αποθήκευσης	Χωρητικότητα	Διάρκεια ζωής	Αποστέλλεται με HTTP;
ΜΠΙΣΚΟΤΑ	~4KB	Μέχρι την ημερομηνία λήξης	Ναι
τοπική αποθήκευση	~5–10MB	Μόνιμο μέχρι να διαγραφεί	Οχι
Αποθήκευση συνεδρίας	~5MB	Μέχρι να κλείσει το πρόγραμμα περιήγησης/η καρτέλα	Οχι

Παράδειγμα:

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));

Το Web Storage βελτιώνει την απόδοση επειδή τα δεδομένα δεν αποστέλλονται με κάθε αίτημα HTTP.

40) Πώς χειρίζεται η HTML την προσβασιμότητα για εικόνες, φόρμες και πολυμέσα;

Η προσβασιμότητα διασφαλίζει την ένταξη των χρηστών με αναπηρίες.

Εικόνες: Χρήση alt χαρακτηριστικά για τους αναγνώστες οθόνης.
Έντυπα: Προσθήκη συνδεδεμένου με for χαρακτηριστικά για την περιγραφή εισροών.
Πολυμέσα: Παρέχετε λεζάντες (track> για βίντεο) και μεταγραφές.

Παράδειγμα:

<img src="logo.png" alt="Company Logo">
<label for="email">Email</label>
<input type="email" id="email">

Η τήρηση των προτύπων προσβασιμότητας (WCAG, ARIA) καθιστά τις διαδικτυακές εφαρμογές πιο εύχρηστες και συμβατές με τους νόμους.

41) Ποια είναι τα οφέλη από τη χρήση τουtrack> στοιχείο με πολυμέσα;

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

οφέλη:

Βοηθά χρήστες με προβλήματα ακοής.
Βελτιώνει το SEO, καθώς το κείμενο είναι ανιχνεύσιμο.
Βελτιώνει την εμπειρία χρήστη σε θορυβώδη περιβάλλοντα.

Παράδειγμα:

<video controls>
	<source src="movie.mp4" type="video/mp4">
	<track src="captions.vtt" kind="subtitles" srclang="en" label="English">
</video>

Αυτό διασφαλίζει ότι το πολυμεσικό περιεχόμενο είναι προσβάσιμο σε ένα ευρύτερο κοινό.

42) Πώς το `contenteditable` λειτουργία χαρακτηριστικών σε HTML;

The contenteditable Το χαρακτηριστικό επιτρέπει στους χρήστες να επεξεργάζονται το περιεχόμενο ενός στοιχείου απευθείας στο πρόγραμμα περιήγησης χωρίς εξωτερικά εργαλεία.

Παράδειγμα:

<p contenteditable="true">This paragraph is editable.</p>

Χρήσεις χρήσης:

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

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

43) Ποια είναι η διαφορά μεταξύ της προοδευτικής βελτίωσης και της ομαλής υποβάθμισης στο σχεδιασμό HTML;

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

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

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

44) Τι είναι τα μικροδεδομένα στην HTML5 και πώς είναι χρήσιμα για το SEO;

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

Παράδειγμα:

<div itemscope itemtype="https://schema.org/Book">
	<span itemprop="name">HTML Mastery</span>
	by <span itemprop="author">Jane Doe</span>
</div>

οφέλη:

Βελτιώνει την ορατότητα με πλούσια αποσπάσματα.
Παρέχει πληροφορίες για τις μηχανές αναζήτησης.
Βελτιώνει το CTR στα αποτελέσματα αναζήτησης.

45) Ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα της χρήσης ενσωματωμένων πλαισίων ( );

Αγγίξαμε νωρίτερα, αλλά ας συνοψίσουμε τα πλεονεκτήματα έναντι των μειονεκτημάτων.

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

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

46) Πώς χρησιμοποιείτε το και στοιχεία σε HTML5;

Αυτά τα στοιχεία δημιουργούν πτυσσόμενες ενότητες περιεχομένου χωρίς JavaΓραφή.

Παράδειγμα:

<details>
	<summary>Click for more details</summary>
	<p>This text is revealed when expanded.</p>
</details>

οφέλη:

Βελτιώνει την αλληλεπίδραση των χρηστών.
Βελτιώνει την προσβασιμότητα (φιλικό προς το πληκτρολόγιο και το πρόγραμμα ανάγνωσης οθόνης).
Αποφεύγει την εξάρτηση από το έθιμο JavaΛύσεις σεναρίων.

Αυτό είναι ιδιαίτερα χρήσιμο για συχνές ερωτήσεις ή διεπαφές προοδευτικής αποκάλυψης.

47) Ποιες είναι οι βασικές διαφορές μεταξύ HTML και XHTML;

Η HTML και η XHTML (Extensible HTML) είναι γλώσσες σήμανσης, αλλά η XHTML ακολουθεί αυστηρότερους κανόνες XML.

Χαρακτηριστικό	HTML	XHTML
Σύνταξη	Ευέλικτο	Αυστηρό, συμβατό με XML
Κλείσιμο ετικέτας	Προαιρετικός	υποχρεωτική
Ευαισθησία περίπτωσης	Δεν γίνεται διάκριση πεζών-κεφαλαίων	Πρέπει να είναι πεζά γράμματα
Σφάλμα χειρισμού	Τα προγράμματα περιήγησης είναι επιεικής	Σφάλματα ανάλυσης διακόπτουν την απόδοση

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

48) Ποιοι είναι οι διαφορετικοί τύποι doctypes στην HTML και γιατί είναι σημαντικοί;

Το doctype λέει στο πρόγραμμα περιήγησης ποια έκδοση HTML να χρησιμοποιήσει.

τύποι:

HTML5: (απλό, μοντέρνο).
HTML 4.01 Αυστηρή/Μεταβατική/Σύνολο πλαισίων.
XHTML 1.0 Αυστηρή/Μεταβατική/Σύνολο πλαισίων.

Η χρήση του σωστού τύπου doctype διασφαλίζει συνεπή απόδοση σε όλα τα προγράμματα περιήγησης. Ο τύπος doctype HTML5 είναι πλέον το πρότυπο.

49) Πώς βελτιώνετε το SEO με ετικέτες HTML όπως , <meta> και <h1>;

Το SEO βασίζεται στη σωστή σημασιολογική δομή.

: Ορίζει τον τίτλο της σελίδας, ο οποίος είναι κρίσιμος για την κατάταξη.
: Παρέχει ένα απόσπασμα για τις μηχανές αναζήτησης.
Επικεφαλίδες ( – ): Οργάνωση ιεραρχίας περιεχομένου.
alt χαρακτηριστικά σε εικόνες: Βελτιώστε την ορατότητα αναζήτησης εικόνων.
Σήμανση σχήματος: Παρέχει δομημένα δεδομένα.

Παράδειγμα:

<title>HTML Interview Questions</title>
<meta name="description" content="Comprehensive HTML interview guide with answers.">
<h1>Top HTML Questions</h1>

50) Ποιες είναι οι διαφορές μεταξύ και σε HTML;

Παρόλο που και οι δύο χρησιμοποιούν το href χαρακτηριστικό, οι σκοποί τους διαφέρουν.

ετικέτα	Σκοπός	Παράδειγμα
	Δημιουργεί υπερσυνδέσμους για πλοήγηση μεταξύ σελίδων.	Κάντε κλικ εδώ
	Ορίζει σχέσεις με εξωτερικούς πόρους όπως CSS ή εικονίδια.

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

🔍 Κορυφαίες ερωτήσεις συνέντευξης HTML με πραγματικά σενάρια και στρατηγικές απαντήσεις

1) Ποια είναι η διαφορά μεταξύ σημασιολογικών και μη σημασιολογικών στοιχείων HTML και γιατί έχει σημασία;

Τι αναζητά ο συνεντευξιαστής: Κατανόηση της σημασιολογίας, της προσβασιμότητας, του SEO και της συντηρησιμότητας.

Παράδειγμα απάντησης:

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

2) Πώς θα κάνατε μια σύνθετη φόρμα προσβάσιμη και φιλική προς το χρήστη χρησιμοποιώντας απλή HTML;

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

Παράδειγμα απάντησης:

«Ξεκινάω με σωστούς συνειρμούς, χρησιμοποιώ κατάλληλους type χαρακτηριστικά όπως email, telκαι date, και προσθέστε required, minκαι pattern για επικύρωση περιορισμών. Ομαδοποιώ τα σχετικά πεδία με και Χρησιμοποιώ aria-describedby για τη σύνδεση των εισροών με βοηθητικό κείμενο και μηνύματα σφάλματος, παρέχετε σαφείς πληροφορίες placeholder κείμενο χωρίς αντικατάσταση ετικετών και ενεργοποίηση autocomplete μάρκες όπως given-name και address-line1Βασίζομαι σε εγγενή μηνύματα επικύρωσης, αλλά τα συμπληρώνω με προσβάσιμες περιλήψεις σφαλμάτων που εστιάζουν στο πρώτο μη έγκυρο πεδίο.

3) Εξηγήστε πώς θα παρέχετε εικόνες με δυνατότητα απόκρισης με βέλτιστη απόδοση.

Τι αναζητά ο συνεντευξιαστής: Πρακτική χρήση του , sizes, και .

Παράδειγμα απάντησης:

«Χρησιμοποιώ με srcset να παρέχει πολλαπλές αναλύσεις και ένα sizes χαρακτηριστικό που αντικατοπτρίζει το πραγματικό πλάτος απόδοσης της διάταξης. Για καλλιτεχνική διεύθυνση, τυλίγω εικόνες σε με όρους που εξαρτώνται από τα μέσα ενημέρωσης στοιχεία. Πάντα συμπεριλαμβάνω εγγενή width και height για να κρατήσω χώρο και να μειώσω την αλλαγή διάταξης, και θεωρώ loading="lazy" για εικόνες που βρίσκονται στο κάτω μέρος της σελίδας. Όπου είναι απαραίτητο, παρέχω σύγχρονες μορφές όπως AVIF ή WebP με εφεδρικές μορφές.

4) Μια παλαιότερη σελίδα χρησιμοποιεί πίνακες για τη διάταξη και δεν είναι προσβάσιμη. Πώς προσεγγίζετε την αναδιαμόρφωση της;

Τι αναζητά ο συνεντευξιαστής: Στρατηγική μετεγκατάστασης, διαχείριση κινδύνου και δοκιμές.

Παράδειγμα απάντησης (χρησιμοποιεί την απαιτούμενη φράση #1):

«Στον προηγούμενο ρόλο μου, αντικατέστησα τις δομές που βασίζονται σε πίνακες με σημασιολογικά κοντέινερ όπως , , και CSS Grid για διάταξη. Μετανάστευσα σε φέτες για να μειώσω τον κίνδυνο, τον χάρτηping κάθε περιοχή πίνακα σε σημασιολογικές ενότητες και επικύρωση με ένα εργαλείο επικύρωσης HTML και aXe. Πρόσθεσα τα κατάλληλα επίπεδα επικεφαλίδων, ορόσημα και σειρά εστίασης πληκτρολογίου. Επαλήθευσα την ισοτιμία με δοκιμές οπτικής παλινδρόμησης και βελτίωσα την απόδοση αφαιρώντας εικόνες διαχωριστικού και παρωχημένα χαρακτηριστικά.

5) Πώς `defer` και `async` επί differ, and why should HTML authors care?

Τι αναζητά ο συνεντευξιαστής: Κατανόηση της συμπεριφοράς απόδοσης και αποκλεισμού.

Παράδειγμα απάντησης:

"async κατεβάζει και εκτελεί ένα σενάριο μόλις είναι διαθέσιμο, κάτι που μπορεί να προκαλέσει εκτέλεση εκτός σειράς. defer λήψεις κατά την ανάλυση, αλλά εγγυάται την εκτέλεση μετά την ανάλυση του HTML, με τη σειρά. Οι συντάκτες HTML θα πρέπει να νοιάζονται επειδή τα σενάρια αποκλεισμού καθυστερούν την πρώτη απόδοση. Ορίζω ως προεπιλογή defer για σενάρια σελίδας που εξαρτώνται από την ετοιμότητα και την κράτηση του DOM async για ανεξάρτητα σενάρια όπως οι αναλύσεις.

6) Περιγράψτε μια φορά που εξισορροπήσατε τα αιτήματα σχεδίασης σε άψογα εικονοστοιχεία με σημασιολογική, προσβάσιμη HTML.

Τι αναζητά ο συνεντευξιαστής: Συνεργασία, επικοινωνία και ηθικοί συμβιβασμοί.

Παράδειγμα απάντησης (χρησιμοποιεί την απαιτούμενη φράση #2):

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

7) Ανακαλύπτετε αθροιστική αλλαγή διάταξης λόγω εικόνων και iframe χωρίς διαστάσεις. Ποιο είναι το σχέδιό σας;

Τι αναζητά ο συνεντευξιαστής: Πρακτικές λύσεις σε πραγματικά προβλήματα απόδοσης.

Παράδειγμα απάντησης (χρησιμοποιεί την απαιτούμενη φράση #3):

«Στην προηγούμενη δουλειά μου, έλεγχα τα πάντα» και στοιχεία και πρόσθετα εγγενή width και height χαρακτηριστικά που ταιριάζουν με την αναλογία διαστάσεων της πηγής. Χρησιμοποίησα CSS max-width: 100% για να κλιμακωθώ με απόκριση και, όταν περιλαμβανόταν δυναμικό περιεχόμενο, εφάρμοσα το CSS aspect-ratio placeholders ιδιότητας ή κοντέινερ. Επαλήθευσα βελτιώσεις στον πίνακα Performance και στο Lighthouse, επιβεβαιώνοντας τη μειωμένη αλλαγή διάταξης.

8) Ποιες είναι οι βέλτιστες πρακτικές για τη σύνταξη προσβάσιμων πινάκων HTML;

Τι αναζητά ο συνεντευξιαστής: Σωστή δομική σήμανση και βοηθητική τεχνική υποστήριξη.

Παράδειγμα απάντησης:

«Χρησιμοποιώ για έναν συνοπτικό τίτλο, , , και για τη δομή, και για να ορίσω κεφαλίδες. Για σύνθετους πίνακες με κεφαλίδες πολλαπλών επιπέδων, χρησιμοποιώ headers και id χαρακτηριστικά για την αντιστοίχιση κελιών. Αποφεύγω τη χρήση πινάκων για διάταξη, διασφαλίζω επαρκή αντίθεση κειμένου για το περιεχόμενο εντός κελιών και παρέχω συνόψεις εκτός πίνακα για λόγους συμφραζομένων, εάν χρειάζεται.

9) Πώς διαχειρίζεστε τις αυστηρές προθεσμίες όταν πολλά παραδοτέα HTML ανταγωνίζονται για την προσοχή;

Τι αναζητά ο συνεντευξιαστής: Ιεράρχηση προτεραιοτήτων, επικοινωνία και ποιότητα υπό πίεση.

Παράδειγμα απάντησης (χρησιμοποιεί την απαιτούμενη φράση #4):

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

10) Ένας ιστότοπος μάρκετινγκ μίας σελίδας πρέπει να είναι φιλικός προς τις μηχανές αναζήτησης (SEO) χωρίς JavaΒασιζόμενοι σε script. Ποιες στρατηγικές HTML εφαρμόζετε;

Τι αναζητά ο συνεντευξιαστής: Δυνατότητα αποστολής φιλικού προς την αναζήτηση και ανθεκτικού περιεχομένου.

Παράδειγμα απάντησης:

«Βεβαιώνομαι ότι το κύριο περιεχόμενο αποδίδεται σε HTML και όχι εισάγεται από JavaΣενάριο. Χρησιμοποιώ λογική ιεραρχία επικεφαλίδων, περιγραφική και <meta name=”περιγραφή”>, κανονικό URLs και σημασιολογικές ενότητες. Επισημαίνω το περιεχόμενο με κατάλληλα μικροδεδομένα ή JSON-LD όπου χρειάζεται, διασφαλίζω ουσιαστική εσωτερική σύνδεση και προσθέτω μετα-ετικέτες κοινωνικής δικτύωσης για προεπισκοπήσεις. Επικυρώνω το περίγραμμα του εγγράφου και επιβεβαιώνω την ανιχνευσιμότητα με έναν στατικό χάρτη ιστότοπου.

Κορυφαίες ερωτήσεις και απαντήσεις συνέντευξης HTML για το θέμα "Κορυφαίες ερωτήσεις και απαντήσεις"

1) Τι είναι η HTML και γιατί θεωρείται η ραχοκοκαλιά της ανάπτυξης ιστοσελίδων;

2) Εξηγήστε τη διαφορά μεταξύ HTML και HTML5 με παραδείγματα.

3) Πώς είναι οργανωμένη η βασική δομή ενός εγγράφου HTML;

4) Τι είναι οι ετικέτες και τα στοιχεία στην HTML; Δώστε παραδείγματα.

5) Ποιοι τύποι λιστών υποστηρίζονται στην HTML και πού χρησιμοποιούνται;

6) Πώς χρησιμοποιούνται τα χαρακτηριστικά στην HTML και ποια είναι τα συνηθισμένα παραδείγματα;

7) Τι είναι τα σημασιολογικά στοιχεία HTML και ποια οφέλη προσφέρουν;

8) Εξηγήστε τη διαφορά μεταξύ στοιχείων σε επίπεδο μπλοκ και ενσωματωμένων στοιχείων με παραδείγματα.

9) Πώς δημιουργούνται οι υπερσύνδεσμοι και ποια είναι η διαφορά μεταξύ απόλυτου και σχετικού; URLs?

10) Ποιος είναι ο ρόλος του ετικέτα και τα χαρακτηριστικά της;

ΣΧΕΤΙΚΑ ΑΡΘΡΑ

11) Ποιοι διαφορετικοί τύποι πεδίων εισαγωγής είναι διαθέσιμοι σε φόρμες HTML5;

12) Πώς λειτουργούν οι σημασιολογικές ετικέτες HTML5 όπως , , , και διαφέρουν στη χρήση;

13) Εξηγήστε τη διαφορά μεταξύ του ενσωματωμένου CSS, του εσωτερικού CSS και του εξωτερικού CSS.

14) Τι είναι οι οντότητες HTML και γιατί χρησιμοποιούνται;

15) Πώς γίνεται στοιχεία λειτουργούν και ποια είναι τα πλεονεκτήματα και τα μειονεκτήματά τους;

16) Τι είναι οι μετα-ετικέτες (meta tags) στην HTML και πώς επηρεάζουν το SEO;

17) Ποια είναι η διαφορά μεταξύ απόλυτων, σχετικών και σχετικών με τη ρίζα μονοπατιών σε συνδέσμους HTML;

18) Πώς λειτουργούν τα API HTML5, όπως η γεωγραφική τοποθεσία, η αποθήκευση ιστού και Canvaβελτιώνουν τη λειτουργικότητα;

19) Εξηγήστε τα πλεονεκτήματα και τα μειονεκτήματα της χρήσης του στοιχείο για το σχεδιασμό της διάταξης.

20) Μπορούν να εφαρμοστούν πολλαπλές κλάσεις CSS σε ένα μόνο στοιχείο HTML; Πώς επιτυγχάνεται αυτό;

21) Ποια είναι η διαφορά μεταξύ και σε HTML;

22) Πώς λειτουργεί το εργασία με στοιχεία και πού χρησιμοποιείται;

23) Εξηγήστε τη διαφορά μεταξύ id και class χαρακτηριστικά σε HTML.

24) Τι είναι τα χαρακτηριστικά data-* στην HTML5 και ποια είναι τα οφέλη τους;

25) Πώς διασφαλίζεται η προσβασιμότητα στην HTML χρησιμοποιώντας ρόλους και χαρακτηριστικά ARIA;

26) Ποια είναι η διαφορά μεταξύ στοιχείων inline, block και inline-block;

27) Πώς βελτιστοποιείτε εικόνες σε HTML για καλύτερη απόδοση;

28) Ποιος είναι ο κύκλος ζωής μιας σελίδας HTML στο πρόγραμμα περιήγησης;

29) Ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα της χρήσης σημασιολογικής HTML;

30) Πώς είναι το στοιχείο που χρησιμοποιείται για εικόνες που προσαρμόζονται στις ανάγκες;

31) Ποιοι είναι οι διαφορετικοί τρόποι ενσωμάτωσης ήχου σε HTML5;

32) Πώς λειτουργεί το εργασία με ετικέτες και ποια είναι τα πλεονεκτήματά της;

33) Ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα της χρήσης φορμών HTML;

34) Πώς διαφέρει η επικύρωση φόρμας από την πλευρά του πελάτη από την πλευρά του διακομιστή;

35) Ποιος είναι ο σκοπός του viewport μετα-ετικέτα σε responsive σχεδιασμό;

36) Πώς γίνεται και στοιχεία βελτιώνουν τις εφαρμογές HTML5;

37) Εξηγήστε τις διαφορές μεταξύ , , and .

38) Πώς μπορείτε να διασφαλίσετε την ασφαλή διαχείριση φορμών σε HTML;

39) Ποια είναι η διαφορά μεταξύ των cookies, του localStorage και του sessionStorage σε HTML5;

40) Πώς χειρίζεται η HTML την προσβασιμότητα για εικόνες, φόρμες και πολυμέσα;

41) Ποια είναι τα οφέλη από τη χρήση τουtrack> στοιχείο με πολυμέσα;

42) Πώς το contenteditable λειτουργία χαρακτηριστικών σε HTML;

43) Ποια είναι η διαφορά μεταξύ της προοδευτικής βελτίωσης και της ομαλής υποβάθμισης στο σχεδιασμό HTML;

44) Τι είναι τα μικροδεδομένα στην HTML5 και πώς είναι χρήσιμα για το SEO;

45) Ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα της χρήσης ενσωματωμένων πλαισίων ( );

46) Πώς χρησιμοποιείτε το και στοιχεία σε HTML5;

47) Ποιες είναι οι βασικές διαφορές μεταξύ HTML και XHTML;

48) Ποιοι είναι οι διαφορετικοί τύποι doctypes στην HTML και γιατί είναι σημαντικοί;

49) Πώς βελτιώνετε το SEO με ετικέτες HTML όπως , <meta> και <h1>;

50) Ποιες είναι οι διαφορές μεταξύ και σε HTML;

🔍 Κορυφαίες ερωτήσεις συνέντευξης HTML με πραγματικά σενάρια και στρατηγικές απαντήσεις

1) Ποια είναι η διαφορά μεταξύ σημασιολογικών και μη σημασιολογικών στοιχείων HTML και γιατί έχει σημασία;

2) Πώς θα κάνατε μια σύνθετη φόρμα προσβάσιμη και φιλική προς το χρήστη χρησιμοποιώντας απλή HTML;

3) Εξηγήστε πώς θα παρέχετε εικόνες με δυνατότητα απόκρισης με βέλτιστη απόδοση.

4) Μια παλαιότερη σελίδα χρησιμοποιεί πίνακες για τη διάταξη και δεν είναι προσβάσιμη. Πώς προσεγγίζετε την αναδιαμόρφωση της;

5) Πώς defer και async επί differ, and why should HTML authors care?

6) Περιγράψτε μια φορά που εξισορροπήσατε τα αιτήματα σχεδίασης σε άψογα εικονοστοιχεία με σημασιολογική, προσβάσιμη HTML.

7) Ανακαλύπτετε αθροιστική αλλαγή διάταξης λόγω εικόνων και iframe χωρίς διαστάσεις. Ποιο είναι το σχέδιό σας;

8) Ποιες είναι οι βέλτιστες πρακτικές για τη σύνταξη προσβάσιμων πινάκων HTML;

9) Πώς διαχειρίζεστε τις αυστηρές προθεσμίες όταν πολλά παραδοτέα HTML ανταγωνίζονται για την προσοχή;

10) Ένας ιστότοπος μάρκετινγκ μίας σελίδας πρέπει να είναι φιλικός προς τις μηχανές αναζήτησης (SEO) χωρίς JavaΒασιζόμενοι σε script. Ποιες στρατηγικές HTML εφαρμόζετε;

Συνοψίστε αυτήν την ανάρτηση με:

Εγγραφείτε στο ενημερωτικό δελτίο

23) Εξηγήστε τη διαφορά μεταξύ `id` και `class` χαρακτηριστικά σε HTML.

35) Ποιος είναι ο σκοπός του `viewport` μετα-ετικέτα σε responsive σχεδιασμό;

42) Πώς το `contenteditable` λειτουργία χαρακτηριστικών σε HTML;

5) Πώς `defer` και `async` επί differ, and why should HTML authors care?