הסברים על אלמנטים HTML5 סמנטיים

תִכנוּת

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

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

מהם אלמנטים סמנטיים?

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

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

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

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

ככל שהתקדם השימוש בפריסות שתוכננו ויזואלית, המתכנתים החלו להשתמש בתג כללי "לא סמנטי" כמו . לעתים קרובות הם היו מעניקים לאלמנטים אלה classאו idתכונה לתיאור מטרתם. לדוגמה, במקום זה לעתים קרובות נכתב כ .

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

רשימת אלמנטים סמנטיים חדשים

האלמנטים הסמנטיים שנוספו ב- HTML5 הם:

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

דוגמה לפריסת אלמנטים סמנטיים על ידי w3schools

אלמנטים סמנטיים פריסת דף מאת w3schools

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

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

בעוד שבלוק קוד שני זה משתמש באלמנטים שאינם סמנטיים:

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

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

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

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

ו

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

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

  1. מאמר נועד להפצה עצמאית או לשימוש חוזר.
  2. קטע הוא קיבוץ נושאים של תוכן.
Top Stories
News
 Story 1 Story 2 Story 3   
Sport
 Story 1 Story 2 Story 3

ו

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

Company A

    
    
     
  • Home
    • 
     
  • About
    • 
     
  • Contact us
    •

אלמנט יש להשתמש בהם אתה רוצה כתבה ראשית עם כותרות משנה אחת או יותר.

Heading 1
Subheading 1
Subheading 2

זכור שהאלמנט יכול להכיל כל תוכן, אך האלמנט יכול להכיל רק כותרות אחרות, כלומר

ל

וכולל .

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

This is a sidebar, for example a terminology definition or a short background to a historical figure.

לפני HTML5, התפריטים שלנו נוצרו באמצעות

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

    
       
      
        
    • Home
      • 
        
    • About
      • 
        
    • Contact us
      •

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

    ©Company A

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

    ©Company A Date

    האלמנט מאפשר תאריך חד משמעי ISO 8601 יצורף גרסה קריאה מועדת.

    Tuesday, 31 October 2017

    למה לטרוח ? בעוד שבני אדם יכולים לקרוא זמן שיכול להבהיר את הקשר בדרך הרגילה, המחשבים יכולים לקרוא את תאריך ISO 8601 ולראות את התאריך, השעה ואזור הזמן.

    ו

    מיועד לכריכת תוכן התמונה שלך סביבו, וכיתוב התמונה שלך.

    Shadow of Mordor Cover art for Middle-earth: Shadow of Mordor

    למידע נוסף על האלמנטים החדשים של HTML5:

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