Στη γλώσσα HTML οι παράγραφοι καθορίζονται από την ετικέτα <p>.
Ακολουθεί παράδειγμα στο οποίο φαίνεται η χρήση των παραγράφων:
<!DOCTYPE html>
<html>
<body>
<p>Αυτή είναι μια παράγραφος.</p>
<p>Αυτή είναι μια παράγραφος.</p>
<p>Αυτή είναι μια παράγραφος.</p>
</body>
</html>
Εδώ βλέπουμε το αποτέλεσμα των παραπάνω γραμμών στο φυλλομετρητή:
Οι φυλλομετρητές αυτόματα προσθέτουν κενό διάστημα πριν και μετά την παράγραφο. Σχεδόν στο μέγεθος μιας κενής γραμμής.
Αναπαράσταση HTML
Δεν μπορούμε να γνωρίζουμε με ποιο τρόπο η παράγραφος θα παρουσιαστεί στο φυλλομετρητή. Ο τρόπος που θα παρουσιαστεί η παράγραφος εξαρτάται από το αν η οθόνη είναι στενή ή πλατιά. Επίσης αν αλλάξουμε το μέγεθος του παραθύρου (resize) τότε πάλι θα προκύψει διαφορετικό αποτέλεσμα.
Η γλώσσα HTML δεν μας δίνει τη δυνατότητα να ρυθμίσουμε το τρόπο που θα εμφανιστεί η παράγραφος. Ακόμα κι αν προσθέσουμε κενούς χαρακτήρες ή κενές γραμμές στη μέση ή στο τέλος της παραγράφου, το αποτέλεσμα θα παραμείνει το ίδιο. Ο φυλλομετρητής θα διαγράψει τα κενά διαστήματα και τις κενές γραμμές.
Ακολουθεί παράδειγμα στο οποίο οι δυο πρώτες παράγραφοι είναι γραμμένες στην html με διαφορετικό τρόπο. Όμως ο browser τις παρουσιάζει με τον ίδιο τρόπο διότι διαγράφει τα κενά.
<!DOCTYPE html>
<html>
<body>
<p>
Αυτή η παράγραφος
περιλαμβάνει πολλές γραμμές
στον κώδικα html,
όμως ο φυλλομετρητής
θα τις αγνοήσει.
</p>
<p>
ΑΑυτή η παράγραφος
περιλαμβάνει πολλά κενά διαστήματα
στον κώδικα html,
όμως ο φυλλομετρητής
θα τις αγνοήσει.
</p>
<p>
Το πλήθος των γραμμών της παραγράφου εξαρτάται από το μέγεθος του παραθύρου του φυλλομετρητή. Εάν αλλάξετε το μέγεθος του παραθύρου του φυλλομετρητή, τότε το πλήθος των γραμμών της παραγράφου θα μεταβληθεί.
</p>
</body>
</html>
Εδώ βλέπουμε το αποτέλεσμα των παραπάνω γραμμών html στο φυλλομετρητή:
Καλό είναι να μην ξενάμε τα τοποθετήσουμε την ετικέτα κλεισίματος.
Οι περισσότεροι φυλλομετρητές θα παρουσιάσουν κανονικά την παράγραφο σαν να είχε ετικέτα κλεισίματος.
Εάν παραλείψουμε την ετικέτα κλεισίματος τότε υπάρχει περίπτωση να προκληθούν απρόβλεπτα λάθη όταν η σελίδα παρουσιαστεί σε κάποιους φυλλομετρητές ή σε κάποιες συσκευές.
Αλλαγή γραμμής στην HTML
Όταν θέλουμε να κάνουμε αλλαγή γραμμής στη γλώσσα HTML τότε μπορούμε να χρησιμοποιήσουμε την ετικέτα αλλαγής γραμμής <br>.
Χρησιμοποιούμε την ετικέτα αλλαγής γραμμής <br> στα σημεία που θέλουμε να γίνει αλλαγή γραμμής χωρίς να γίνει αλλαγή παραγράφου. Αυτό φαίνεται στο παράδειγμα που ακολουθεί.:
<p>Αυτή είναι <br> μια παράγραφος <br> που χρησιμοποιεί την ετικέτα αλλαγής σειράς.</p>
Πρόβλημα της παρουσίασης ποιήματος στην html
Ας υποθέσουμε οτι θέλουμε να χρησιμοποιήσουμε τη γλώσσα html για να παρουσιάσουμε τους στίχους του ποιήματος του Σεφέρη:
<!DOCTYPE html>
<html>
<body>
<p>Η γλώσσα HTML αγνοεί τις κενές γραμμές και τους κενούς χαρακτήρες:</p>
<p>
Στο περιγιάλι το κρυφό
κι άσπρο σαν περιστέρι
διψάσαμε το μεσημέρι
μα το νερό γλυφό.
</p>
</body>
</html>
Εδώ βλέπουμε την παρουσίαση του ποιήματος στο φυλλομετρητή:
Το αποτέλεσμα που θα παρουσιαστεί στο φυλλομετρητή δεν είναι αυτό που θα θέλαμε.
Η ετικέτα <pre> της HTML
Η HTML ετικέτα <pre> χρησιμοποιείται για να παρουσιάσουμε μεορφοποιημένο κείμενο.
Το κείμενο που βρίσκεται εντός τηςπαρουσιάζεται με μια προκαθορισμένη γραμματοσειρά (συνήθως Courier), και δεν αγνοεί ούτε τις κενές γραμμές εύτε τα κενά διαστήματα:
<!DOCTYPE html>
<html>
<body>
<p>Η ετικέτα pre παρουσιάζει τόσο τις κενές γραμμές όσο και τα κενά διαστήματα:</p>
<pre>
Στο περιγιάλι το κρυφό
κι άσπρο σαν περιστέρι
διψάσαμε το μεσημέρι
μα το νερό γλυφό.
</pre>
</body>
</html>
Εδώ βλέπουμε τη σωστή παρουσίαση ποίματος στην html:
[…] Πιθανότατα θα παρατηρήσετε ότι υπάρχουν ετικέτες HTML γύρω από τα προεπιλεγμένα πεδία φόρμας στο Contact Form 7 που φαίνονται ως «<label>» ή «<p>». Εδώ να υπενθυμίσουμε οτι οι ετικέτες είναι οι παράγραφοι στην html. […]