WebDesign.Org.il

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

אז בואו ונתחיל. מה היא סמנטיקה? :

se·man·tics
n. (used with a sing. or pl. verb)

1. Linguistics. The study or science of meaning in language.
2. Linguistics. The study of relationships between signs and symbols and what they represent. Also called semasiology.

סמנטיקה היא המשמעות שקיימת ומאוגדת בכל אלמנט בעמוד.
ישנם 2 קבוצות טאגים בשפת הHTML (בין כל החלוקות השונות): אלמנטים תצוגתיים ואלמנטים קונספטואלים.
אלמנט קונספטואלי מייצג משמעות. טאג Heading מכיל בתוכו המון משמעות. קלאס ThisIsABigTitle איננו מייצג כלום חוץ מהגדרה ויזואלית גרפית לדפדפן כיצד לרנדר את הטקסט שיושב בתוך אלמנט HTML זה.

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

עמודים סמנטיים מקודמים משמעותית בגוגל. למה?
כאשר גוגל מגיע לאתר שלכם, או יותר נכון העכביש שלו- Spider, הוא סורק את העמוד. ומה הוא בדיוק סורק? את מבנה העמוד. כיצד מוגדר מבנה העמוד? האלמנטים כפי שהם מופיעים לו בעת מעבר על כל Char & Char.

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

תביטו במקטע קוד קטן זה: מבנה הHTML של הטבלה איננו מאגד בתוכו את משמעות מבנהו.
עכביש גוגל שיעבור על מבנה זה יתייחס לטקסט שיושב בתוך span class=title כטקסט רגיל אשר איננו שונה במשמעותו מהטקסט שיושב בTD מתחתיו ומעוצב ע”י קלאס Text.

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

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

וסיבה אחרונה חביבה: זה קריא יותר.
פסקה זאת וקודמתה חוזרות על נקודות שהזכרתי כבר בעמוד על Block level & Inline. נכון. וכל זה כיוון שכתיבה לפי התקנים הינה סמנטית וקריאה יותר.
כאשר מפתח אחר בא לעמוד שאתם כתבתם, תהיו סמוכים ובטוחים שיהיה לו כלכך קל יותר להיכנס לנעליים שלכם. במקום לחפש ולנבור במסמכי CSS שלמים בנסיון להבין מה רציתם מהחיים שלו כשכתבתם קלאס כלשהוא אשר תיאר טקסט מסוים, הוא פשוט יראה את מבנה העמוד מול עיניו. הוא יראה כותרות, הוא יראה פסקאות, הוא יראה, כן כן, טבלאות (לא אמרתי שהן מוקצות מחמת מיאוס- הן פשוט יתארו לו באותו הרגע מידע טבולארי) בקיצור- הוא יראה את היררכיית המסמך לנגד עיניו- דבר שיקל עליו את החיים מאוד!

לקריאה נוספת ליד האח בערב חורף סגרירי וקריר

• Molly Holzschlag, או בשמה השני- הולי מולי, כתבה מאמר על סמנטיקה. מומלץ!
• HTML: More structural than semantic- כותרתו של פוסט קצר זה מטעה. כדאי לקרוא

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

Happy Coding