חלוקה לפיסקאות ב-HTML
עמודי HTML רבים באינטרנט, כמו העמוד הזה שאתם קוראים עכשיו, מכילים מאמרים.
מאמרים באינטרנט, בדיוק כמו בספרים או בעיתון, מחולקים לפיסקאות. לעיתים, הפסקאות מחולקות בתוכן לשורות נפרדות.
נראה איך מיישמים את זה ב-HTML.
דוגמה:
<div class="article">
<p>
The little dwarf walked in the forest and collected mushrooms. He held a small basket in his hand and put mushroom after mushroom into it.
</p>
<p>
Suddenly, the dwarf saw a white goat. The goat started talking to him and invited him to talk about life.
</p>
</div>בדוגמה זו, אנו רואים אלמנט div שכולל בתוכו 2 פיסקאות. כל פיסקה מתוייגת בתגית p וכוללת בתוכה טקסט שיוצג על המסך.
כאשר נציג את הפיסקאות בדפדפן, נראה כי הדפדפן מייצר רווח בין פיסקה לפיסקה, ואילו הטקסט בתוך כל פיסקה מוצג ברצף. במקרה של חריגה מסוף השורה, או מהמקום הפנוי לטקסט, הטקסט ישבר לשורה חדשה בצורה אסתטית.
את עיצוב הפיסקאות (סוג הגופן, גודל הגופן, אופן היישור, הריווח וכיו"ב) נבצע באמצעות הגדרות עיצוב ב-CSS ולא במסגרת ה-HTML.
שבירת שורה באמצעות תגית br
לעיתים, נרצה לשבור שורות בצורה יזומה, בלי להסתמך על המקום הפנוי בפיסקה. לשם כך נשתמש בתגית br.
דוגמה:
<div class="article">
<p>
The little dwarf walked in the forest and collected mushrooms.<br />
He held a small basket in his hand and put mushroom after mushroom into it.
</p>
<p>
Suddenly, the dwarf saw a white goat.<br />
The goat started talking to him and invited him to talk about life.
</p>
</div>התגית br היא אלמנט ריק, כלומר, עומדת בעצמה. היא אינה כוללת תגית פתיחה ותגית סגירה, אלא תגית יחידה שסוגרת את עצמה.
מבחינה עיצובית בדפדפן, ניתן לראות כי תגית p מייצרת ריווח גדול יותר בין הפיסקאות, בעוד תגית br רק מבצעת שבירת שורה וללא הוספת רווח ניכר. חשוב להבין שזו התנהגות ברירת המחדל של הדפדפן, וכמובן ניתן לשנות את אופן הריווח באמצעות עריכת הגדרות העיצוב ב-CSS.
הוספת רווח בצורה יזומה
נשים לב כי בדוגמאות לעיל, הוספנו ריווח בתחילת כל משפט. עשינו זאת כדי לשפר את קריאות ה-HTML. הרווחים האלו לא הוצגו בדפדפן.
הסיבה היא שהדפדפן מתעלם מרווחים מיותרים, וכל רצף של רווחים תמיד יוצג כרווח בודד.
דוגמה:
<p>
My name is David<br />
My name is David
</p>
בדוגמה זו, הדפדפן יציג את המשפט My name is David בדיוק אותו הדבר פעמיים. כל הרווחים הרבים בין מילה למילה במשפט השני יתמזגו לרווח יחיד.
אז איך בכל זאת אפשר יהיה לשלוט ברווחים ולקבוע ריווח נוסף?
כדי ליצור רצף של רווחים, נשתמש ברצף ;nbsp& שמוחלף על ידי הדפדפן בסימן הרווח.
אם לדוגמה נרצה להדפיס על המסך את המשפט מהדוגמה האחרונה עם ריווח גדול יותר בין המילים, נוכל לעשות זאת באופן הבא:
<p>
My name is David
</p>
