רכיבי HTML

רכיבמשמעות
‎<!DOCTYPE>‎ למעשה רכיב טיפוס המסמך אינו חלק מקוד ה html גופא אך הוא חיוני ביותר על מנת לספק לדפדפן מידע על גירסת ה html הנוכחית. מחרוזת תוים זו מכילה קישור אל מסמך מפורט ואין לנו צורך להתעמק בפרטים הרשומים שם. פשוט יש להעתיק ולהדביק את הרכיב הזה ישר בשורה הראשונה של הדף עוד לפני רכיב ה html . הגירסה המומלצת לשימוש היא XHTML 1.1 ולהלן הקוד: ‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">‎ .
‎<html></html>‎ רכיב השורש מציין כי דף זה הינו דף html . קוד ה html כולו נרשם בינות לתגיות הפתיחה והסגירה שלו. מחוץ לתגית זו מעליה נרשם טיפוס המסמך אשר אינו מהווה חלק מקוד ה html . רכיב השורש כולל בתוכו שני רכיבי משנה שהם רכיב הכותר (‎<head></head>‎) ורכיב הגוף (‎<body></body>‎). מאפיינים שימושיים הם xmlns‏ , id ו lang.
‎<head></head>‎ רכיב הכותר מכיל ברובו רכיבי נתונים אשר אינם מוצגים לגולש ומשמשים בעיקר את הדפדפן. רכיבי נתונים נוספים משמשים את מנועי החיפוש או אתרים מקשרים. קיים גם רכיב נתונים המוצג למשתמש. רכיבי הכותר החשובים הם title‏ , link ו meta. רכיבי כותר שימושיים נוספים הם style ו script .
‎<body></body>‎ רכיב הגוף מכיל ברובו רכיבי נתונים אשר מוצגים לגולש כגון טקסט, תמונה, שמע או חוזי. מאפיינים שימושיים הם class . רכיבי הגוף מעצבים לוגית את המסמך המוצג לגולש. קיימים רכיבי גוף ברמת התיבה אשר פועלים על תיבת לוגית שלימה במסמך. לאחר הצגת רכיב ברמת התיבה, יעבור הדפדפן לתחילת שורה חדשה. קיימים רכיבי גוף ברמת השורה הפועלים בתוך שורת הטקסט ממש. לאחר הצגת רכיב ברמת השורה, ישאר הדפדפן בסוף אותה השורה. רכיבים ברמת התיבה יכולים להכיל בתוכם רכיבים אחרים ברמת התיבה, כמו גם רכיבים ברמת השורה. רכיבים ברמת השורה יכולים להכיל בתוכם רכיבים אחרים ברמת השורה, כמו גם טקסט חופשי. טקסט חופשי יכול להיות כל תו יוניקוד חוקי פרט לתוים אשר עלולים לבלבל את הדפדפן כמו ‎<‎ או ‎>‎ אשר פותחים או סוגרים בהתאמה תגיות html . לצורך הצגת תוים מיוחדים אלה יש להשתמש בישויות html . ישות html הינה צירוף תוים מיוחד המחליף תו כלשהו אשר מפורש חזרה על ידי הדפדפן עבור הצגתו הנכונה. להצגת ‎<‎ או ‎>‎ נשתמש בישויות ‎&lt;‎ או ‎&gt;‎ קרי ampersand less than semicolon או ampersand greater than semicolon בהתאמה. קיימות ישויות html רבות עבור צרכים מיוחדים שונים ומגוונים.
רכיבי ה headמשמעות
‎<title></title>‎ רכיב ה title הינו רכיב חובה בתוך רכיב ה head . הטקסט הרשום בינות לתגיותיו מוצג לגולש ככותרת חלון הדפדפן. כאשר הגולש יוצר סימניה עבור דף זה, תוצג הסימניה בטקסט זה. מנועי החיפוש מסתייעים בטקסט זה לצורך פעולתם ומציגים אותו בתוצאותיהם כמו גם אתרים מקשרים כמו אתרי רשתות חברתיות המציגים טקסט זה, באם אין להם חלופה אחרת, בקישורם לאתר.
‎<link />‎ רכיב ה link יוצר קשר תפעולי בין דף זה לבין דפים חיצונים. הקשר השימושי הנפוץ הינו קשר אל דף סגנון חיצוני מטיפוס css . במקרה זה מאפיין הקשר rel יקבל את הערך stylesheet , מאפיין הטיפוס type יקבל את הערך text/css ומאפיין הייחוס href יקבל את שם ומיקום דף הסגנון, לדומה: ‎<link rel="stylesheet" type="text/css" href="yourStylesheet.css />‎ .
‎<meta />‎

רכיב ה meta מכיל נתונים אודות הנתונים, המשמשים לרוב את מנועי החיפוש אך לעיתים גם את הדפדפן.

המאפיין http-equiv יחד עם המאפיין content מסייעים לדפדפן ולמנועי החיפוש, להשלים מידע תקשורת http חסר אשר נחסם על ידי השרת.

  • על מנת לסייע לדפדפן לזהות תוכן דף html בקידוד utf-8 , נרשום ‎<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />‎ .
  • על מנת לסייע לדפדפן לזהות את השפה הטבעית למשל - עברית, נרשום ‎<meta http-equiv="Content-Language" content="he" />‎ .

המאפיין name יחד עם המאפיין content מסייעים למנועי החיפוש לפעולתם ולהצגת תוצאותיהם.

  • על מנת להציג למנוע החיפוש את מילות החיפוש החשובות לנו נרשום למשל ‎<meta name="keywords" content="your key words" />‎ .
  • על מנת לתת במפורש כותרת לקישור בדף תוצאות החיפוש או באתר רשת חברתית ללא תלות ברכיב ה title נרשום ‎<meta name="title" content="your title />‎ .
  • על מנת להציג תמצית קצרה בתוצאת החיפוש שלנו או באתר מקשר כמו אתר רשת חברתית נרשום למשל ‎<meta name="description" content="your short description" />‎ .
  • על מנת לבקש ממנוע החיפוש שלא יציג אותנו בתוצאת החיפוש או שלא יעקב אחר הקישורים היוצאים מדף זה נרשום ‎<meta name="robots" content="noindex,nofollow" />‎ .
  • קיימים עוד עשרות מאפיינים שונים אשר עשויים או שלא, להיות מוגדרים במנוע חיפוש כזה או אחר על פי מדיניותו.
‎<style></style>‎ רכיב ה style מגדיר את אופן הצגת הנתונים לגולש ברמת הדף. מומלץ להגדיר דף סגנון חיצוני מטיפוס css ברמת האתר כולו, המקושר בכל דף ודף באמצעות רכיב ה link אולם לעיתים ישנו צורך בסגנון שונה ברמת הדף וכל הגדרת סגנון שנוסיף בינות לתגיות ה style , תדרוס למעשה את ההגדרה לאותו פריט ברמת האתר. למשל ‎<style type="text/css">‎ . אם נדרש לשנות סגנון ברמת הפריט הבודד, נאלץ להוסיף לו את הסגנון כמאפיין במקום הדרוש (בינות לתגיות ה body) כדוגמת style="yourIndividualStyle"‎ . אם אין סיבה חזקה לוגית ליישום סגנון ברמת הפריט (או אפילו הדף), מומלץ לשמור את כל הגדרות הסגנון של האתר במקום אחד מרוכז, בדף הסגנון החיצוני, וזאת על מנת לתחזק את האתר בצורה יעילה ובו בזמן לעשותו אתר אחיד ומקצועי. אין להשתמש ברכיבים עיצוביים בתוך דף ה html . מקומם של העיצובים הוא רק ב css .
‎<script></script>‎ רכיב ה script מגדיר את אופן פעולתו הדינאמית של הדף. מומלץ להגדיר דף תסריט חיצוני מטיפוס js ברמת האתר כולו, המקושר בכל דף ודף הזקוק לו על ידי רכיב זה. על מנת לקשר דף תסריט javascript חיצוני (בשם yourScript.js), נרשום ‎<script type="text/javascript" src="yourScript.js"></script>‎ . אם נסתפק בקוד תסריט מקומי בדף נוסיף אותו בינות לתגיות ה script, ונסתפק במאפיין הטיפוס כמו בדוגמה ‎<script type="text/javascript">your javascript code</script>‎ . רכיב ה script יכול בצורה זו להופיע גם בינות לתגיות ה body במקומות רבים. בכל זאת ההמלצה היא לרכז את הקוד ב head .
רכיבי ה bodyמשמעות
‎<h1></h1>‎‏ ‎<h2></h2>‎‏ ‎<h3></h3>‎‏ ‎<h4></h4>‎‏ ‎<h5></h5>‎‏ ‎<h6></h6>‎ ששת רכיבי הכותרת מ h1 הראשית ביותר עד h6 המשנית ביותר, קרי header one עד header six. עלינו לסדר את הכותרות המוצגות בדף על פי סולם הדרגות ההגיוני עבור תוכן המסמך המוצג. יש לסדר את הכותרות כך שכותרת ראשית יותר תמיד מעל כותרת משנית ממנה על פי הלוגיקה של המסמך. אין להשתמש ברכיבים אלו משיקולים עיצוביים אלא למטרת הגדרה לוגית של כותרות במסמך. עיצובים יתבצעו בנפרד בחלק ה css העיצובי של המסמך. רכיבי הכותרת הינם רכיבים ברמת התיבה ויכולים להכיל רק רכיבים ברמת השורה כמו a‏ , span או img וטקסט חופשי.
‎<p></p>‎ רכיב הפיסקה p , קרי paragraph הוא רכיב ברמת התיבה אשר נועד להגדיר פיסקה לוגית במסמך. הטקסט בפיסקה יתפרס לאורך השורה ויגלוש לשורה הבאה באופן עצמאי. אין לשבור את שורת הטקסט עם רכיב ה br כיוון שרכיב זה חסר משמעות לוגית ובנוסף, אין אנו מתייחסים להפרדת המסך של הגולש בדף.
‎<ol></ol>‎ רכיב ה ol , קרי ordered list הוא רכיב ברמת התיבה אשר נועד להגדיר רשימה לוגית ממוספרת.
‎<ul></ul>‎ רכיב ה ul , קרי unordered list הוא רכיב ברמת התיבה אשר נועד להגדיר רשימה לוגית בלתי ממוספרת. שימושי ביותר בבניית תפריטים.
‎<li></li>‎ רכיב ה li , קרי list item הוא רכיב ברמת התיבה אשר נועד להגדיר פריט ברשימה לוגית. רכיב זה יבוא בינות לתגיות ה ol או ה ul .
‎<table></table>‎ רכיב הטבלה table הוא רכיב ברמת התיבה אשר נועד להגדיר טבלה לוגית. עבור עיצוב הדף יש להשתמש ברכיב ה div עם הגדרות css במקום ברכיב זה.
‎<tr></tr>‎ רכיב ה tr , קרי table row נועד להגדיר שורה לוגית חדשה בטבלה.
‎<td></td>‎ רכיב ה td , קרי table data מגדיר תא לוגי בודד בתוך השורה. המאפיין colspan מרחיב את התא למספר עמודות בטבלה. המאפיין rowspan מרחיב את התא למספר שורות בטבלה. למשל תא המתפרס לשתי עמודות ולשלוש שורות יוגדר ‎<td colspan="2" rowspan="3"></td>‎ .
‎<th></th>‎ רכיב ה th , קרי table header מגדיר תא כותרת לוגי בתוך השורה. המאפיין scope מסייע לקורא המסך לשייך תא כותרת לעמודת התאים שמתחתיו או לשורת התאים שאחריו כלומר ‎<th scope="col"></th>‎ או ‎<th scope="row"></th>‎ בהתאמה. מאפיינים נוספים הם colspan ו rowspan .