Δημιουργία διακοπών γραμμής και παραγράφων με τις ετικέτες P & BR

Όταν πρόκειται για την εκμάθηση HTML, δύο ετικέτες που οι περισσότεροι άνθρωποι μαθαίνουν νωρίς είναι οι ετικέτες παραγράφου και γραμμής, οι οποίες είναι

και
αντίστοιχα. Αυτές οι ετικέτες θέτουν φυσικά σπασίματα στο κείμενό σας, έτσι ώστε το περιεχόμενο της ιστοσελίδας σας να είναι ευκολότερο να το διαβάσετε. Ενώ αυτές οι ετικέτες είναι αρκετά εύκολο στη χρήση, μπορούν επίσης να προκαλέσουν κάποια σύγχυση και να χρησιμοποιηθούν κατά λάθος.

Διορθώστε τη χρήση του στοιχείου παραγράφου HTML

Το στοιχείο της παραγράφου

χρησιμοποιείται ως ζεύγος ετικετών με το

ετικέτα που ανοίγει το στοιχείο και το

ετικέτα κλεισίματος. Όταν γράφετε HTML4 ή HTML5, η τελική ετικέτα δεν απαιτείται τεχνικά, αλλά θεωρείται βέλτιστη πρακτική να κλείσετε αυτήν την ετικέτα. Στην XHTML, το κλείσιμο

απαιτείται.

Χρησιμοποιείτε το στοιχείο παραγράφου σε έναν ιστότοπο με τον ίδιο τρόπο που κάνετε όταν γράφετε περιεχόμενο για ανάγκες εκτός δικτύου - όταν θέλετε να ξεκινήσετε μια νέα ιδέα ή σημείο. Τα περισσότερα προγράμματα περιήγησης εμφανίζουν παραγράφους με μία κενή γραμμή μεταξύ τους. Ακολουθεί ένα παράδειγμα παραγράφου σε HTML:

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

Πολλές άλλες ετικέτες μπορούν να εμφανιστούν μεταξύ των ετικετών παραγράφου έναρξης και λήξης.

Σωστή χρήση του στοιχείου διαίρεσης γραμμής HTML

Το στοιχείο διακοπής γραμμής
η ετικέτα είναι μια ετικέτα singleton - δεν έχει τελική ετικέτα. Στην XHTML, πρέπει να χρησιμοποιήσετε την ετικέτα με μια τελική κάθετο (
), αλλά σε HTML (συμπεριλαμβανομένης της HTML5), δεν απαιτείται.

Το στοιχείο σπασίματος είναι ένα σπασμένο σπάσιμο γραμμής μέσα στη ροή κειμένου της ιστοσελίδας. Μπορείτε να το χρησιμοποιήσετε όταν θέλετε το κείμενο να συνεχίσει στην επόμενη γραμμή, αλλά το περιεχόμενο δεν είναι ξεχωριστή ιδέα ή σημείο, το οποίο θα έκανε μια άλλη παράγραφο. Ένα παράδειγμα αυτού συμβαίνει με την ποίηση όπου οι διαχωριστικές γραμμές είναι συνήθως σταθερές.

Ακολουθεί ένα παράδειγμα διαλείμματος γραμμής μέσα σε μια παράγραφο:

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

Επειδή η ετικέτα διακοπής γραμμής είναι ετικέτα singleton, δεν μπορούν να χρησιμοποιηθούν άλλες ετικέτες μέσα σε αυτήν.

Κοινές καταχρήσεις του

και
Ετικέτες

Οι άνθρωποι που είναι νέοι στην κωδικοποίηση κάνουν μερικά κοινά λάθη με τα στοιχεία παραγράφου και γραμμής κατά τη σήμανση μιας ιστοσελίδας.

• Χρησιμοποιώντας
  για να αλλάξετε το μήκος μιας γραμμής κειμένου: Η χρήση της ετικέτας σπάσει σε μια προσπάθεια να εξαναγκάσει το κείμενο να εμφανιστεί ή να σπάσει με ένα συγκεκριμένο τρόπο εξασφαλίζει ότι οι σελίδες σας φαίνεται μεγάλη στο πρόγραμμα περιήγησης, αλλά όχι απαραίτητα σε άλλο πρόγραμμα περιήγησης και σίγουρα όχι σε όλες τις συσκευές. Εάν ο ιστότοπός σας είναι ένας ανταποκρινόμενος ιστότοπος, αλλάζει τη διάταξή του βάσει διαφορετικών μεγεθών οθόνης. Το πρόγραμμα περιήγησης τοποθετεί αυτόματα σε περιτύλιξη λέξεων, και στη συνέχεια όταν πρόκειται για το
  ετικέτα, αναδιπλώνει το κείμενο ξανά, με αποτέλεσμα σύντομες γραμμές και μεγάλες γραμμές και ασταθές κείμενο. Θα πρέπει να χρησιμοποιείτε φύλλα στυλ CSS για να υπαγορεύετε οπτικά στυλ αντί να προσπαθείτε να εξαναγκάσετε τη διάταξη προσθέτοντας συγκεκριμένα στοιχεία HTML.
• Χρησιμοποιώνταςγια να προσθέσετε χώρο μεταξύ των στοιχείων: Για άλλη μια φορά, γίνεται στροφή σε HTML για να δημιουργήσετε μια οπτική διάταξη, σε αυτή την περίπτωση, αντί να χρησιμοποιήσετε το CSS. Αυτή είναι μια κοινή πρακτική ορισμένων εκδοτών HTML και, ενώ δεν είναι τεχνικά λανθασμένη, οδηγεί σε αμήχανη HTML και μπορεί να προκαλέσει σύγχυση στην επεξεργασία αργότερα. Επίσης, δεν συμβαδίζει με τα πρότυπα ιστού και τον διαχωρισμό της δομής και του στυλ. Σε ορισμένες περιπτώσεις, η χρήση μη διαχωριστικών χώρων μέσα σε διαφορετικά κενές ετικέτες παραγράφων μπορεί να οδηγήσει σε απροσδόκητες αποστάσεις σε διαφορετικά προγράμματα περιήγησης, καθώς όλοι φαίνεται να ερμηνεύουν αυτό διαφορετικά. Η καλύτερη λύση για την επίτευξη των διαχωριστικών στοιχείων που απαιτούνται στο σχεδιασμό σας είναι η χρήση φύλλων στυλ.

Μάθετε περισσότερα σχετικά με αυτές και άλλες ετικέτες σε αυτήν τη λίστα ετικετών HTML.