תגית section ב-HTML: איך מחלקים עמוד לבלוקים

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

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

• מה זו תגית section ומתי משתמשים בה;
• איך כותבים אותה ואילו מאפיינים שימושיים לה;
• במה היא שונה מ-div, ‏article, ‏main ומתגיות סמנטיות אחרות;
• איך היא משפיעה על נגישות, SEO וחיפוש מבוסס AI;
• איך מגדירים תגיות סמנטיות ב-Webflow, ‏WordPress ו-Wix;
• אילו טעויות נפוצות כדאי להימנע מהן ואיך בודקים את המבנה.

מה זו תגית section ולמה היא צריכה

תגית section מסמנת חלק תמטי בעמוד: קבוצת תוכן שמאוחדת סביב נושא אחד ובדרך כלל יש לה כותרת משלה. היא חלק מקבוצת התגיות הסמנטיות שנכנסו לשפה עם HTML5, יחד עם header, ‏nav, ‏main, ‏article, ‏aside ו-footer.

דוגמאות טיפוסיות לבלוקים שמתאימים ל-section באתר עסקי:

• תיאור החברה או הפרויקט;
• רשימת שירותים;
• בלוק המלצות של לקוחות;
• תהליך העבודה בשלבים;
• שאלות נפוצות;
• פרטי התקשרות ומפה.

כלומר, section מתאימה בכל פעם שרוצים לקבץ תוכן לפי משמעות ולסמן חלק שעומד בפני עצמו מבחינה לוגית. הכלל החשוב ביותר: לכל section צריכה להיות כותרת, בדרך כלל H2 או H3. אם הכותרת לא מופיעה על המסך מסיבות עיצוביות, היא עדיין צריכה להופיע בקוד, כי בלעדיה החלק מאבד את המשמעות שלו. על בניית היררכיית הכותרות עצמה כתבנו בהרחבה במדריך כותרות H1–H6 ו-SEO.

תחביר ומאפיינים של תגית section

section היא תגית זוגית: פותחים אותה, מכניסים פנימה כותרת ותוכן, וסוגרים. בדפדפן היא מתנהגת כמו בלוק רגיל: תופסת את כל רוחב ההורה ומתחילה בשורה חדשה. אין לה עיצוב מובנה, ולכן בלי CSS המשתמש לא יראה שום הבדל בינה לבין div. ההבדל כולו במשמעות.

מאפיינים שימושיים

התגית תומכת בכל המאפיינים הגלובליים של HTML. שלושה מהם שימושיים במיוחד:

• id – מזהה ייחודי שאפשר לקשר אליו. כך עובד תפריט עוגנים בדף נחיתה: לחיצה על "המחירים שלנו" גוללת אל ה-section עם id="pricing". מזהה ברור באנגלית גם מקל על מעקב באנליטיקה.
• class – שם מחלקה לעיצוב ב-CSS. בשיטות כמו Client-First של Finsweet נהוג לתת לכל section מחלקה שמתארת את התפקיד שלה, למשל section_testimonials.
• aria-labelledby או aria-label – נותנים לחלק שם נגיש עבור קוראי מסך. aria-labelledby מפנה ל-id של הכותרת הקיימת בתוך החלק, ו-aria-label מוסיף שם טקסטואלי כשאין כותרת גלויה. עדיף להשתמש בכותרת אמיתית, ו-aria-label להשאיר למקרים שבהם אין ברירה.

section ושפת העמוד

באתר בעברית התגית עובדת בדיוק כמו בכל שפה אחרת. כיוון הכתיבה מוגדר ברמת העמוד (dir="rtl" על תגית html), וכל section יורשת אותו. אם יש באתר חלק באנגלית, למשל ציטוט של לקוח מחו"ל, אפשר להגדיר על ה-section הספציפית lang="en" ו-dir="ltr", וקורא המסך יעבור להגייה הנכונה.

עיצוב section ב-CSS

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

• עצבו לפי מחלקה, לא לפי תגית. כלל CSS שחל על כל section באתר ישבור משהו בפעם הבאה שמוסיפים חלק חדש. מחלקה כמו section_services בטוחה יותר.
• הפרידו בין section לקונטיינר. הדפוס הנפוץ: ה-section פרוסה לכל רוחב המסך ונושאת את הרקע, ובתוכה div עם רוחב מקסימלי שמרכז את התוכן. כך הרקע מגיע עד הקצוות והטקסט נשאר קריא במסכים רחבים.
• ריווח אחיד. הגדירו מראש שלושה או ארבעה גדלים של ריווח אנכי לחלקים, והשתמשו רק בהם. כך העמוד נראה מסודר גם כשמוסיפים בלוקים בהמשך.
• מאפיינים לוגיים. באתר בעברית עדיף להשתמש ב-padding-inline ו-margin-inline-start במקום left ו-right. כך אותו עיצוב יעבוד נכון גם בגרסה האנגלית של האתר.
• כותרת מוסתרת בצורה נכונה. אם צריך כותרת שלא נראית על המסך, אל תשתמשו ב-display:none, כי אז גם קורא המסך לא יקרא אותה. השתמשו במחלקה מוכרת כמו visually-hidden או sr-only, שמסתירה את הטקסט מהעין ומשאירה אותו זמין לטכנולוגיות מסייעות.

section, ‏div, ‏article או main: מה ההבדל

הבלבול הנפוץ ביותר הוא בין התגיות האלה. הנה החלוקה המעשית:

• div – קונטיינר בלי משמעות. הוא לא אומר כלום על התוכן שבתוכו ומשמש לקיבוץ אלמנטים לצורכי עיצוב: עטיפה לכרטיס, לגריד או לעמודה.
• section – חלק תמטי בתוך העמוד. מאחד תוכן סביב נושא אחד, ותמיד צריכה להיות לו כותרת.
• article – יחידת תוכן עצמאית, שאפשר להוציא מהעמוד ולהציב במקום אחר והיא עדיין תהיה מובנת. מתאים לפוסט בבלוג, כרטיס מוצר, המלצה בודדת או ידיעה.
• main – התוכן המרכזי של העמוד, הסיבה שבגללה המשתמש הגיע. בעמוד יש main אחד גלוי בלבד, ובתוכו יושבים ה-section וה-article.

המבחן הפשוט

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

ומה עם header, ‏footer, ‏nav ו-aside

• header – החלק הפותח של העמוד או של חלק בתוכו: לוגו, תפריט ראשי, כותרת.
• nav – בלוק ניווט עיקרי: התפריט הראשי, פירורי לחם, תוכן עניינים. לא כל קבוצת קישורים צריכה nav, רק ניווט משמעותי.
• aside – תוכן משלים שקשור לעמוד אבל לא חלק מהזרימה הראשית: קישורים למאמרים קשורים, באנר צד, הערת שוליים.
• footer – החלק הסוגר: פרטי התקשרות, קישורים משפטיים, הצהרת נגישות, זכויות יוצרים. גם ל-article יכול להיות footer משלו, למשל עם תאריך ושם הכותב.

ה-header וה-footer של האתר כולו נחשבים לאזורים עיקריים (landmarks) רק כשהם לא נמצאים בתוך main, ‏section או article. זה פרט טכני, אבל הוא משנה את מה שקורא מסך מציג למשתמש.

איך נראה מבנה סמנטי של עמוד עסקי

ניקח דף נחיתה טיפוסי של קליניקה או משרד עורכי דין ונראה איך הוא מתחלק:

• header עם לוגו, ובתוכו nav עם התפריט הראשי וכפתור וואטסאפ;
• main, ובתוכו:
• section "מי אנחנו" עם כותרת H2;
• section "השירותים שלנו", ובתוכה כרטיסי שירות. כל כרטיס יכול להיות article אם הוא מוביל לעמוד שירות נפרד, או div פשוט אם הוא רק חלק מהרשימה;
• section "מה אומרים עלינו", וכל המלצה בתוכה היא article;
• section "שאלות נפוצות" עם שאלות בכותרות H3;
• section "צור קשר" עם טופס;
• footer עם כתובת, טלפון, קישור להצהרת הנגישות ולמדיניות הפרטיות.

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

איך section משפיעה על נגישות

משתמשים בקוראי מסך כמעט אף פעם לא קוראים עמוד מההתחלה ועד הסוף. הם קופצים בין כותרות ובין אזורים עיקריים, בדומה לאופן שבו אנחנו סורקים עמוד בעיניים. ב-NVDA, ב-JAWS וב-VoiceOver יש קיצורי מקלדת ורשימות ניווט בדיוק לשם כך.

כותרות הן הבסיס

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

מתי section הופכת ל-landmark

section לבד, בלי שם נגיש, לא מופיעה ברשימת האזורים העיקריים. כשנותנים לה שם דרך aria-labelledby או aria-label, היא מקבלת את התפקיד region והופכת לאזור שאפשר לקפוץ אליו ישירות. אל תעשו את זה לכל section בעמוד: עשרים אזורים בשם "אזור" רק מבלבלים. שמרו את זה לחלקים חשובים באמת, כמו טופס יצירת קשר או מחשבון מחירים.

ומה אומר החוק בישראל

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

האם תגיות סמנטיות משפיעות על SEO

התשובה הכנה: Google לא מציגה את התגית section כגורם דירוג בפני עצמו. החלפה של כל ה-div ב-section לא תקפיץ אתכם לעמוד הראשון. אבל למבנה סמנטי יש השפעה עקיפה ומשמעותית:

• הבנת התוכן. מנועי חיפוש מחלקים עמוד לחלקים כדי להבין במה כל חלק עוסק. כותרת ברורה בראש כל section, עם התוכן הרלוונטי מתחתיה, מקלה על המשימה.
• תוצאות עשירות. תוכן מסודר בחלקים עם כותרות שאלה-תשובה קל יותר להפוך לנתונים מובנים, למשל schema מסוג FAQPage. על שליטה במה שמופיע בתוצאות כתבנו במדריך על סניפט בתוצאות החיפוש.
• קישורי עוגן. section עם id ברור מאפשרת לקשר ישירות לחלק בעמוד, גם מתוך האתר וגם מבחוץ.
• חוויית משתמש. עמוד מסודר נקרא בקלות, הגולשים נשארים בו ומוצאים את מה שחיפשו. זה מה שמנועי חיפוש מנסים לתגמל.

חיפוש מבוסס AI ו-GEO

מערכות כמו AI Overviews של Google, ‏ChatGPT ו-Perplexity שולפות מהעמוד קטעים קצרים ומשתמשות בהם בתשובה. קשה יותר לשלוף קטע מתוך עמוד שבו הכול מעורבב. עמוד שבו כל חלק עונה על שאלה אחת, עם כותרת ברורה ותשובה מיד מתחתיה, נותן לכלים האלה קטעים מוכנים. אין הבטחה שזה יביא ציטוט, אבל זה בסיס טוב. על כך במדריך שלנו ל-GEO, אופטימיזציה לחיפוש AI.

איך מגדירים תגיות סמנטיות ב-Webflow, ‏WordPress ו-Wix

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

Webflow

ל-Webflow יש אלמנט Section מובנה שמפיק תגית section. לכל Div Block אפשר גם לבחור תגית אחרת בהגדרות האלמנט: header, ‏footer, ‏nav, ‏main, ‏section, ‏article, ‏aside ועוד. הבעיה הנפוצה היא שמעצבים בונים את כל העמוד מ-Div Block ולא משנים את התגית אף פעם. בבדיקה של מבנה העמוד ב-Navigator אפשר לראות מהר איפה חסרה סמנטיקה. ב-פרויקטי Webflow אנחנו מגדירים את זה כבר בשלב הבנייה, יחד עם מבנה Client-First.

WordPress

בעורך הבלוקים של WordPress, לבלוק Group יש בהגדרות המתקדמות שדה לבחירת אלמנט HTML: div, ‏header, ‏main, ‏section, ‏article, ‏aside או footer. ב-Elementor, לקונטיינר יש הגדרת HTML Tag שמאפשרת לבחור section, ‏article, ‏header, ‏footer ועוד. ערכות נושא מבוססות בלוקים כבר מפיקות header, ‏main ו-footer בתבניות, אבל את החלקים בתוך התוכן צריך להגדיר בעצמכם. עוד על בניית אתר בפלטפורמה הזאת במדריך שלנו ל-WordPress.

Wix

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

טעויות נפוצות בשימוש ב-section

• section במקום כל div. כשכל עטיפה הופכת ל-section, התגית מאבדת את המשמעות שלה. section בלי כותרת היא בדרך כלל div בתחפושת.
• section בלי כותרת. כלי בדיקה כמו הוולידטור של W3C יתריעו על כך, וקורא המסך לא יקבל שום רמז במה עוסק החלק.
• כותרות שנבחרות לפי גודל. H4 בחלק הראשון כי "הוא נראה יפה יותר קטן". את הגודל קובעים ב-CSS, ואת הרמה קובע המבנה.
• כמה main בעמוד. קורה בתבניות שמעתיקים מהן בלוקים. main גלוי צריך להיות אחד.
• section כעטיפה לכל העמוד. את התפקיד הזה ממלא main. section שעוטפת הכול לא מוסיפה מידע.
• הסתמכות על אלגוריתם המתאר הישן. פעם המפרט תיאר מצב שבו כל section מתחילה רמת כותרות חדשה, וכל חלק יכול לפתוח ב-H1. דפדפנים וקוראי מסך מעולם לא יישמו את זה, וב-2022 זה הוסר מהמפרט. היום ההיררכיה נקבעת רק לפי רמות הכותרות עצמן: H1 אחד, אחריו H2 וכן הלאה.
• aria-label על כל section. יוצר עומס במקום סדר. שם נגיש מגיע רק לחלקים שבאמת צריכים לקפוץ אליהם.

איך בודקים את המבנה הסמנטי של האתר

אין צורך להיות מפתחים כדי לבדוק את המצב. הנה תהליך קצר:

• מבט בקוד. קליק ימני על העמוד ו"בדוק" (Inspect) בכרום. אם רואים שורה ארוכה של div בלי header, ‏main, ‏section ו-footer, יש כאן מה לשפר.
• עץ הנגישות. בכלי המפתחים של Chrome יש לשונית Accessibility שמציגה את העמוד כפי שקורא מסך מבין אותו, כולל אזורים וכותרות.
• מבנה כותרות. תוספים כמו HeadingsMap מציגים את כל הכותרות בעמוד כעץ. קפיצות ברמות או חלקים בלי כותרת יבלטו מיד.
• ולידציה. שירות הבדיקה של W3C בכתובת validator.w3.org מתריע על section בלי כותרת ועל שגיאות מבנה.
• בדיקות נגישות אוטומטיות. Lighthouse בתוך Chrome, ‏axe DevTools ו-WAVE מוצאים חלק גדול מהבעיות. הם לא מחליפים בדיקה ידנית, אבל נותנים נקודת פתיחה טובה.
• ניסיון אמיתי. הפעילו NVDA בווינדוס או VoiceOver במק ובאייפון, ונסו לנווט בעמוד בעזרת קיצורי הכותרות והאזורים. חמש דקות כאלה מלמדות יותר מכל דוח.

תוכנית עבודה לאתר קיים

• מתחילים מהתבנית הראשית: header, ‏nav, ‏main ו-footer נכונים פעם אחת משפיעים על כל העמודים;
• עוברים לעמודים החשובים ביותר מבחינת לידים: עמוד הבית, עמודי השירות ודפי הנחיתה;
• בכל עמוד מסמנים את החלקים התמטיים ב-section ובודקים שלכל אחד יש כותרת ברמה נכונה;
• בתבניות של בלוג ומוצרים מוודאים שכל פריט הוא article;
• אחרי השינויים מריצים שוב את הבדיקות ומעדכנים את הצהרת הנגישות במקרה הצורך.

איך RJL Studio בונה אתרים עם מבנה סמנטי נכון

ב-RJL Studio מבנה סמנטי הוא חלק מהבנייה, לא תיקון בדיעבד. כבר בשלב התכנון אנחנו מחלקים כל עמוד לחלקים עם כותרות ברורות, ובשלב הפיתוח מגדירים את התגיות הנכונות ב-Webflow, ‏WordPress או Wix. לפני ההשקה אנחנו בודקים את מבנה הכותרות, את האזורים העיקריים ואת עץ הנגישות, כדי שהאתר יהיה מובן לגולשים, לקוראי מסך, ל-Google ולכלי חיפוש מבוססי AI.

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

שאלות נפוצות על תגית section ומבנה סמנטי

האם חייבים כותרת בתוך כל section?

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

מה ההבדל בין section ל-div במילה אחת?

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

האם החלפת div ב-section תשפר את הדירוג ב-Google?

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

אפשר לשים section בתוך section?

כן, אם יש היגיון תוכני. למשל, section "השירותים שלנו" עם H2, ובתוכה כמה section לכל שירות עם H3. חשוב שהיררכיית הכותרות תתאים לקינון. אם הקינון נעשה רק בשביל העיצוב, השתמשו ב-div.

האם תגיות סמנטיות חשובות לעמידה בתקן הנגישות?

כן. תקן ישראלי 5568 מבוסס על WCAG, שדורש שמבנה התוכן והקשרים בין חלקיו יהיו זמינים גם לטכנולוגיות מסייעות. כותרות נכונות ואזורים עיקריים כמו header, ‏nav, ‏main ו-footer הם חלק מרכזי מזה. תוסף נגישות לבדו לא פותר בעיות מבנה בקוד.