ההבדלים בין אלמנטים ברמת בלוק

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

חסום אלמנטים ברמה

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

נעשה שימוש באלמנטים ברמת הבלוק בגוף מסמך ה- HTML. הם יכולים להכיל אלמנטים מוטבעים, כמו גם אלמנטים אחרים ברמת הבלוק.

אלמנטים מוטבעים

בניגוד לאלמנט ברמת בלוק, אלמנט מוטבע:

• זה יכול להתחיל בשורה.
• זה לא מתחיל קו חדש.
• רוחבו מתארך רק ככל שהוא מוגדר על ידי התגים שלו.

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

יש גם סוג שלישי של אלמנטים ב- HTML: אלה שאינם מוצגים כלל. אלמנטים אלה מספקים מידע על הדף אך אינם מוצגים כאשר הם מעובדים בדפדפן אינטרנט.

לדוגמה:

•  מגדיר מטא נתונים.
•  הוא אלמנט מסמך ה- HTML המכיל אלמנטים אלה.

החלפת סוגי אלמנטים מוטבעים וחסימה

באפשרותך לשנות את סוג האלמנט מ- inline לחסימה, או להיפך, באמצעות אחד ממאפייני CSS אלה:

• בלוק תצוגה; 

• תצוגה: מוטבע; 

• אל תציג דבר;

ה CSS מאפיין תצוגה מאפשר לך לשנות מאפיין מוטבע לחסימה, או חסום למוטבע, או לא להציג בכלל.

מתי לשנות את מאפיין התצוגה

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

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

  אף אחד

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

טעויות עיצוב אלמנט מוטבע נפוץ

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

אלמנטים מוטבעים מתעלמים מכמה מאפיינים:

• רוֹחַב

  ו

  גוֹבַה

• רוחב מקסימלי

  ו

  גובה מקסימלי

• רוחב דק

  ו

  גובה דקה

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