Η HTML διαθέτει πάρα πολλά είδη ετικετών κάθε ένα για ένα διαφορετικό εύρος χρήσεων. Ένα από αυτά τα είδη είναι η μορφοποίηση κειμένου ή ετικέτες κειμένου.
Το κείμενο μπορεί να περιλαμβάνεται σε πολλές από τις ετικέτες που διαθέτει η HTML χωρίς να χρειάζεται να «μαρκάρουμε» με κάποιον τρόπο ότι το συγκεκριμένο σημείο κώδικα περιλαμβάνει μόνο κείμενο. Ωστόσο υπάρχουν κάποιες ετικέτες με τις οποίες μπορούμε να ορίσουμε αν πρόκειται για παράγραφο κειμένου, για τίτλο, καθώς επίσης και για μορφοποιήσεις όπως υπογράμμιση, έντονα, πλάγια γράμματα κτλ.
Οι παραπάνω ετικέτες διαχωρίζονται σε ετικέτες block και ετικέτες inline. Οι block ετικέτες μορφοποιούν το κείμενο σε ολόκληρο container αλλάζοντας έτσι περιοχή ή γραμμή στην οποία βρισκόμαστε. Οι inline ετικέτες μορφοποιούν το κείμενο χωρίς να αλλάζουν περιοχή (ή γραμμή) από αυτή που ήδη βρισκόμαστε.
Σε αυτό το κομμάτι του οδηγού θα δούμε όλες εκείνες τις ετικέτες που αφορούν άμεσα την σήμανση ή μορφοποίηση κειμένου. Ο παρακάτω πίνακας περιέχει τις πιο απλές σε εφαρμογή ετικέτες που αφορούν την μορφοποίηση κειμένου.
| Ετικέτα | Ονομασία | Μετάφραση |
|---|---|---|
| <b> | Bold | Έντονα |
| <strong> | Strong | |
| <em> | Emphasis | Έμφαση |
| <i> | Italics | Πλάγια |
| <s> | Strike | Διαγράμμιση |
| <del> | Deleted | |
| <ins> | Inserted | Εισήχθηκε |
| <small> | Small | Μικρά |
| <cite> | Citation | Αναφορά |
| <q> | Quotations | Απόσπασμα |
| <abbr> | Abbreviation | Ακρωνύμιο |
| <dfn> | Definition | Ορισμός |
| <data> | Data | Δεδομένα |
| <code> | Code | Κώδικας |
| <var> | Variable | Μεταβλητή |
| <samp> | Sample | Έξοδος μηχανής |
| <kbd> | Keyboard Input | Είσοδος από πληκτρολόγιο |
| <sup> | Superscript | Εκθέτης |
| <sub> | Subscript | Δείκτης |
| <u> | Underline | Υπογράμμιση |
| <mark> | Mark | Επισήμανση |
| <span> | - | Περιοχή |
| <br> | Brake Line | Αλλαγή γραμμής |
| <wbr> | Brake Line Opportunity | Ευκαιριακή αλλαγή γραμμής |
b,strong – Έντονα
Η διαφορά του <b> και του <strong> είναι ότι το <b> απλά μορφοποιεί το κείμενο σε έντονη γραμματοσειρά χωρίς να δίνει κάποια ξεχωριστή σημασία στο κείμενο που πλαισιώνει, σε αντίθεση με το <strong> που ενώ κάνει το ίδιο πράγμα ακριβώς από πλευράς μορφοποίησης, η ετικέτα <strong> σημαίνει πως μέσα της συμπεριλαμβάνεται κάτι σημαντικό, σοβαρό ή κάτι που πραγματικά έχει νόημα. από άλλα σημεία του κειμένου.
Αρχείο: b-strong.html
<p><b>Έντονα</b> χωρίς κάποια σημασία,</p>
<p><strong>έντονα με κάποια σημασία</strong></p>Αποτέλεσμα:
em – Έμφαση
Η ετικέτα <em> αναπαριστά μια έμφαση αβεβαιότητας για το κείμενο που εμπεριέχει. Αν για παράδειγμα στην φράση «Οι γάτες είναι χαριτωμένα ζώα», πλαισιώσουμε με <em> την λέξη «γάτες», τότε αυτό θα σημαίνει ότι το είδος των ζώων που η φράση εννοεί είναι αβέβαιη καθώς θα μπορούσε να μιλάει πχ για σκύλους ή για κότες. Αν στην ίδια φράση πλαισιώσουμε μόνο την λέξη «είναι» σε <em> , τότε αυτό σημαίνει ότι οι γάτες μπορεί να «είναι χαριτωμένες» αλλά μπορεί και να «μην είναι».Εμφανισιακά η ετικέτα αυτή κάνει το κείμενο που πλαισιώνει σε πλάγια γραμματοσειρά.
Αρχείο: em.html
<p>Οι <em>γάτες</em> είναι χαριτωμένα ζώα</p>
<p>Οι γάτες <em>είναι</em> χαριτωμένα ζώα</p>Αποτέλεσμα:
i – Πλάγια
Η ετικέτα <i> αναπαριστά ένα κομμάτι κειμένου με εναλλακτική «φωνή» ή διάθεση, συνήθως με το <i> μαρκάρουμε τεχνικούς όρους, φράσεις από άλλες γλώσσες, μια σκέψη, ή ένα όνομα πλοίου (στα δυτικά κείμενα). Όροι διαφορετικοί από την γλώσσα του υπόλοιπου κειμένου θα πρέπει να τονίζονται με το lang χαρακτηριστικό (attribute) με τον αντίστοιχο κωδικό γλώσσας.
Αρχείο: i.html
<p>Ο Raymond προσπάθησε να κοιμηθεί.</p>
<p><i>ΤΟ πλοίο σάλπαρε την Πέμπτη</i>, ονειρεύτηκε. <i>Το πλοίο είχε πολλούς επιβάτες, συμπεριλαμβανομένου και της πριγκίπισσας ονόματι Carey. Την παρακολουθούσε, μέρα και νύχτα, ελπίζοντας πως θα τον προσέξει, αλλά ποτέ δεν το έκανε.</i></p>
<p><i>Μια νύχτα πήρε το θάρρος να της μιλήσει-</i></p>
<p>Ο Raymond ξύπνησε με την έναρξη του συναγερμού πυρασφάλειας.</p>
Αποτέλεσμα:
del,s & ins – Διαγράμμιση και Προσθήκη
Η ετικέτα <del> αναπαριστά την παρουσία κειμένου το οποίο έχει αφαιρεθεί από κάποιο περιεχόμενο. Η συγκεκριμένη ετικέτα μπορεί να διαθέτει χαρακτηριστικό (attribute) με όνομα datetime όπου αναπαριστά την ημερομηνία που αυτή η διαγραφή συνέβη.Η μορφοποίηση της εν λόγω ετικέτας είναι με διαγράμμιση έτσι ώστε να γίνει αισθητό πως το συγκεκριμένο κείμενο έχει διαγραφεί.
Η ετικέτα <s> αναπαριστά περιεχόμενο το οποίο πλέον δεν είναι έγκυρο ή μη σχετικό με το υπόλοιπο.Η μορφοποίηση που τηρείται στο περιεχόμενο του είναι με διαγράμμιση. Την ίδια σημασία χρήσης είχε σε παλαιότερες εκδόσεις της HTML η ετικέτα <strike> η οποία από την HTML 5 και ύστερα αφαιρέθηκε και αντικαταστάθηκε από την <s>.
Η ετικέτα <ins> αναπαριστά την προσθήκη νέου περιεχομένου σε ένα κείμενο. Παρόμοια με την <del> διαθέτει χαρακτηριστικό (attribute) datetime, που σημαίνει την ακριβή ημερομηνία που η προσθήκη συνέβη. Η μορφοποίηση της συγκεκριμένης ετικέτας γίνεται με υπογράμμισή, έτσι ώστε να γίνει αντιληπτό το τι νέο προστέθηκε.
Αρχείο: del-s-ins.html
<p>Αγορά παγωμένου Τσάι!<p>
<p>Από <s>2€</s> τώρα μόνο <strong>1€</strong></p>
<p><del datetime="2017-10-02T01:25-07:00">Η προσφορά ισχύει μέχρι τις 01/10/2017.</del></p>
<p><ins datetime="2017-10-02T01:25-07:00">Η προσφορά έληξε.<ins></p>Αποτέλεσμα:
small – Υποσημείωση
Η ετικέτα <small> αναπαριστά παρατηρήσεις ή συνήθως αναφορές σε συγγραφείς, αυτή ετικέτα μορφοποιεί το περιεχόμενο της σε μικρότερη κλίμακα μεγέθους όσο αφορά την γραμματοσειρά. Η συγκεκριμένη ετικέτα δεν θα πρέπει να χρησιμοποιηθεί για μεγάλο όγκο κειμένου όπως ολόκληρες παραγράφους, αλλά μόνο φράσεις ή και σε μερικές περιπτώσεις δυο-τρεις λέξεις.
Αρχείο: small.html
<p>Μονόκλινο δωμάτιο</p>
<p>199 € <small>συμπεριλαμβάνεται πρωινό, χωρίς ΦΠΑ.</small></p>Αποτέλεσμα:
cite – Αναφορά
Η ετικέτα <cite> αναπαριστά περιεχόμενο δημιουργημένο από κάποιον άλλο. Θα πρέπει να περιλαμβάνει το τίτλο του έργου – περιεχομένου ή το όνομα αυτού που το δημιούργησε, ή έναν σύνδεσμο.Από πλευράς μορφοποίησης η συγκεκριμένη ετικέτα μορφοποιεί το περιεχόμενο της σε πλάγια γράμματα.
Αρχείο: cite.html
<p>Μαθαίνω κώδικα html. Μετά τί; Θα επιδιορθώνω καζανάκια;</p>
<p><cite>— Πούκα η γλυκούλα (@Pucca_naki) <a href="https://twitter.com/Pucca_naki/status/303376517692530688">18 Feb 2013</a></cite></p>Αποτέλεσμα:
q – Απόσπασμα
Η ετικέτα <q> αναπαριστά κάποια φράση ή κάποιο απόσπασμα από άλλη πηγή. Η ετικέτα αυτή πλαισιώνει αυτόματα το περιεχόμενο της μέσα σε εισαγωγικά, επομένως δεν χρειάζεται να συμπεριλάβουμε δικά μας ξεχωριστά εισαγωγικά. Διαθέτει ωστόσο ένα χαρακτηριστικό (attribute) με όνομα cite όπου μπορούμε να συμπεριλάβουμε ένα url μέσα από το οποίο προήλθε η συγκεκριμένη φράση ή το απόσπασμα. Η συγκεκριμένη ετικέτα δεν πρέπει να χρησιμοποιηθεί σε σημείο οπού το νόημα της δεν αφορά εισαγωγικά, για παράδειγμα δεν είναι σωστό να χρησιμοποιηθεί για να μαρκάρουμε σαρκαστικές δηλώσεις. Δεν είναι υποχρεωτικό να χρησιμοποιηθεί η συγκεκριμένη ετικέτα για εισαγωγικά καθώς επίσης το ίδιο αποτέλεσμα προσφέρει και η χρήση αυτού κάθε αυτού εισαγωγικών στα σημεία που εμείς επιθυμούμε.
Αρχείο: q.html
<p>Η γυναίκα είπε <q>αυτό είναι αδύνατο, δεν μπορώ να το υποστηρίξω</q>. Διαφώνησα μαζί της.</p>Αποτέλεσμα:
abbr – Ακρωνύμιο
Η ετικέτα <abbr> αναπαριστά κάποια συντομογραφία ή ακρωνύμιο προαιρετικά με την επεξήγηση του. Το χαρακτηριστικό (attribute) title αναλαμβάνει να προβάλει την επεξήγηση του ακρωνύμιου/συντομογραφίας στον χρήστη τοποθετώντας τον κέρσορα πάνω από την αντίστοιχη λέξη.
Αρχείο: abbr.html
<p>Η <abbr title="HyperText Markup Language">HTML</abbr> είναι μια γλώσσα σήμανσης.</p>Αποτέλεσμα:
dfn – ορισμός
Η ετικέτα <dfn> αναπαριστά τον ορισμό μίας ορολογίας. Ο κοντινότερος πρόγονος της συγκεκριμένης ετικέτας θα πρέπει επίσης να διαθέτει τον ορισμό και την επεξήγηση του αντίστοιχου όρου που βρίσκεται μέσα στο <dfn>. Το <dfn> μπορεί να διαθέτει ένα attribute με όνομα title, όπου μπορούμε να συμπεριλάβουμε μια σύντομη επεξήγηση του όρου. Αν η ετικέτα <dfn> δεν έχει title αλλά διαθέτει μέσα της μια ετικέτα <abbr> η οποία διαθέτει title τότε το περιεχόμενο αυτής θα γίνει το title της <dfn>.Επίσης η <dfn> μπορεί να συνδεθεί μέσω του attribute id από κάποιο a μέσα στην ίδια σελίδα. Η μορφοποίηση του περιεχομένου της ετικέτας είναι με πλάγια γραμματοσειρά.
Αρχείο: dfn.html
<p>Η <dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>
αποτελεί μια γλώσσα σήμανσης κειμένου για το διαδίκτυο.</p>
<!-- ... Αργότερα στην ίδια σελίδα: -->
<p>Για την κατασκευή μιας ιστοσελίδας μπορούμε να χρησιμοποιήσουμε <abbr title="HyperText Markup Language">HTML</abbr> καθώς επίσης κι άλλες γλώσσες και εργαλεία που μας παρέχονται για τέτοιου είδος ανάπτυξης.</p>Αποτέλεσμα:
data – Δεδομένα
Η ετικέτα <data> αποτελεί αναπαράσταση κάποιου περιεχομένου που βρίσκεται ήδη γραμμένο σε ανθρώπινη γλώσσα σε αντίστοιχη γλώσσα μηχανής. Για να επιτευχθεί αυτό η <data> διαθέτει ένα attribute, το value όπου μέσα σε αυτό συμπεριλαμβάνουμε το περιεχόμενο σε γλώσσα μηχανής που θέλουμε να αντιστοιχήσουμε στο αντίστοιχο περιεχόμενο της ετικέτας που βρίσκεται σε ανθρώπινη γλώσσα. Παρόμοια χρήση έχουν τα attributes <data-*> που μπορούν να χρησιμοποιηθούν σε οποιαδήποτε ετικέτα και θα επεξηγήσουμε σε αργότερη ενότητα. Στο παράδειγμα παρακάτω θα χρησιμοποιήσουμε την εν λόγω ετικέτα προκειμένου να αναπαραστήσουμε την λίστα από μερικά φαγώσιμα προϊόντα όπου στην οθόνη εμφανίζεται το όνομα του αλλά στην <data> ετικέτα υπάρχει ο κωδικός barcode του.
Αρχείο: data.html
<ul> <li><data value="5201946010022">Βίκος Νερό</data></li> <li><data value="5201005079779">Amita Motion</data></li> <li><data value="5201004042576">Cream Crackers Παπαδοπούλου</data></li> </ul>
Αποτέλεσμα:
code – Κώδικας
Η ετικέτα <code> αναπαριστά ένα κομμάτι από κώδικα υπολογιστή. Το περιεχόμενο της ετικέτας μπορεί να είναι σε οποιαδήποτε γλώσσα, δεν υπάρχει κάποιος συγκεκριμένος τρόπος με τον οποίο δηλώνονται οι γλώσσες ωστόσο για την διαφορετική μορφοποίηση γίνεται στήριξη σε δυναμικές μορφοποιήσεις μέσω της javascript ή της php. Ο πιο συνήθης τρόπος δήλωσης γλώσσας στο πλαίσιο κώδικα αυτό είναι μέσω της κλάσης της ετικέτας και χρησιμοποιώντας το πρόθεμα «language-» και την γλώσσα που επρόκειτο να χρησιμοποιήσουμε. Η Ετικέτα <code> πολλές φορές συνδυάζεται με την ετικέτα <pre> για πιο όμορφα αποτελέσματα εμφάνισης. Εδώ να σημειώσουμε πως μέσα στην <code> ή αντίστοιχα <pre> μαζί με την code αν θέλουμε να προβάλλουμε κώδικα HTML δεν θα πρέπει να χρησιμοποιήσουμε τους χαρακτήρες <> για άνοιγμα και κλείσιμο των ετικετών μας αλλά τους ειδικούς χαρακτήρες < και > διότι διαφορετικά ο περιηγητής θα καταλάβει πως πρόκειται για κανονική ετικέτα και θα προσπαθήσει να την εμφανίσει.
Αρχείο: code.html
<code><b> Αυτό ειναι ένα παράδειγμα κώδικα HTML σε CODE. </b></code>Αποτέλεσμα:
var – Μεταβλητή
Η συγκεκριμένη ετικέτα αναπαριστά μια μεταβλητή. Η μεταβλητή αυτή θα μπορούσε να είναι μια μαθηματική αναπαράσταση ή μια προγραμματιστική μεταβλητή, ένας δείκτης που αναπαριστά μια σταθερά, ένα σύμβολο για την ταυτοποίηση φυσικής ποσότητας, μια συνάρτηση, ή απλά ένας όρος πεζογραφίας.
Αρχείο: var.html
<p>Εαν υπάρχουν <var>w</var> σωληνώσεις που οδηγούν στο κατασκευαστήριο παγωτών τότε περιμένω πως <em>τουλάχιστον</em> <var>w</var> γεύσεις παγωτών θα υπάρχουν προς αγορά!</p>Αποτέλεσμα:
samp – Έξοδος μηχανής
Η ετικέτα <samp> (από το sample) αναπαριστά την έξοδο ενός προγράμματος. Μπορεί να χρησιμοποιηθεί σε συνδυασμό με την ετικέτα <kbd> η οποία σημαίνει αντίστοιχα είσοδος από το πληκτρολόγιο.
Αρχείο: samp.html
<samp>Το πρόγραμμα εκτελέστηκε επιτυχώς!</samp>Αποτέλεσμα:
kbd – Είσοδος από πληκτρολόγιο
Η ετικέτα <kbd> αναπαριστά είσοδο από τον χρήστη (συνήθως πληκτρολογίου, ωστόσο μπορεί να χρησιμοποιηθεί και για οποιοδήποτε άλλο τρόπο εισαγωγής όπως για παράδειγμα εντολές φωνής).
Όταν μια <kbd> ετικέτα βρίσκεται μέσα σε μια <samp> ετικέτα, τότε αναπαριστά την είσοδο όπως αυτή προβλήθηκε από το σύστημα.
Όταν μια <kbd> διαθέτει μια <samp> ετικέτα μέσα της, τότε αναπαριστά είσοδο βασιζόμενη στην έξοδο του συστήματος , για παράδειγμα η επιλογή ενός στοιχείο μενού.
Όταν μια <kbd> ετικέτα βρίσκεται μέσα σε μια άλλη <kbd> ετικέτα, τότε αναπαριστά ένα πλήκτρο ή κάποια άλλη μονάδα εισαγωγής κατάλληλη για τον αντίστοιχο μηχανισμό εισόδου, που το κείμενο εκείνη την στιγμή περιγράφει.
Στην παρακάτω περίπτωση. ο χρήστης διαλέγει ένα στοιχείο από το μενού. Η εξωτερική ετικέτα <kbd> δείχνει το μπλοκ της εισόδου, με τα αντίστοιχα εσωτερικά <kbd> στοιχεία τα οποία αναπαριστούν κάθε διαφορετικό βήμα για την είσοδο, και τα <samp> στοιχεία μέσα σε αυτά προσδίδουν ότι τα βήματα αυτά είναι βασισμένα σε κάτι το οποίο το σύστημα έχει εμφανίσει, σε αυτή την περίπτωση οι ονομασίες των μενού.
Αρχείο: kbd.html
<p>Για να εκτυπώσετε το παρόν έγγραφο, πατήστε <kbd><kbd>Ctrl</kbd>+<kbd>P</kbd></kbd></p>
<p>Τι θα θέλατε να κάνετε με το συγκεκριμένο έγγραφο; Επιλέξτε:
<kbd><kbd><samp>Αποθήκευση</samp></kbd>|<kbd><samp>Εκτύπωση...</samp></kbd></kbd>
</p>Αποτέλεσμα:
sub, sup – Δείκτης, Εκθέτης
Η ετικέτα <sub> αναπαριστά έναν δείκτη, και η ετικέτα <sup> αναπαριστά έναν εκθέτη. Οι ετικέτες αυτές θα πρέπει να χρησιμοποιούνται όπου η απουσία τους θα άλλαζε το νόημα του περιεχομένου και όχι αυθαίρετα σε οποιαδήποτε σημείο.
Σε ορισμένες γλώσσες οι εκθέτες είναι μέρος της τυπογραφία των ακρωνύμιων τους.
Ο δείκτης μπορεί να χρησιμοποιηθεί μέσα σε μια ετικέτα <var> για μεταβλητές οι οποίες έχουν δείκτες.
Επίσης μαθηματικές αναπαραστάσεις είναι λογικό να χρησιμοποιούν πολύ συχνά τόσο εκθέτες όσο και δείκτες. Οι συγγραφείς που σκοπεύουν να χρησιμοποιήσουν αυτές τις ετικέτες γι' αυτόν τον σκοπό θα ήταν καλύτερο να χρησιμοποιήσουν MathML για να μαρκάρουν μαθηματικές αναπαραστάσεις, αλλά για απλές αναπαραστάσεις όπου η μεγάλη λεπτομέρεια δεν είναι αναγκαία καλό θα ήταν να χρησιμοποιηθούν τα <sub>, <sup>.
Αρχείο: sub-sup.html
<p>Αυτό το κείμενο περιέχει <sub>δείκτη</sub> κειμένου.</p>
<p>Αυτό το κείμενο περιέχει <sup>εκθέτη</sup> κειμένου.</p>Αποτέλεσμα:
u – Υπογράμμιση
Η ετικέτα <u> αναπαριστά ένα μικρό κομμάτι κειμένου ο οποίο στιλιστικά θα εμφανίζεται διαφορετικό από το υπόλοιπο κείμενο σε περιπτώσεις όπως για παράδειγμα ορθογραφικά λάθη ή ουσιαστικά στα κινέζικα. Η προεπιλεγμένη εμφάνιση του περιεχομένου της ετικέτας <u> είναι κείμενο με υπογράμμιση, ωστόσο προτείνεται στους συγγραφείς να αποφεύγεται η χρήση του σε σημεία στα οποία κείμενο μπορεί να μπερδευτεί για υπερσυνδέσμους.
Αρχείο: u.html
<p>Το παρακάτω κείμενο είναι <u>υπογραμμισμένο</u>.</p>Αποτέλεσμα:
mark – Επισήμανση
Η ετικέτα <mark> αναπαριστά ένα σημείο κειμένου το οποίο μαρκάρεται με διαφορετικό χρώμα background έτσι ώστε να είναι ευδιάκριτο σε σύγκριση με το υπόλοιπο κείμενο.
Αρχείο: mark.html
<p>Το παρακάτω κείμενο είναι <mark>μαρκαρισμένο</mark>.</p>Αποτέλεσμα:
span
Η ετικέτα <span> δεν έχει καμία ιδιαίτερη σημασία από μόνη της, είναι μια inline ετικέτα που υπάρχει έτσι ώστε να μπορεί να χρησιμοποιηθεί ορίζοντας διαφορετικές κλάσεις CSS σε αυτήν μέσω του χαρακτηριστικού (attribute) class.
Αρχείο: span.html
<p>Η μητέρα μου έχει <span style="color:blue;font-weight:bold">μπλέ</span> μάτια και ο πατέρας μου <span style="color:darkolivegreen;font-weight:bold">Πράσινα</span>.</p>Αποτέλεσμα:
br – Αλλαγή γραμμής
Η ετικέτα τόσο σημασιολογικά όσο και εμφανισιακά αναπαριστά μια αλλαγή γραμμής στο κείμενο. Η χρήση της πρέπει να γίνεται μόνο σε περιπτώσεις όπου πρέπει να διαχωρίζεται περιεχόμενο όπως ποιήματα ή διευθύνσεις. Το <br> δεν θα πρέπει να χρησιμοποιείται για να διαχωρίζονται θεματικές ενότητες σε μια παράγραφο.
Αρχείο: br.html
<p>Η ετικέτα br λειτουργεί αλλάζοντας <br> γραμμή.</p>Αποτέλεσμα:
wbr – Ευκαιριακή αλλαγή γραμμής
Η ετικέτα <wbr> είναι μια ετικέτα όπου στο σημείο όπου έχει πλαισιωθεί μια λέξη είναι πιθανό να αλλάξει γραμμή το κείμενο όταν δεν χωράει στο πλάτος της οθόνης. Στο παρακάτω παράδειγμα τα αποτελέσματα μας δείχνουν, στην πρώτη εικόνα χωρίς την χρήση του <wbr> πως θα χωρίζονταν το κείμενο (σε ποιο σημείο δηλαδή θα γινόταν η αλλαγή της γραμμής), και που χωρίζεται με την χρήση του <wbr> στην δεύτερη εικόνα.
Αρχείο: wbr.html
<p>Γύρισε τον κοίταξε στα μάτια, και με ένα παγερό βλέμμα το είπε «φτου σκουληκο<wbr>μυρμηγκό<wbr>τρυπα».</p>Αποτέλεσμα:
