Μεμονωμένες λέξεις ή ολόκληρα αποσπάσματα μπορούν να επισημαίνονται πολύ εύκολα με πλάγια και έντονη γραφή. Ας ξεκινήσουμε με την επισήμανση σε έντονο. Γι' αυτόν τον λόγο διατίθενται βασικά δύο στοιχεία HTML, το b και το strong.
Καλώς ήρθατε στο <b>PSD-Tutorials.de</b>! <br /> Καλώς ήρθατε στο <strong>PSD-Tutorials.de</strong>!
Μια ματιά στο αποτέλεσμα στον περιηγητή μας δίνει την ακόλουθη εικόνα:
Εμφανώς, και τα δύο στοιχεία προσφέρουν την ίδια απεικόνιση. Γιατί όμως υπάρχουν δύο διαφορετικά στοιχεία; Πράγματι, για τις ιστοσελίδες υπάρχουν άλλες μορφές παρουσίασης εκτός από αυτές που γνωρίζουμε από τους καθιερωμένους περιηγητές. Σκεφτείτε, για παράδειγμα, αναγνώστες για τυφλούς ή φορητές συσκευές. Τα στοιχεία HTML που προσφέρονται από το W3C υποστηρίζουν τη σημασιολογία. Έτσι, το στοιχείο b τώρα δεν σημαίνει πλέον απλώς ότι κάτι θα εμφανίζεται έντονο. Αντιθέτως, το b σημαίνει ένα κείμενο που τονίζεται οπτικά, χωρίς να έχει αυξημένη σημασία. Για παράδειγμα, μπορεί να πρόκειται για ονόματα προϊόντων ή κλειδιά σε έγγραφα.
Το στοιχείο strong μέχρι στιγμής αντιπροσώπευε μια πιο έντονη τονισμό. Το em χρησιμοποιούνταν για τονίσμο σημαντικού κειμένου. Το στοιχείο strong προηγουμένως αποτελούσε την ενίσχυση του em σε παλαιότερες εκδόσεις HTML. Στο HTML5, και στα δύο στοιχεία δίνεται διαφορετική σημασία.
Ας ξεκινήσουμε με ένα κείμενο με κανονικό τονισμό.
<p> Οι γάτες είναι χαριτωμένα ζώα. </p>
Τώρα τονίζουμε ξανά το ίδιο κείμενο, αλλά αυτή τη φορά με έμφαση στην πρώτη λέξη.
<p> <em>Γάτες</em> είναι χαριτωμένα ζώα. </p>
Με τη χρήση του em, η έμφαση τοποθετείται στη λέξη Γάτες. Αυτό θα μπορούσε να είναι χρήσιμο σε μια συζήτηση σχετικά με το αν οι σκύλοι ή οι γάτες είναι πιο γλυκοί.
Τώρα μπορούμε να εφαρμόσουμε το στοιχείο em και στη λέξη είναι στο παράδειγμα αυτό.
<p> Οι γάτες <em>είναι</em> χαριτωμένα ζώα. </p>
Αυτό θα μπορούσε να είναι μια απάντηση σε μια συζήτηση κατά την οποία κάποιος υποστηρίζει ότι οι γάτες δεν είναι καθόλου γλυκές.
Στο τέλος, τα αποσπάσματα που είναι επισημασμένα με em εμφανίζονται στον περιηγητή ως πλάγια. Ο ίδιος οπτικός αποτέλεσμα επιτυγχάνεται και με το στοιχείο i.
Σύμφωνα με το προσχέδιο εργασίας HTML5, το στοιχείο i πλέον δεν συμβολίζει πλάγια.
<p> Καλώς να ήλθατε στο <i>PSD-Tutorials.de</i> </p>
Αντίθετα, αυτό το στοιχείο δηλώνει ότι θέλετε να μεταφέρετε μια διαφορετική διάθεση. Το στοιχείο i είναι ενδιαφέρον, για παράδειγμα, για τη σήμανση τεχνικών όρων ή ταξινομικών ονομασιών.
Όλα αυτά είναι αφελώς θεωρητικά, το γνωρίζω. Αρχικά, θα πρέπει να προσπαθήσετε να τηρείτε τις οδηγίες του HTML5. Από την άλλη πλευρά, φυσικά, δεν θα σας κόψει κανείς το κεφάλι αν χρησιμοποιήσετε το strong αντί για το b.
<p> <em>Γραμμή με em</em><br /> <i>Γραμμή με i</i><br /> <strong>Γραμμή με strong</strong><br /> <b>Γραμμή με b</b> </p>
Βασικά, οι κατασκευαστές των περιηγητών πρέπει να δράσουν εδώ.
Σε γενικές γραμμές, η πραγματική σχεδίαση των κειμένων που είναι εξοπλισμένα με τα ανωτέρω στοιχεία είναι τελικά υπεύθυνη το CSS.
Ακρώνυμα με abbr
Για να επισημάνετε ένα ακρωνύμιο, χρησιμοποιείτε το ίδιο στοιχείο που χρησιμοποιείται μέχρι στιγμής για συντομεύσεις, δηλαδή το abbr.
Το Γερμανο-Αυστριακό Γραφείο του <abbr title="Οργανισμός Παγκόσμιου Ιστού">W3C</abbr> έχει την έδρα του στο Πανεπιστήμιο Εφαρμοσμένων Επιστημών της Potsdam από τον Απρίλιο του 2009.
Οι περιηγητές που ερμηνεύουν σωστά το στοιχείο abbr εμφανίζουν το κείμενο που περιλαμβάνεται στην abbr με υπογράμμιση.
Επιπλέον, το abbr πρέπει να είναι ένα χαρακτηριστικό title. Εκεί συνήθως γράφεται η πλήρης έκφραση για το ακρωνύμιο. Όταν ο επισκέπτης περνά με το ποντίκι πάνω από το ακρωνύμιο, η έκφραση εμφανίζεται σε ένα παράθυρο εργαλείου.
Διευθυντήριες πληροφορίες με address
Με το στοιχείο address μπορούμε να επισημάνουμε πληροφορίες διεύθυνσης.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Οι περιηγητές συνήθως εμφανίζουν τα περιεχόμενα του στοιχείου address με πλάγια γραφή.
Σημειογραφία προγράμματος με το στοιχείο code
Το στοιχείο code χρησιμοποιείται για την επισήμανση προγραμματικού κώδικα. Σε αυτή την έννοια, σε σύγκριση με προηγούμενες εκδόσεις HTML, δεν έχει αλλάξει τίποτα. Ακόμα και τώρα, το code χρησιμοποιείται για αυτόν τον σκοπό.
<pre>
Αυτή είναι μια κεφαλίδα HTML:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Συνήθως συνδυάζουμε τον κώδικα με το στοιχείο pre, ώστε να διατηρήσουμε τις εσοχές που χρησιμοποιούνται στον προγραμματικό κώδικα.
Η προδιαγραφή HTML5 προτείνει τη χρήση του γνωρίσματος class στο στοιχείο code. Μπορείτε να αντιστοιχίσετε σε αυτό το γνώρισμα τη γλώσσα που χρησιμοποιείται εντός του στοιχείου code. Εδώ μερικά τυπικά παραδείγματα πώς μπορεί να φαίνονται αυτές οι επισημάνσεις:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Δεν έχει καθοριστεί από το W3C κατά πόσον και πώς οι περιηγητές εφαρμόζουν αυτές τις οδηγίες.
<pre>
Αυτή είναι μια κεφαλίδα HTML:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
Προς το παρόν, το γνώρισμα class δεν έχει κάποια ορατή επίδραση στον περιηγητή. Ωστόσο, οι ανθρώπινοι παρατηρητές μπορούν με αυτόν τον τρόπο να αναγνωρίσουν σε ποια γλώσσα βασίζεται ο προγραμματικός κώδικας, αν ρίξουν μια ματιά στον πηγαίο κώδικα της σελίδας.
Μικρογραφία με το στοιχείο small
Το στοιχείο small αρχικά χρησιμοποιήθηκε για την εμφάνιση κειμένου μικρότερου από τον κανονικό μέγεθος. Στο HTML5, το small χρησιμοποιείται ρητά για μικρογραφία. Αυτή η μικρογραφία θα μπορούσε να περιλαμβάνει, για παράδειγμα, τα παρακάτω:
• Πληροφορίες πνευματικών δικαιωμάτων
• Αποποίηση ευθυνών
• Όροι άδειας χρήσης
• Όροι και συνθήκες
Το W3C υπογραμμίζει ότι το small δεν θα έπρεπε να χρησιμοποιείται για μεγάλα τμήματα κειμένου.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Υπογράμμιση κειμένων
Μπορείτε να υπογραμμίσετε λέξεις χρησιμοποιώντας το στοιχείο u. Εδώ ένα παράδειγμα:
<p>Καλώς ήλθατε στην <u>PSD-Tutorials.de</u></p>
Το αποτέλεσμα φαίνεται ως εξής στον περιηγητή:
Αν κοιτάξετε το αποτέλεσμα, αυτό είναι πράγματι το επιθυμητό αποτέλεσμα. Ωστόσο, υπάρχει μια παγίδα. Στο διαδίκτυο, τα υπογραμμισμένα κείμενα συνδέονται συνήθως με υπερσυνδέσμους. Έτσι, αν υπογραμμίσετε ένα κείμενο ή μια λέξη, οι επισκέπτες ενδέχεται να νομίσουν ότι πρόκειται για υπερσύνδεσμο. Η προσπάθεια να τον κάνουν κλικ θα αποτύχει φυσικά. Γι' αυτό θα πρέπει να αποφεύγετε τη χρήση της υπογράμμισης.
