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

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

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

Σωστή χρήση του στοιχείου παραγράφου HTML

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

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

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

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

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

instagram viewer

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

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

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

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

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

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

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

Η γρήγορη καφέ αλεπού πήδηξε πάνω από τον τεμπέλης ύπνο του σκύλου.


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

Συνηθισμένες καταχρήσεις του

και
Ετικέτες

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

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