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

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

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

מה זה Divs?

ב-HTML, האלמנט div (חלוקה) הוא מיכל ברמת הבלוק. אתה משתמש ב-div כדי לקבץ או לחלק רכיבי HTML למקטעים בדף אינטרנט. התחביר הוא כפי שמוצג להלן:

<div>
div>

היתרונות של שימוש ברכיבי HTML סמנטיים על פני Divs

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

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

1.

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

instagram viewer 

<גוּף>
<כּוֹתֶרֶת>


<h1> שלום שם!h1>


<ע>אני כותרתע>


כּוֹתֶרֶת>
גוּף>

2.

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

<כּוֹתֶרֶת>
<nav>


<ul>


<לי>קישורים לאתר שלילי>


<לי><אhref="#"> ביתא>לי>


<לי ><אhref="#"> עלינו א>לי>


ul>


nav>


<h1>האמור לעיל הוא חלק הניווט מהאתר שלי.h1>
כּוֹתֶרֶת>

בדפדפן זה ייראה כך:

אתה יכול להשתמש במודלים של פריסת CSS כגון CSS flexbox ליישר את

3.

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

<גוּף>
<כּוֹתֶרֶת>


<כותרת> עובדות האתר כותרת>


כּוֹתֶרֶת>


<רָאשִׁי>


<ע> אתר זה הוא הדגמה קצרה כיצד פועל התג הראשי.ע>


<ע> הוא מקיף את החלק של האתר בתוכן שימושי.ע>


רָאשִׁי>


<כותרת תחתונה>


<h3> זו כותרת תחתונה h3>


כותרת תחתונה>
גוּף>

זה נראה כך:

4.

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

<מאמר>
<h1>מוזר יותר מדמיוןh1>
<מאמר>


<h3>מבואh3>


<ע>האירועים והאנשים המופיעים בספר זה הם בדויים.ע>


מאמר>


<מאמר>


<h3>פרק אחדh3>


<ע> היום היה בהיר והשמש חייכה מהשמייםע>


מאמר>
מאמר>

זה נראה כך:

5.

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

html>
<html>


<סִגְנוֹן>


 גוּף{


 רקע-צבע:#abdbe3;


 }


 בצד {


 רוחב: 30%;


 ריפוד-שמאל: 0.5rem;


 שוליים-שמאליים: 1rem;


 flex: שמאלה;


 box-shadow: inset 5px 0 5px -5px ירוק;


 סגנון גופן: נטוי;


 צבע אדום;


 }


 בצד > p {


 שוליים: 0.5 רם;


סִגְנוֹן>


<גוּף>


<רָאשִׁי>


<h1> ציפורים אורגיםh1>


<ע>Ploceidae היא משפחה של ציפורים קטנות. רבים מהם נקראים אורגים, עופות אורגים, חוחיות אורגים ובישופים.ע>


<בַּצַד>


<ע>ממלכה: אנימליה
 פילום: Chordataע>


בַּצַד>


<ע>ברוב הסיווגים העדכניים, Ploceidae הוא קלאדה, לא כולל כמה ציפורים שהוכנסו היסטורית למשפחה. חלק מהדרורים, אך כולל את תת-המשפחה המונוטיפית Amblyospizinae.ע>


רָאשִׁי>


גוּף>
html>

6.

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

html>
<html>


<גוּף>


<h1>התנ"ךh1>


<סָעִיף>


<h2>מבואh2>


<ע>התנ"ך הוא אוסף של כתבי קודש דתיים המקודשים בנצרות, ביהדות, בשומרון. התנ"ך הוא אנתולוגיה – אוסף של טקסטים במגוון צורות – נכתב במקור בעברית, ארמית ויוונית קוינה.ע>


סָעִיף>


<סָעִיף>


<h2>פרק ראשון: בראשיתh2>


<ע>ספר בראשית הוא הספר הראשון של התנ"ך העברי ושל הברית הישנה הנוצרית. שמו העברי זהה למילה הראשונה שלו, בראשית. ספר בראשית הוא תיאור של בריאת העולם, ההיסטוריה המוקדמת של האנושות, של אבות ישראל ומקורות העם היהודי.ע>
סָעִיף>


גוּף>
html>

זה נראה כך:

7.

ה איורים עצמאיים כמו תמונות או דיאגרמות. איורים אלה מתייחסים לתוכן בעמוד הראשי. הדמויות מגיעות עם כיתובים שצוינו על ידי אֵלֵמֶנט. ה מסביר על מה התמונה. ה

,
,
והתוכן מייצג יחידה אחת.

html>
<html>


<גוּף>


<רָאשִׁי>


<סָעִיף>


<h1>חלקים של מחשבh1>


<ע> ישנם מספר חלקים שעובדים יחד כדי ליצור מחשבע>


<דמות>


<imgsrc="some-url.jpg"alt="עכבר מחשב">


<כיתוב תאנה>זה עכבר מחשבכיתוב תאנה>


דמות>


סָעִיף>


רָאשִׁי>


גוּף>
html>
זה נראה כך:

אתה יכול ללכת רחוק יותר וללמוד כיצד ליצור תמונות רספונסיביות ב-HTML.

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

html>
<html>


<גוּף>


<רָאשִׁי>


<סָעִיף>


<h1>חלקים של מחשבh1>


<דמות>


<imgsrc="some-url.jpg"alt="עכבר מחשב">


<כיתוב תאנה>זה עכבר מחשבכיתוב תאנה>


דמות>


סָעִיף>


רָאשִׁי>


<כותרת תחתונה>


<ע> מיוצר על ידי ComputerTech © 2023ע>


כותרת תחתונה>


גוּף>
html>

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

מדוע להשתמש ברכיבי HTML סמנטיים?

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

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