Μορφοποίηση κειμένου HTML Το HTML περιέχει αρκετά στοιχεία για τον καθορισμό κειμένου με ειδική σημασία και μορφοποίηση.
Ορισμένα από τα στοιχεία μορφοποίησης κειμένου περιλαμβάνουν:
- <b> και <strong> για έντονη γραφή
- <i> και <em> για πλάγια γραφή
- <u> για υπογράμμιση
- <s> και <del> για διαγραφή κειμένου
- <ins> για εισαγωγή κειμένου
Μπορείτε να χρησιμοποιήσετε αυτά τα στοιχεία για να δώσετε στο κείμενό σας την κατάλληλη σημασία και μορφοποίηση, καθώς και να τονίσετε σημαντικά σημεία του. Μπορείτε να συνδυάσετε αυτά τα στοιχεία με τις παραπάνω ιδιότητες CSS, όπως το χρώμα, το μέγεθος, η γραμματοσειρά και άλλα.
Στοιχεία μορφοποίησης HTML Τα στοιχεία μορφοποίησης σχεδιάστηκαν για να εμφανίζουν ειδικούς τύπους κειμένου:
- <b> – Έντονο κείμενο
- <strong> – Σημαντικό κείμενο
- <i> – Πλάγιο κείμενο
- <em> – Εμφανιστικό κείμενο
- <mark> – Επισημασμένο κείμενο
- <small> – Μικρότερο κείμενο
- <del> – Διαγραμμένο κείμενο
- <ins> – Εισαγόμενο κείμενο
- <sub> – Δείκτης κάτω
- <sup> – Δείκτης πάνω
Μπορείτε να χρησιμοποιήσετε αυτά τα στοιχεία για να δώσετε στο κείμενό σας τη σημασία που χρειάζεται και να τονίσετε σημαντικά σημεία του. Μπορείτε να συνδυάσετε αυτά τα στοιχεία με τις παραπάνω ιδιότητες CSS, όπως το χρώμα, το μέγεθος, η γραμματοσειρά και άλλα.
[adinserter block=”2″]
Τα στοιχεία HTML <b> και <strong>
Το στοιχείο HTML <b> καθορίζει έντονο κείμενο, χωρίς κάποια επιπλέον σημασία.
Από την άλλη, το στοιχείο HTML <strong> καθορίζει έντονο κείμενο με έμφαση στη σημασία του.
Τα δύο αυτά στοιχεία είναι συνήθως εμφανιστικά ίδια, αλλά η χρήση του καθενός εξαρτάται από το περιεχόμενο που θέλετε να δείξετε.
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<p><b>Αυτό είναι έντονο κείμενο.</b></p>
<p><strong>Αυτό είναι έντονο κείμενο με έμφαση στη σημασία του.</strong></p>
</body>
</html>
Στο παραπάνω παράδειγμα, έχουμε ένα παράδειγμα κειμένου χρησιμοποιώντας το στοιχείο <b> για έντονη γραμματοσειρά και το στοιχείο <strong> για έντονη γραμματοσειρά με έμφαση στη σημασία του.
Τα στοιχεία HTML <i> και <em>
Το στοιχείο HTML <i> καθορίζει ένα τμήμα κειμένου με εναλλακτική φωνή ή διάθεση. Το περιεχόμενο μέσα στο στοιχείο συνήθως εμφανίζεται σε πλάγια γραμματοσειρά.
Συνήθως, το στοιχείο <i> χρησιμοποιείται για να υποδείξει έναν τεχνικό όρο, μια φράση από άλλη γλώσσα, μια σκέψη, ένα όνομα πλοίου κλπ.
Από την άλλη, το στοιχείο HTML <em> καθορίζει ένα τμήμα κειμένου με έμφαση στη σημασία του. Το περιεχόμενο μέσα στο στοιχείο συνήθως εμφανίζεται σε πλάγια γραμματοσειρά και υποδηλώνει ένα σημαντικό κομμάτι του κειμένου.
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<p><i>Αυτή η φράση είναι γραμμένη σε πλάγια γραμματοσειρά.</i></p>
<p><em>Αυτή η φράση έχει έμφαση στη σημασία της.</em></p>
</body>
</html>
Στο παραπάνω παράδειγμα, έχουμε ένα παράδειγμα κειμένου χρησιμοποιώντας το στοιχείο <i> για πλάγια γραμματοσειρά και το στοιχείο <em> για έντονη γραμματοσειρά με έμφαση στη σημασία της φράσης.
Το στοιχείο HTML <small>
Το στοιχείο HTML <small> καθορίζει μικρότερο κείμενο:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<p>Αυτή η πρόταση περιέχει μια <small>μικρότερη</small> λέξη.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, έχουμε μια πρόταση που περιέχει μια μικρότερη λέξη χρησιμοποιώντας το στοιχείο <small>.
Το στοιχείο HTML <mark>
Το στοιχείο HTML <mark> καθορίζει κείμενο που πρέπει να επισημανθεί ή να τονιστεί:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<p>Αυτή η πρόταση περιέχει μια σημαντική <mark>λέξη</mark>.</p>
</body>
</html>
[adinserter block=”3″]
Στο παραπάνω παράδειγμα, έχουμε μια πρόταση που περιέχει μια σημαντική λέξη χρησιμοποιώντας το στοιχείο <mark>.
Το στοιχείο HTML <del>
Το στοιχείο HTML <del> καθορίζει κείμενο που έχει διαγραφεί από ένα έγγραφο. Οι περιηγητές συνήθως θα περάσουν μια γραμμή μέσα από το διαγεγραμμένο κείμενο:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<p>Αυτή η πρόταση περιλαμβάνει μια <del>διαγεγραμμένη</del> λέξη.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, έχουμε μια πρόταση που περιέχει μια διαγεγραμμένη λέξη χρησιμοποιώντας το στοιχείο <del>.
Το στοιχείο HTML <ins>
Το στοιχείο HTML <ins> καθορίζει ένα κείμενο που έχει εισαχθεί σε ένα έγγραφο. Οι περιηγητές συνήθως θα υπογραμμίζουν το εισαχθέν κείμενο:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<p>Αυτή η πρόταση περιλαμβάνει μια με <ins>υπογράμμιση</ins> λέξη.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, έχουμε μια πρόταση που περιέχει μια εισαχθείσα λέξη χρησιμοποιώντας το στοιχείο <ins>.
Το στοιχείο HTML <sub>
Το στοιχείο HTML <sub> καθορίζει υποσημείωση κειμένου. Η υποσημείωση κειμένου εμφανίζεται στο μισό χαρακτήρα κάτω από την κανονική γραμμή και μερικές φορές απεικονίζεται σε μικρότερη γραμματοσειρά. Η υποσημείωση κειμένου μπορεί να χρησιμοποιηθεί για χημικές φόρμουλες, όπως το H2O:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<p>Η χημική δομή του νερού είναι H<sub>2</sub>O.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, η χημική φόρμουλα για το νερό είναι H2O και ο αριθμός 2 είναι υπογραμμισμένος χρησιμοποιώντας το στοιχείο <sub>.
Το στοιχείο HTML <sup>
Το στοιχείο HTML <sup> καθορίζει υπερσημείωση κειμένου. Η υπερσημείωση κειμένου εμφανίζεται στο μισό χαρακτήρα πάνω από την κανονική γραμμή και μερικές φορές απεικονίζεται σε μικρότερη γραμματοσειρά. Η υπερσημείωση κειμένου μπορεί να χρησιμοποιηθεί για υποσημειώσεις, όπως το WWW[1]:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<p>Η πρώτη ιστοσελίδα στον κόσμο ήταν το <sup>1</sup>WWW.</p>
</body>
</html>
[adinserter block=”4″]
Στο παραπάνω παράδειγμα, η πρώτη ιστοσελίδα στον κόσμο ήταν το WWW και ο αριθμός 1 είναι υπεργραμμένος χρησιμοποιώντας το στοιχείο <sup>.
Μπορούμε να δώσουμε τα στοιχεία μορφοποίησης κειμένου HTML σε μορφή πίνακα ως εξής:
| Ετικέτα | Περιγραφή |
|---|---|
<b> | Καθορίζει έντονο κείμενο |
<em> | Καθορίζει έντονα ένα τμήμα κειμένου |
<i> | Καθορίζει ένα τμήμα κειμένου με διαφορετική φωνή ή διάθεση |
<small> | Καθορίζει μικρότερο κείμενο |
<strong> | Καθορίζει σημαντικό κείμενο |
<sub> | Καθορίζει υπογραμμισμένο κείμενο |
<sup> | Καθορίζει υπεργραμμένο κείμενο |
<ins> | Καθορίζει εισαγμένο κείμενο |
<del> | Καθορίζει διαγεγραμμένο κείμενο |
<mark> | Καθορίζει κείμενο που έχει επισημανθεί ή επισημανθεί |