Inline VS. Block-Level Elements

קידום אתרים, בית ספר, HTML & XHTML, בניית אתרים, כללי הוסף תגובה
05 Aug 2006

אחד מיסודות הבנת הHTML באופן עמוק הוא הכרת חלוקת אלמנטי הhtml ל2 קבוצות חשובות ומכריעות: Inline Elements & Block-Level Elements.
הבנת התנהגות האלנטים ומשפחותיהם קריטית לעיצוב העמוד ותכנונו.
יכולת הבנת ההתנהגות הצפויה של האלמנטים חוסכת לנו קוד, ומאפשרת ליצור מסמך קריא בעל טאגים יעודיים.
יתרה על כך, לא ניתן לעצב ולתכנן עמוד, ללא הבנת תכונות אלו. עד הבנת נקודות אלו עיצוב העמוד מתבסס על הערכות ונסיון העבר, ולא על הבנה עמוקה של ארכיטקטורת העמוד ואלגוריתם הHTML.

אז בואו ונתחיל:
יש לנו 2 משפחות: טאגים בלוקיים וטאגים אינליינים.

למשפחת טאגי הבלוק משתייכם כל הטאגים ששוברים שורה מסביבם (כלומר שורה מעל ומתחתם).
טאגים אלה אינם משתייכים לזרימה של השורה בה הם אוכסנו, ושוברים שורה ממנה.
לא יכול להימצא סביב המרחב של אלמנט בלוקי טאג כלשהוא. רק אחריו ולפניו.
לקבוצה זאת משתייכים הטאגים הבאים: Table, Div, P, PRE, H1-H6, Ul & OL, Form & Fieldset ועוד. (לרשימה מלאה לחץ כאן)

המשפחה השניה, Inline Elements
למשפחה זאת שייכם כל הטאגים אשר הם חלק מהflow של השורה, ואינם שוברים אותה או בעלי מרחב ומידות משל עצמם. כמו טאגי : B, Strong, A, I, U ועוד.
(לרשימה מלאה לחץ כאן)

הבנת ארכיטקטורת מודל שפת הHTML מאפשרת לנו לכתוב קוד נקי, אלגנטי קריא ונכון. לדוגמא:
מפתח אשר אינו מודע למשמעות הטאגים, יכול לכתוב מקטע טקסט בעל 2 פסקאות תחביריות, עם רווחי שורה כפולה באמצעות BR כפול. כך:

PLAIN TEXT
HTML:
  1. <br />
  2. <br />
  3.   First Paragraph
  4. <br />
  5. <br />
  6.   Second Paragraph
  7. <br />
  8. <br />

ולעומת זאת, ניתן לכתוב את אותו קוד בצורה הבאה

PLAIN TEXT
HTML:
  1. <p>First Paragraph<p />
  2. <p>Second Paragraph<p />

למה עדיפה לנו שיטה זו?
כי קודם כל, מסמך HTML, חוץ מהיותו מסמך המגדיר את תצוגת הדף בדפדפן, הינו מסמך הנועד לקריאה.
הניווט קשה במסמך אשר כתובות בו מספר רב של פסקאות, אשר כולן מכילות טקסט וטאגי BR והמסמך אינו קריא.
לעומת זאת, מסמך המכיל פסקאות מסודרות, קריא הרבה יותר, ויתרה על כך, גם קל במשקל וניתן לאפיון ע"י CSS (אפיון הזחות ומיקום טאג P).
כאשר אתה רואה פסקה-P, אתה פשוט מבין, כאן יש פסקה. דבר אשר אינו מושג בשיטה השניה.

חוץ מזה, כתיבה בטאגים ייעודיים מייעלת ביצועי SEO, כי היא מייצרת היררכיית עמוד נכונה יותר.

בוא ונבדוק עוד אלמנט בלוקי חשוב מאוד במודל המסמך- H1 - H6
משפחת טאגי *H הינה משפחה חשובה מאוד.
קודם כל, אלמנט זה חשוב מאוד בהיררכיית המסמך והוא חשוב מאוד מבחינת SEO.
דבר שני, הרבה מגדירים כותרות באמצעות קלאסים, ובכך הם מפסידים יתרון הצהרתי במסמך חשוב כלכך.
בעת שאנחנו מגדירים ששורת טקסט הינה כותרת (באמצעות טאג *H), אנחנו ממש מגדירים שכאן ישנה כותרת ולא סתם טקסט צבוע, ומוסיפים רובד נוסף להיררכייה של המסמך.
ואחד היתרונות של טאג כותרת זה, שהוא בלוקי. והתנהגותה הטבעית של כותרת היא לשבת בשורה משל עצמה. לכן הוגדר במודל העמוד שכך יתנהג טאג כותרת. (החברה שהגו את מודל הHTML לא סתם קבעו מה שקבעו :))

11 תגובות ל“Inline VS. Block-Level Elements”

  1. ניר טייב אמר:
    August 6th, 2006 at 12:25 am

    למען האמת תגי H1-6 ו-P הם תגי אינליין אבל הדפדפנים מרנדרים אותם בתור block.

  2. Shlomi Asaf אמר:
    August 6th, 2006 at 12:53 am

    ניר, לפי W3 אתה צודק: P Element & Hn Element.

    אתה מוכן להסביר לי למה לפי הספסיפיקציה P & Hn מוגדרים שונה כלכך מתכליתם? הרי, אם אין לנו את האלמנט הבלוקי הכלכך חשוב P, מה יש? נכתוב בדיוים בלי קשר למשמעות הטאג בעמוד?

    נושא זה העלה לי כמה שאלות: אם כאשר אפיינו את מודל הHTML בחלוקה ל 2 משפחות טאגים, בראו לנו את Span & P, וכעת שניהם אינליינים, מה ההגיון מאחורי זה, ולמה P מוגדר כאינליין אך מרונדר כבלוקי?
    אני מברר ברקע בWSG (רשימת תפוצה מומלצת בהחלט. כל תותחי הHTML יושבים שם ביחד)

  3. Shlomi Asaf אמר:
    August 6th, 2006 at 10:19 am

    טוב
    Heading & P עדיין הינם בלוקיים.
    http://www.w3.org/TR/html401/sgml/dtd.html#block
    הלינקים שהבאתי פה מדברים על כך ש2 טאגים אלו מורשים להכיל רק אלמנטים אינליינים.

    PLAIN TEXT
    CODE:
    1. <!ELEMENT (%heading;) - -(%inline;)* --heading-->
    2. <!ELEMENT P - O (%inline;)*        -- paragraph -->

  4. גיא מוגרבי אמר:
    August 6th, 2006 at 12:12 pm

    אכן מעניין וחשוב.
    מחכה לחלק השני :-)

  5. Shlomi Asaf אמר:
    August 6th, 2006 at 9:21 pm

    תודה תודה :D

  6. ניר טייב אמר:
    August 6th, 2006 at 9:24 pm

    צודק, טעות שלי וטוב שחקרת את הנושא.

  7. Shlomi Asaf אמר:
    August 7th, 2006 at 12:16 am

    בכיף. ההערה שלך גרמה לי רק לחקור, דבר שהשכיל את שנינו ועשה רק טוב :)

  8. רותי גולד אמר:
    August 26th, 2006 at 9:07 pm

    OK קראתי כמו שהמלצת לי,
    ובאמת החכמתי, מחכה לעוד חומר טוב, שיוגש בצורה ברורה וקריאה- כמו הבלוג הנוכחי.

    כמה שאני קוראית אנגלית טוב, עברית זה השפה שלי.
    וזה באמת טוב ללמוד דברים בצורה מסודרת...

  9. רותי גולד אמר:
    December 18th, 2006 at 3:15 pm

    כל הקטע שהתכתבתם פה על H1-H6 הציק לי גם, ותודה על הבירור.
    יש לך רעיון איך מסתדרים עם הקוד הבא?

    היה לי באתר קוד כזה

    PLAIN TEXT
    CODE:
    1. איש קשר:

    הCSS של הקוד היה במבנה הבא:
    . DetailsOdd
    . DetailsOdd h4
    כך שהגודר ב h4 הרוחב של הכותרת, וכך התוכן בכל העמודות התחיל באותו מקום.
    מכיון שקראתי פה שזה לא נכון לכתוב כך, רציתי לשאול מה אתה מציע לי לעשות?
    במקום הh4 לכתוב 2 span?

    בתודה

  10. רותי גולד אמר:
    December 18th, 2006 at 3:19 pm

    מצטערת, ניסיתי פעם שניה, ועדיין זה לא מציג,
    הקוד נראה כך
    div שהקלאס שלו הוא DetailsOdd
    h4 ובתוכו כותרת: איש קשר (סגירת h4)
    (שם איש קשר)
    (סגירת div)

  11. אסף שלומי אמר:
    December 18th, 2006 at 3:29 pm

    היי רותי.
    דבר ראשון את יכולה להירשם לאתר, וברגע שתרשמי תוכלי לערוך את ההודעות שלך. ולא, אני לא מקדם הרשמות לאתר שלי :)
    דבר שני, אין בעיה לH4 להיות מוכלת בתוך אלמנט DIV. DIV מכיל FLOW. כלומר הוא מאפשר לזרימת העמוד לעבור דרכו והוא משרת את מבנה האתר.
    מה שתיארת לי הינו מבנה חוקי בהחלט. ומבחינתי מה שיתאר נכון יותר את המבנה שלך היא definition list:

    PLAIN TEXT
    HTML:
    2.     <dt>איש קשר</dt>
    3.         <dd>רותי גולד</dd>
    4.         <dd>שלומי אסף</dd>
    5. </dl>

    http://www.htmlhelp.com/reference/html40/lists/dd.html
    תקראי קצת על מבנה זה, ועצבי מבנה זה באמצעות CSS שישרת אותך בצורה הטובה ביותר.

    :)
    שלומי

הגב למאמר זה

#טאגי קוד נתמכים: [html][/html] , [css][/css] , [js][/js] , [code][/code]

הירשם לקבלת תגובות, ללא השארת תגובה בפועל

WP Theme & Icons by N.Design Studio
רסס מאמרים רסס תגובות התחבר למערכת