מבנה נכון של האתר וההגדרה נכונה של תגי HTML מסייע לגוגל להבין את מבנה האתר.
לכן ישנה חשיבות רבה להגדרה נכונה של כל אזור באתר לפי התגים הבאים:
<footer> <main> <header>
<section> <nav>
ערכתנו לכם כאן מדריך מקיף כולל צילומי מסך איך להגדיר את התגים הנכונים באתר וגם סרטון קצר על ההגדרות תגי html.
<header>
ההדר בדרך כלל יופיע בכל האתר בחלקו העליון (האלמנטים שיהיו בהידר: תפריט ניווט, לוגו, טלפון, ובאתר חנות יהיה סל קניות ועוד.
<main>
החלק העוטף בתוכו את האלמנטים בשונים והוא ממוקם. בין ההידר לפוטר
<section>
אזור בתוך ה-main וכמובן שיכולים להיות כמה כאלה.
<footer>
החלק התחתון האתר בדרך כלל קיים בכל האתר
את כל האלמנטים הללו עוטף תג ה-<body>
יש תג נוסף שהוא מיועד לסיידבר סרגל צידי והתג שלו הוא:<aside>
<body>
<header>
<nav>
<main>
<section>
<section>
<section>
<footer>
1. ההידר <header>
איך מגדירים באלמנטור את ההידר?
1. מסמנים את הקונטיינר של ההידר
2. בפריסה (תפריט של אלמנטור) בוחרים באפשריות נוספות.
3. בוחרים ב-תגית html
4. לוחצים על החץ לפתיחת תפריט ובוחרים : header.
בדיקת ההגדרה הנכונה
1. ניגשים להידר ומציגים אותו בחלון חדש.
2. לוחצים F12 או לחילופין קליק ימני בעכבר ובחלונית שנפתחת בוחרים בדיקה.
3. בוחרים ב-חץ האפור ומסמנים את האלמנט הרצוי לבדיקה במקרה שלנו ההידר.
4. בודקים את הקוד.
2. בהידר לרוב נרצה לשים תפריט ניווט באתר <nav>
מבחינת קידום עדיף לא להתחכם ולבחור בוידג'ט המיועד לכך שנקרא: תפריט וורדפרס
בדיקת ההגדרה הנכונה
1. ניגשים להידר ומציגים אותו בחלון חדש.
2. לוחצים F12 או לחילופין קליק ימני בעכבר ובחלונית שנפתחת בוחרים בדיקה.
3. בוחרים ב-חץ האפור ומסמנים את האלמנט של התפריט שבנינו.
4. בודקים את הקוד.
הקוד צריך להיות בנוי כך שהוא מוגדר כתפריט navigator וכרשימה
<ul>
<li>
<li>
</ul>
3. פוטר <footer>
איך מגדירים באלמנטור את הפוטר?
1. מסמנים את הקונטיינר של הפוטר
2. בפריסה (תפריט של אלמנטור) בוחרים באפשריות נוספות.
3. בוחרים ב-תגית html
4. לוחצים על החץ לפתיחת תפריט ובוחרים : footer.
בדיקת ההגדרה הנכונה
1. ניגשים לפוטר ומציגים אותו בחלון חדש.
2. לוחצים F12 או לחילופין קליק ימני בעכבר ובחלונית שנפתחת בוחרים בדיקה.
3. בוחרים ב-חץ האפור ומסמנים את האלמנט הרצוי לבדיקה במקרה שלנו הפוטר.
4. בודקים את הקוד.
4. הגדרת אזור<section>
איך מגדירים באלמנטור אזור?
טיפ: בזמן פתיחת הקונטיינר בצעו את הפקודה באופן קבוע.
1. מסמנים את הקונטיינר הרצוי
2. בפריסה (תפריט של אלמנטור) בוחרים באפשריות נוספות.
3. בוחרים ב-תגית html
4. לוחצים על החץ לפתיחת תפריט ובוחרים : section
2 תגים נוספים הם:
<article>
הגדרת העמודה המיועדת למאמרים בעיקר בתבנית הפוסט.
<aside>
עמודה הנמצאת בצידי העמוד ומוצגת לאורך האתר, או בחלקים ממנו.
<body>
<header>
<nav>
<aside>
<article>
<footer>
5. הגדרת עמודה<aside>
איך מגדירים באלמנטור סיידבר sidbar?
טיפ: בזמן פתיחת הקונטיינר בצעו את הפקודה באופן קבוע.
1. מסמנים את העמודה הרצויה
2. בפריסה (תפריט של אלמנטור) בוחרים באפשריות נוספות.
3. בוחרים ב-תגית html
4. לוחצים על החץ לפתיחת תפריט ובוחרים : aside
6. הגדרת עמודה <article>
איך מגדירים באלמנטור סיידבר sidbar?
טיפ: בזמן פתיחת הקונטיינר בצעו את הפקודה באופן קבוע.
1. מסמנים את העמודה הרצויה
2. בפריסה (תפריט של אלמנטור) בוחרים באפשריות נוספות.
3. בוחרים ב-תגית html
4. לוחצים על החץ לפתיחת תפריט ובוחרים : aside
