Βασικά στοιχεία της HTML > Στοιχεία Επιπέδου "Block" και "Inline": Μια γενική προσέγγιση

Στοιχείο επιπέδου Block, Το στοιχείο <div>, Στοιχείο επιπέδου Inline, Το στοιχείο <span>,

Κάθε στοιχείο HTML έχει έναν εξ ορισμού τρόπο εμφάνισης ανάλογα με τον τύπο του στοιχείου. Στην HTML διακρίνουμε κυρίως δύο ειδών στοιχεία, τα στοιχεία επιπέδου Block (Block-level elements) και τα στοιχεία επιπέδου Inline (Inline-level elements) με τον αντίστοιχο εξ ορισμού τρόπο εμφάνισης.

Στοιχείο επιπέδου Block (Block-level elements)
Τα στοιχεία επιπέδου block πάντα ξεκινάνε σε νέα γραμμή και επεκτείνονται προς τα δεξιά όσο και προς τα αριστερά καταλαμβάνοντας όλο το διαθέσιμο πλάτος.

Παρακάτω παραθέτουμε μια λίστα, αλφαβητικά, με τα στοιχεία επιπέδου block στην HTML:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<output>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>




 

To στοιχείο <div>
Το στοιχείο <div> καθορίζει μια περιοχή και συχνά χρησιμοποιείται για να περιέχει άλλα στοιχεία HTML.
Το στοιχείο <div> δεν έχει απαιτούμενα ορίσματα. Τα πιο συνηθισμένα ορίσματα είναι το style, το class και το id.
Με την χρήση CSS μπορεί εύκολα να διαμορφωθεί το στύλ του περιεχομένου του block που καθόρισε το div.
Για παράδειγμα:

<div style="background-color:blue;font-style:italic;color:white;padding:20px">
<h2>
Αθήνα</h2>
<p> Η Αθήνα είναι η πρωτεύουσα της Ελλάδας από το 1834 και η μεγαλύτερη πόλη της. Βρίσκεται στην Αττική, στην ανατολική Στερεά Ελλάδα, και είναι από τις αρχαιότερες πόλεις του κόσμου, με την καταγεγραμμένη ιστορία της να φθάνει ως το 3.200 π.Χ. Η Αρχαία Αθήνα, αρχικά οικισμός πάνω στην Ακρόπολη, εξελίχθηκε τον 6ο αιώνα π.Χ. σε μία πανίσχυρη πόλη-κράτος, που αναπτύχθηκε παράλληλα με το λιμάνι της, το οποίο αρχικά ήταν το Φάληρο και αργότερα ο Πειραιάς. </p>
<p>
Υπήρξε, κατά την κλασική εποχή, κέντρο των τεχνών, της γνώσης και της φιλοσοφίας, έδρα της Ακαδημίας του Πλάτωνα και του Λυκείου του Αριστοτέλη. Αναφέρεται ευρέως ως γενέτειρα της δημοκρατίας. Συχνά, η Αθήνα, όπως και γενικότερα η Ελλάδα, χαρακτηρίζεται «λίκνο του δυτικού πολιτισμού», ενώ άλλες φορές, ο τίτλος αυτός αποδίδεται στην Μεσοποταμία. Η σύγχρονη Αθήνα είναι το κέντρο της οικονομικής, βιομηχανικής, πολιτικής και πολιτιστικής ζωής της Ελλάδας.  </
p>
</div>

και αποτέλεσμα:

Αθήνα

Η Αθήνα είναι η πρωτεύουσα της Ελλάδας από το 1834 και η μεγαλύτερη πόλη της. Βρίσκεται στην Αττική, στην ανατολική Στερεά Ελλάδα, και είναι από τις αρχαιότερες πόλεις του κόσμου, με την καταγεγραμμένη ιστορία της να φθάνει ως το 3.200 π.Χ. Η Αρχαία Αθήνα, αρχικά οικισμός πάνω στην Ακρόπολη, εξελίχθηκε τον 6ο αιώνα π.Χ. σε μία πανίσχυρη πόλη-κράτος, που αναπτύχθηκε παράλληλα με το λιμάνι της, το οποίο αρχικά ήταν το Φάληρο και αργότερα ο Πειραιάς.

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

Στοιχείο επιπέδου Inline (Inline-level elements)
Τα στοιχεία επιπέδου inline δεν ξεκινάνε σε νέα γραμμή και επεκτείνονται μόνο σε όσο χώρο χρειάζονται.

Παρακάτω παραθέτουμε μια λίστα, αλφαβητικά, με τα στοιχεία επιπέδου block στην HTML:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

 



 

To στοιχείο <span>
Το στοιχείο <span> καθορίζει μια περιοχή μέσα στο κείμενο και συχνά χρησιμοποιείται για να περιέχει κείμενο.
Το στοιχείο <span> δεν έχει απαιτούμενα ορίσματα. Τα πιο συνηθισμένα ορίσματα είναι το style, το class και το id.
Με την χρήση CSS μπορεί εύκολα να διαμορφωθεί το στύλ του κομματιού του κειμένου που καθόρισε το span.
Για παράδειγμα:

 
<h2> Ελλάδα μία χώρα με <span style="color:blue;background-color:cyan"> γαλάζιες θάλασσες.</span></h2>

και αποτέλεσμα:

Ελλάδα μία χώρα με γαλάζιες θάλασσες.


Προηγούμενη ενότητα