Μορφοποίηση κειμένου στην html

Σε προγηούμενο άρθρο παρουσιάσαμε την ιδιότητα style της γλώσσας HTML η οποία χρησιμοποιείται για τη μορφοποίηση στην html.

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

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

Τα στοιχεία μορφοποίησης κειμένου είναι σχεδιασμένα ώστε να παρουσιάζουν κάποιους ιδιαίτερους τύπους κειμένου:

Η ετικέτα <b> χρησιμοποιείται όταν θέλουμε να παρουσιάσουμε έντονα γράμματα.
Η ετικέτα <strong> χρησιμοποιείται όταν χρειάζεται να παρουσιάσουμε σημαντικό κείμενο.
Η ετικέτα <i> χρησιμοποιείται όταν απαιτείται να παρουσιάσουμε πλάγια γράμματα.
Η ετικέτα <em> χρησιμοποιείται όταν θέλουμε να δώσουμε έμφαση στο συγκεκριμένο κείμενο.
Η ετικέτα <mark> χρησιμοποιείται όταν χρειάζεται να παρουσιάσουμε κείμενο στο οποίο έχει γίνει επισήμανση.
Η ετικέτα <small> χρησιμοποιείται όταν επιδιώκουμε να παρουσιάσουμε μικρά γράμματα.
Η ετικέτα <del> χρησιμοποιείται όταν πρέπει να παρουσιάσουμε κείμενο στο οποίο έχει γίνει διαγραφή.
Η ετικέτα <ins> χρησιμοποιείται όταν χρειάζεται να παρουσιάσουμε κείμενο στο οποίο έχει γίνει εισαγωγή.
Η ετικέτα <sub> χρησιμοποιείται όταν θέλουμε να παρουσιάσουμε κείμενο σε θέση δείκτη.
Η ετικέτα <sup> χρησιμοποιείται όταν πρέπει να παρουσιάσουμε κείμενο σε θέση εκθέτη.

Χρήση της html ετικέτας <b>

Στο παράδειγμα που ακολουθεί βλέπουμε τη χρήση της ετικέτας <b>


<!DOCTYPE html>
<html>
<body>

<p>Εδώ βλέπουμε κανονικό κείμενο.</p>

<p><b>Εδώ βλέπουμε έντονο κείμενο.</b></p>

</body>
</html>


Χρήση της html ετικέτας <strong>

Στο παράδειγμα που δείχνουμε πως να χρησιμοποιήσετε την html ετικέτα <strong>


<!DOCTYPE html>
<html>
<body>

<p>Εδώ βλέπουμε κανονικό κείμενο.</p>

<p><strong>Εδώ βλέπουμε σημαντικό κείμενο.</strong></p>

</body>
</html>


Χρήση της html ετικέτας <i>

Παρουσιάζουμε παράδειγμα χρησιμοποίησης της html ετικέτας <i>


<!DOCTYPE html>
<html>
<body>

<p>Εδώ βλέπουμε κανονικό κείμενο.</p>

<p><i>Εδώ βλέπουμε κείμενο με πλάγια γράμματα.</i></p>

</body>
</html>


Χρήση της html ετικέτας <em>

Εδώ έχουμε ένα παράδειγμα που επεικονίζει τη χρήση της html ετικέτας <em>


<!DOCTYPE html>
<html>
<body>

<p>Εδώ βλέπουμε κανονικό κείμενο.</p>

<p><em>Εδώ βλέπουμε κείμενο στο οποίο έχουμε δώσει έμφαση στα γράμματα.</em></p>

</body>
</html>


Χρήση της html ετικέτας <small>

Με το ακόλουθο παράδειγμα μπορείτε να κατανοήσετε την html ετικέτα <small>


<!DOCTYPE html>
<html>
<body>

<h2>HTML <small>Μικρά</small> γράμματα</h2>

</body>
</html>


Χρήση της html ετικέτας <mark>

Στο ακόλουθο παράδειγμα δείχνουμε πως χρησιμοποιείται η html ετικέτα <mark>


<!DOCTYPE html>
<html>
<body>

<h2>Κείμενο HTML με <mark>επισήμανση</mark></h2>

</body>
</html>


Χρήση της html ετικέτας <del>

Στο παρακάτω παράδειγμα παρουσιάζουμε τον τρόπο με τον οποίο χρησιμοποιείται η html ετικέτα <del>


<!DOCTYPE html>
<html>
<body>

<p>Το στοιχείο del παρουσιάζει το κείμενο σαν να έχει γίνει διαγραφή σε αυτό.</p>

<p>Το αγαπημένο μου χρώμα είναι το <del>μπλε</del> κόκκινο.</p>

</body>
</html>


Χρήση της html ετικέτας <ins>

Στο επόμενο παράδειγμα δείχνουμε την εφαρμογή της html ετικέτας <ins>


<!DOCTYPE html>
<html>
<body>

<p>Το στοιχείο ins παρουσιάζει το κείμενο σαν να έχει γίνει εισαγωγή.</p>

<p>Το αγαπημένο μου <ins>χρώμα</ins> είναι το είναι το κόκκινο.</p>

</body>
</html>


Χρήση της html ετικέτας <sub>

Στο παράδειγμα μπορείτε να δειτε την εφαρμογή της html ετικέτας <sub>


<!DOCTYPE html>
<html>
<body>

<p>Εδώ βλέπουμε κείμενο σε θέση <sub>δείκτη</sub>.</p>

</body>
</html>


Χρήση της html ετικέτας <sup>

Ακολουθεί παράδειγμα στο οποίο θα κατανοήσετε την html ετικέτα <sup>


<!DOCTYPE html>
<html>
<body>

<p>Εδώ βλέπουμε κείμενο σε θέση <sup>εκθέτη</sup>.</p>

</body>
</html>