מבט לתוך נכון HTML5 סמנטיקה
אם אתה מתכנן היטב את המבנה של מסמכי HTML שלך, אתה יכול מחשבים מסייעים להבין את משמעות התוכן שלך. תחביר תקין חשוב, אבל זה בעצם מספק רק מנתחי, מנועי חיפוש, techonologies עוזר עם חבורה חסרת משמעות של נתונים.
אם תשפר את זרימת העבודה הקדמית שלך עם תשומת לב לסמנטיקה, תוכל ליצור תוכן איכותי יותר שמושך אליו יותר מבקרים. סמנטיקה היא לימוד משמעות, בהקשר רחב יותר זה ענף של לוגיקה ובלשנות.
בעולם של פיתוח אתרים אנו מדברים על תוכן סמנטי כאשר מחשבים מבינים את המבנה של מסמך, ואת תפקידים של האלמנטים שבתוכו. אם אנחנו רוצים ליצור סמנטיקה נכונה, אנחנו צריכים עמוק להבין את המבנה של התוכן שלנו יכולות של טכנולוגיות Frontend.
אז מה הם היתרונות המוחשיים? סמנטיקה נכונה פירושה א תוכן לחיפוש יותר שמוביל א דירוג מנוע החיפוש טוב יותר. כמו כן, אנו מגדילים את הנגישות, כמו טכנולוגיות מסייעות כגון קוראי מסך יכולים לפרש טוב יותר את משמעות התוכן שלנו.
יש הרבה טכניקות פיתוח חזיתי שונות שמאפשרות למפתחים להשיג מבנה דף סמנטי. הודעה זו תספק לך הקדמה קצרה לתוך תגי HTML סמנטי ואת הרעיון של מתאר המסמך.
תגי HTML סמנטיים ולא סמנטיים
הרעיון של סמנטיקה הוא לא חדש כמו שזה נראה, זה היה קיים הרבה לפני עידן HTML5. המונח של רשת סמנטי נטבע כבר בשנת 2001 על ידי סר טים ברנרס לי. תחת “רשת סמנטית” הוא התכוון לאינטרנט של נתונים שיכולים להיות מעובדים על ידי מכונות.
זה אומר בעיקר רכיבי HTML נפרדים צריכים להיות תפקידים מבניים מובחנים שלהם. על פי ההגדרה של W3C “אלמנט סמנטי מתאר בבירור את משמעותו הן לדפדפן והן למפתח”.
אלמנטים סמנטיים לפני HTML5
יסודות סמנטיים היו קיימים גם לפני HTML5, רק ברוב המקרים היזמים לא היו מודעים לכך כמה מהתגים שהם השתמשו בהם היו סמנטיים. רק לחשוב על או ה
התפקידים שלהם ברורים הן לנו והן לסוכן המשתמש: פשוט מכיל טופס, בדיוק כמו
ה
מסודר ו רשימות לא מסודרות, פסקאות, תגי כותרת h1-h6 כל האלמנטים הסמנטיים שקדמו ל- HTML5.
אלמנטים לא סמנטיים
אלמנטים לא סמנטיים אין להם משמעות מיוחדת, היחסים ההלכתיים ביניהם הם רק אשליה. הדוגמאות הנפוצות ביותר של תגי HTML שאינם סמנטיים הן וה תגים.
אם האתר שלך אי פעם תפס את המחלה הנוראה של דלקת, אתה יודע על מה אני מדבר. כן. Divs הם לא בהכרח לא נכון, אבל דלקת צריך להיות נלחם אם אנחנו רוצים לכתוב קוד HTML מתוחזק, מודולרי ומשמעותי.
מגזין Smashing יפה מסביר מה הבעיה האמיתית היא עם שימוש מופרז ובלתי סביר של אין שום קשר בין השניים, בדיוק כמו במקרה של אין פאניקה אם אתה עדיין מרגיש מחובר HTML5 הציג אלמנטים סמנטיים חדשים רבים המאפשרים ארגון תוכן קל. הם לא רק עוזרים לך לארגן תוכן ברמה של המסמך כולו (ראה פרטים בחלק הבא), אלא גם בתוך בלוקי טקסט, כמו תגים inline. ככל הנראה הפופולרי ביותר ברמת הטקסט הם סמלים סמנטיים ראה רשימה זו עבור כל האלמנטים הסמנטיים ברמת הטקסט הנמצאים בשימוש כרגע. מתאר המסמך הוא המבנה של מסמך HTML. הוא מראה כיצד אלמנטים קשורים זה לזה. מתאר המסמך נוצר אך ורק על ידי רכיבי מיפוי, כגון כותרות, כותרות טבלאות, כותרות טפסים ואחרים בגרסאות קודמות של HTML כגון HTML4.01 ו- XHTML. ב HTML5 אלגוריתם outlining שופרה על ידי אלמנטים חדשים החתך, כלומר: יש אלמנט HTML 5 חמישי, אבל זה לא חדש, זה אם ברצוננו ליצור מתווה מסמך מובנה היטב, עלינו לשים לב לכללים הבאים: 1. אלמנט החתך החיצוני הוא תמיד 2. מקטעים ב- HTML5 יכולים להיות מקוננים. 3. כל סעיף יש היררכיה כותרת משלו. כל אחד מהם (אפילו את הקטע המקונן ביותר) יכול להיות 4. בעוד מתאר המסמך מוגדר בעיקר על ידי 5 אלמנטים חתך, הוא גם צריך כותרות ראוי לכל סעיף. 5. זה תמיד האלמנט הכותרת הראשונה (תן לזה להיות h1 או כותרת כותרת דרגה נמוכה יותר) המגדיר את הכותרת של סעיף נתון. תגי הכותרת הבאים בתוך אותו סעיף צריכים להיות יחסית לזה. (אם הכותרת הראשונה היא h3 בתוך אלמנט חתך, אל תניח h3 לאחר מכן). 6. הסעיפים שהוגדרו על ידי 7. כל סעיף (גוף, סעיף, מאמר, בצד, nav) יכול להיות משלהם בואו נראה דוגמה למתאר מסמך סמנטי כדי לראות כיצד הוא פועל. קוד הדוגמה שלנו יוביל למבנה המסמכים הבא: והנה הקוד עם חתך סמנטי תקין: הנה הלוגו שלנו ואת הסיסמה. סעיף 1 בחלק הראשון סעיף 2 בחלק הראשון סעיף 1 בחלק השני סעיף 2 בחלק השני אם תעיין בקטע הקוד שלמעלה, תראה שכותרות עליונות ותחתונות הן אופציונליות, נוכל לבחור באופן חופשי אם אנחנו רוצים להשתמש בהן או לא, אבל מומלץ מאוד לכלול תמיד כותרת עבור כל מקטע, אחרת הקטע יהיה “ללא כותרת” בתבנית המסמך. למרבה המזל יש כלים רבים בכל רחבי האינטרנט המאפשרים לנו לבדוק את קווי המתאר של המסמך, הפעם נשתמש בכלי Outliner של html5.org. אם נכניס את קטע הקוד שלנו לטופס שסופק על-ידי המתכנן, ולחץ על המקש “תאר את זה!” כפתור, אנו רואים את התוצאה הבאה: זה מסמך מתאר של קוד המדגם שלנו, זה איך מנועי החיפוש רואים את זה, וקוראי המסך לקרוא אותו למשתמשים לקויי ראייה שלהם. זה סמנטי, בנוי היטב, ואין שום דבר מגעיל “ללא כותרת” סעיפים בו. אם אתה רוצה לראות איך קטע ללא שם נראה כמו ב- Outliner פשוט למחוק כמה תגי הכותרת בקוד לדוגמה. תגי HTML סמנטיים וקווי מתאר של מסמכים הם רק חלק קטן מסמנטיקה באינטרנט. התוכן של דף אינטרנט יכול להיות אפילו משמעותי יותר בעזרת פרוטוקול הנגישות WAI-ARIA, ונתונים מובנים שניתן להשתמש בהם יחד עם פרוטוקול RDFa, microdata או סימון JSON-LD. תג זה עובד באותה צורה, רק על הרמה.-s, אם כי אתה לא צריך לגמרי תעלה אותם. הם עדיין הבחירה הטובה ביותר עבור קיבוץ תוכן אך ורק למטרות עיצוב ובמקומות נופש אחרים. טקסט סמנטיקה ב HTML5
ו , אבל הם היו קיימים גם לפני HTML5. בין אלמנטים סמנטיים חדשים inline נוכל למצוא למשל את , התג עבור קריאות אנושיות, ו ל טקסט מודגש.מתאר המסמך ב- HTML5
ל סעיפים מקובצים סביב נושא מסוים ל מלא או עצמאי כגון פוסט בבלוג או רכיב widget ל בלוקים ניווט ל תוכן משלים כגון sidebars. תג. ה תגים הם גם חדשים, אבל הם לא יוצרים חלקים חדשים במסמך, הם מחלקים את התוכן בתוך הקטעים. זה אומר ש כל אלמנט קטע (גוף, מאמר, סעיף, ניווט בצד) יכול להיות כותרת עליונה ותחתונה.טיפים תוכן מובנה מבחינה סמנטית
תג.h1 תג., וה התגים אינם שייכים למתווה הראשי של מסמך ה- HTML, הם בדרך כלל לא ניתנים בתחילה על ידי טכנולוגיות מסייעות. (כגון לוגו, שם המחבר, תאריכים, מידע meta וכו ') ואת הכותרת התחתונה (זכויות יוצרים, הערות, קישורים וכו') של אותו סעיף.דוגמה: מתאר סמנטי
ברוכים הבאים לאתר שלנו!
כותרת המאמר
כתוביות של מאמר
החלק הלוגי הראשון (למשל "תיאוריה")
חלק משנה אחרים בסעיף הראשון
החלק הלוגי השני (למשל "תרגול")
היבטים אחרים של אינטרנט סמנטיקה
