הבנת רכיב ה- HTML5
כאשר HTML5 בורח אל הסצינה לפני מספר שנים, הוא הוסיף חבורה של אלמנטים חדשים של חתך ל langauge, כולל אלמנט SECTION. רוב האלמנטים החדשים ש- HTML5 מציגים כוללים שימושים ברורים. לדוגמה, האלמנט משמש להגדרת מאמרים וחלקים מרכזיים של דף אינטרנט, האלמנט משמש להגדרת תוכן קשור שאינו קריטי לשאר הדף, והכותרת, ה- nav והכותרת התחתונה הן די מובן מאליו. רכיב ה- SECTION החדש, לעומת זאת, הוא קצת פחות ברור.
אנשים רבים מאמינים כי רכיבי HTML סעיף והם באמת רק אותו דבר אלמנטים מכולה כללית המשמש להכיל תוכן בדף אינטרנט. אולם המציאות היא ששני היסודות האלה, בעוד שני המרכיבים האלה הם מרכיבים, הם דבר פרט לגנרית. ישנן סיבות ספציפיות להשתמש הן באלמנט SECTION והן באלמנט DIV - ומאמר זה יסביר את ההבדלים הללו.
סעיפים ודיסקים
אלמנט SECTION מוגדר כקטע סמנטי של דף אינטרנט או אתר שאינו סוג אחר ספציפי יותר (כמו מאמר או בצד). אני נוטה להשתמש באלמנט זה כאשר אני מסמן חלק מובחן של הדף - סעיף זה יכול להיות סיטוני להעביר ולהשתמש בדפים אחרים או חלקים של האתר. זה פיסת תוכן ברורה, או "סעיף" של תוכן, אם תרצו.
לעומת זאת, אתה משתמש באלמנט DIV עבור חלקים של הדף שאתה רוצה לחלק, אבל למטרות אחרות מאשר סמנטיקה . הייתי עוטף שטח תוכן בחטיבה אם אני עושה את זה רק כדי לתת לעצמי "וו" להשתמש עם CSS. זה לא יכול להיות קטע נפרד של תוכן המבוסס על סמנטיקה, אבל זה משהו שאני מכתיב כדי להשיג את הפריסה שאני רוצה עבור הדף שלי.
הכל על סמנטיקה
זהו מושג קשה להבנה, אך ההבדל היחיד בין אלמנט DIV לבין אלמנט SECTION הוא סמנטיקה. במילים אחרות, זוהי המשמעות של קטע הקוד שאתה מחלק.
לתוכן הכלול בתוך אלמנט DIV אין משמעות מהותית. זה הכי טוב עבור דברים כמו:
- CSS סגנונות ווים עבור סגנונות CSS
- מיכלי פריסה
- ג 'אווה
- מחלקות עבור HTML כדי להקל על הקריאה
אלמנט DIV בעבר היה האלמנט היחיד שהיה לנו על הוספת ווים לסגנון המסמכים שלנו וליצור עמודות ופריסות מהודרות. בגלל זה, אנחנו בסופו של דבר עם HTML כי היה מלא עם אלמנטים DIV - מה מעצבי אינטרנט קוראים "divitis". היו אפילו עורכי WYSIWYG שהשתמשו באלמנט DIV בלעדי. אני ממש לרוץ על HTML המשתמשת אלמנט DIV במקום פסקאות!
ב- HTML5, אנו יכולים להתחיל להשתמש באלמנטים של סעיפים כדי ליצור מסמכים תיאוריים יותר מבחינה סמנטית (באמצעות ניווט ודמויות תיאוריות וכן הלאה) וכן להגדיר את הסגנונות על אותם רכיבים.
מה לגבי אלמנט SPAN?
האלמנט האחר שרוב האנשים חושבים עליו כשהם חושבים על אלמנט DIV הוא האלמנט. אלמנט זה, כמו DIV, אינו אלמנט סמנטי. זהו אלמנט מוטבע שבו ניתן להשתמש כדי להוסיף ווים עבור סגנונות וסקריפטים סביב בלוקים מוטבעים של תוכן (בדרך כלל טקסט). במובן זה זה בדיוק כמו אלמנט DIV, רק מוטבע במקום אלמנט בלוק . במובנים מסוימים, זה יכול להיות קל יותר לחשוב על DIV כרכיב בלוק ברמת SPAN ולהשתמש בו באותה הדרך היית SPAN רק עבור בלוקים שלמים של תוכן HTML.
אין רכיב מקביל בתוך קטע HTML5.
עבור גירסאות ישנות יותר של
גם אם אתם תומכים באופן דרמטי בגרסאות ישנות יותר של IE (כמו IE 8 ומטה) שאינם מזהים באופן מהימן HTML5, אל לכם לחשוש להשתמש בתגי HTML נכונים. הסמנטיקה תעזור לך ולצוות שלך לנהל את הדף בעתיד (מכיוון שתדע שהקטע הזה הוא המאמר אם הוא מוקף באלמנט ARTICLE). בנוסף, דפדפנים שמזהים את התגים האלה יתמכו בהם טוב יותר.
אתה עדיין יכול להשתמש HTML5 סמנטי סעיפים אלמנטים עם Internet Explorer, אתה רק צריך להוסיף scripting ואולי כמה אלמנטים DIV שמסביב כדי לגרום להם לזהות את התגים כמו HTML.
שימוש באלמנטים DIV ו- SECTION
אם אתה משתמש בהם כהלכה, באפשרותך להשתמש בשני האלמנטים DIV ו- SECTION יחד במסמך HTML5 חוקי. כפי שראית כאן במאמר זה, אתה משתמש אלמנט SECTION כדי להגדיר חלקים בדידות סמנטית של התוכן, ואתה משתמש אלמנט DIV כמו ווים עבור CSS ו- JavaScript, כמו גם הגדרת הפריסה כי אין משמעות סמנטי.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב -13 / 17/17