Κάθε στοιχείο HTML έχει μια προεπιλεγμένη τιμή εμφάνισης, ανάλογα με τον τύπο του στοιχείου.
Υπάρχουν δύο τιμές εμφάνισης: block και inline.
Τα block στοιχεία παίρνουν όλο το διαθέσιμο πλάτος του παραθύρου περιήγησης και αρχίζουν από νέα γραμμή. Αυτό σημαίνει ότι ένα block στοιχείο καταλαμβάνει ολόκληρο τον οριζόντιο χώρο και κάθε νέο block στοιχείο ξεκινά από μια νέα γραμμή. Παραδείγματα block στοιχείων είναι τα <div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, κ.λπ.
Τα inline στοιχεία παίρνουν μόνο το χώρο που χρειάζονται για να εμφανιστούν και δεν κάνουν νέα γραμμή. Αυτό σημαίνει ότι τα inline στοιχεία εμφανίζονται δίπλα ο ένας στον άλλον. Παραδείγματα inline στοιχείων είναι τα <span>, <a>, <strong>, <em>, <img>, κ.λπ.
Η προεπιλεγμένη τιμή εμφάνισης μπορεί να αλλάξει με τη χρήση CSS μέσω της ιδιότητας display.
Ένα block-level στοιχείο πάντα ξεκινάει σε μια νέα γραμμή και οι περιηγητές προσθέτουν αυτόματα κάποιο χώρο (ένα περιθώριο) πριν και μετά το στοιχείο.
Ένα block-level στοιχείο πάντα καταλαμβάνει το πλήρες διαθέσιμο πλάτος (εκτείνεται από αριστερά προς τα δεξιά όσο μπορεί).
Δύο συνηθισμένα block-level στοιχεία είναι τα <p> και <div>.
Το στοιχείο <p> ορίζει ένα παράγραφο σε ένα έγγραφο HTML.
Το στοιχείο <div> ορίζει μια διαίρεση ή μια ενότητα σε ένα έγγραφο HTML.
Παρακάτω παραθέτω μια λίστα με όλα τα block-level στοιχεία στην HTML:
<address><article><aside><blockquote><details><dialog><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>–<h6><header><hr><li><main><nav><ol><p><pre><section><table><ul>
Αυτά τα στοιχεία έχουν την προεπιλεγμένη συμπεριφορά του block-level, ξεκινώντας από μια νέα γραμμή και καταλαμβάνοντας το πλήρες πλάτος του διαθέσιμου χώρου. Ωστόσο, αξίζει να σημειωθεί ότι η εμφάνιση αυτών των στοιχείων μπορεί να τροποποιηθεί με τη χρήση CSS.
[adinserter block=”2″]
Ένα inline στοιχείο δεν ξεκινάει σε μια νέα γραμμή.
Ένα inline στοιχείο καταλαμβάνει μόνο τον απαραίτητο χώρο πλάτους.
Ορισμένα από τα πιο συνηθισμένα inline στοιχεία στην HTML περιλαμβάνουν:
<span><a><strong><em><img><input><label><br><small><sub><sup><code><cite>
Αυτά τα στοιχεία εμφανίζονται δίπλα ο ένας στον άλλον και καταλαμβάνουν μόνο τον απαραίτητο χώρο πλάτους. Μπορούν να ενσωματωθούν εντός block-level στοιχείων για να παράγουν το επιθυμητό διάταξης και στυλ. Ωστόσο, η εμφάνιση αυτών των στοιχείων μπορεί να τροποποιηθεί με τη χρήση CSS.
Το στοιχείο <div> χρησιμοποιείται συχνά ως ένας δοχείο για άλλα στοιχεία HTML.
Το στοιχείο <div> δεν έχει απαιτούμενα χαρακτηριστικά, αλλά είναι συνηθισμένη η χρήση των χαρακτηριστικών style, class και id.
Όταν χρησιμοποιείται σε συνδυασμό με CSS, το στοιχείο <div> μπορεί να χρησιμοποιηθεί για να στυλοποιήσει τμήματα περιεχομένου.
Παράδειγμα:
<div style="background-color: #f2f2f2; padding: 10px;"> <h2>Κεντρικός τίτλος</h2> <p>Αυτή είναι μια περιγραφή του περιεχομένου που βρίσκεται μέσα στο δοχείο div.</p> </div>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε το στοιχείο <div> για να δημιουργήσουμε ένα δοχείο με στυλοποίηση. Το στοιχείο <div> έχει το χαρακτηριστικό style που ορίζει το χρώμα φόντου και το περιθώριο. Μέσα στο <div>, έχουμε άλλα στοιχεία HTML, όπως ένας τίτλος <h2> και ένα παράγραφο <p>. Το <div> λειτουργεί ως ένας δοχείο που συγκεντρώνει και ομαδοποιεί το περιεχόμενο.
Το στοιχείο <span> είναι ένα ενσωματωμένο (inline) δοχείο που χρησιμοποιείται για να επισημάνει ένα μέρος ενός κειμένου ή ενός εγγράφου.
Το στοιχείο <span> δεν έχει απαραίτητα χαρακτηριστικά, αλλά είναι συνηθισμένη η χρήση των χαρακτηριστικών style, class και id.
Όταν χρησιμοποιείται σε συνδυασμό με CSS, το στοιχείο <span> μπορεί να χρησιμοποιηθεί για να στυλοποιήσει μέρη του κειμένου.
Παράδειγμα:
<p>Αυτό είναι ένα παράδειγμα κειμένου με <span style="color: red;">ένα επισημασμένο μέρος</span>.</p>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε το στοιχείο <span> για να επισημάνουμε ένα μέρος του κειμένου. Το <span> έχει το χαρακτηριστικό style που ορίζει το χρώμα κειμένου σε κόκκινο. Μπορούμε να χρησιμοποιήσουμε το <span> για να εφαρμόσουμε στυλ σε μέρη του κειμένου μέσω CSS.