ומתי להשתמש ב- ARTICLE, ASIDE ו- DIV
רכיב HTML5 SECTION החדש יכול להיות קצת מבלבל. אם אתה בונה מסמכי HTML לפני HTML5, רוב הסיכויים שאתה כבר משתמש באלמנט כדי ליצור חלוקות מבניות בתוך הדפים שלך ואז לסדר את הדפים איתם. אז זה אולי נראה כמו דבר טבעי פשוט להחליף את אלמנטים DIV הקיים עם אלמנטים SECTION. אבל זה לא נכון מבחינה טכנית. אז אם אתה לא רק להחליף DIV אלמנטים עם אלמנטים SECTION, איך אתה משתמש בהם כראוי?
אלמנט הסעיף הוא אלמנט סמנטי
הדבר הראשון שיש להבין הוא שאלמנט SECTION הוא אלמנט סמנטי . פירוש הדבר שהוא מספק משמעות הן לסוכני המשתמש והן לבני האדם לגבי התוכן המסוגר - במיוחד קטע של המסמך.
זה אולי נראה כמו תיאור סמנטי כללי מאוד, וזה בגלל זה. ישנם אלמנטים אחרים HTML5 המספקים הבחנות סמנטי יותר לתוכן שלך כי אתה צריך להשתמש הראשון לפני שאתה משתמש באלמנט SECTION:
- מאמר
- בַּצַד
- NAV
מתי להשתמש באלמנט SECTION
השתמש באלמנט ARTICLE כאשר התוכן הוא חלק בלתי נפרד מהאתר שיכול לעמוד לבדו ולהיות מאוגדים כמו מאמר או פוסט בבלוג. השתמש באלמנט ASIDE כאשר התוכן קשור באופן משיק לתוכן הדף או לאתר עצמו, כגון סרגלי צד, הערות, הערות שוליים או מידע הקשור לאתר. השתמש באלמנט NAV עבור תוכן שהוא ניווט.
אלמנט SECTION הוא אלמנט סמנטי גנרי. אתה משתמש בו כאשר אף אחד ממרכיבי מכולה סמנטיים אחרים אינם מתאימים. אתה משתמש בו כדי לשלב חלקים של המסמך שלך ליחידות נפרדות, כי אתה יכול לתאר כקשורים בדרך כלשהי. אם אינך יכול לתאר את האלמנטים שבקטע במשפט אחד או שניים, סביר להניח שאתה לא צריך להשתמש באלמנט.
במקום זאת, עליך להשתמש באלמנט DIV. אלמנט DIV ב- HTML5 הוא אלמנט מכולה לא סמנטי. אם התוכן שאתה מנסה לשלב אינו בעל משמעות סמנטית, אבל אתה עדיין צריך לשלב אותו עבור סגנון, אז האלמנט DIV הוא האלמנט המתאים לשימוש.
איך עובד האלמנט
חלק מהמסמך יכול להופיע כמכולה החיצונית עבור מאמרים ואלמנטים ASIDE. זה יכול גם להכיל תוכן שאינו חלק של פריט או ASIDE. אלמנט SECTION ניתן למצוא גם בתוך פריט, NAV או ASIDE. תוכל אפילו לקנן קטעים כדי לציין שקבוצת תוכן אחת היא קטע מקבוצת תוכן אחרת שהיא קטע של מאמר או של הדף כולו.
אלמנט SECTION יוצר פריטים בתוך קווי מתאר של המסמך. וככזה, אתה צריך תמיד יש אלמנט הכותרת (H1 דרך H6) כחלק של הקטע. אם אתה לא יכול לבוא עם כותרת עבור הקטע, אז שוב האלמנט DIV הוא כנראה מתאים יותר. זכור, אם אינך מעוניין שכותרת הקטע תופיע בדף, תוכל תמיד להסוות אותה באמצעות CSS.
כאשר לא להשתמש באלמנט SECTION
מעבר לעצה שלעיל להשתמש באלמנטים הסמנטיים הספציפיים יותר, יש אזור אחד ברור שאינך צריך להשתמש באלמנט SECTION: לסגנון בלבד.
במילים אחרות, אם הסיבה היחידה שאתה מכניס אלמנט במקום זה היא לצרף מאפייני סגנון CSS, אתה לא צריך להשתמש באלמנט SECTION. מצא אלמנט סמנטי או להשתמש במקום DIV במקום.
בסופו של דבר זה לא משנה
קושי בכתיבת HTML סמנטי הוא שמה שסמנטי לי יכול להיות שטות גמורה. אם אתה מרגיש שאתה יכול להצדיק באמצעות אלמנט SECTION במסמכים שלך, אז אתה צריך להשתמש בו. רוב סוכני המשתמש לא אכפת לי יציג את הדף כפי שאתה יכול לצפות אם אתה סגנון DIV או סעיף.
עבור מעצבים שאוהבים להיות סמנטית נכונה, שימוש באלמנט SECTION בדרך חוקית סמנטית הוא חשוב. עבור מעצבים שרק רוצים שהדפים שלהם יעבדו, זה לא חשוב. אני מאמין כי כתיבת HTML תקף מבחינה סמנטית הוא תרגול טוב ושומר את הדפים יותר בעתיד הוכחה. אבל בסוף זה תלוי בך.