עד עכשיו, מסמכי ה-HTML שכתבנו לא היו מלאים וככאלה לא היו עוברים ולידציה. כדי שמסמכי HTML יהיו תקינים הם צריכים להיות במבנה מוגדר, עם רישא וסיפא מתאימים. בו נראה וננתח דוגמה למסמך HTML מלא כזה:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Excerpt from the Three Musketeers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Excerpt from the Three Musketeers</h1>
<p>
A young man--we can sketch his portrait at a dash. Imagine
to yourself a Don Quixote of eighteen; a Don Quixote without
his corselet, without his coat of mail, without his cuisses;
a Don Quixote clothed in a woolen doublet, the blue color of
which had faded into a nameless shade between lees of wine
and a heavenly azure; face long and brown; high cheek bones,
a sign of sagacity; the maxillary muscles enormously
developed, an infallible sign by which a Gascon may always
be detected, even without his cap--and our young man wore a
cap set off with a sort of feather; the eye open and
intelligent; the nose hooked, but finely chiseled. Too big
for a youth, too small for a grown man, an experienced eye
might have taken him for a farmer's son upon a journey had
it not been for the long sword which, dangling from a
leather baldric, hit against the calves of its owner as he
walked, and against the rough side of his steed when he was
on horseback.
</p>
<p>
Taken from <a
href="http://www.gutenberg.org/etext/1257">the
Project Gutenberg page</a>.
</p>
</body>
</html>
היא נראית כך:
עכשיו למספר הסברים בנוגע לדוגמה:
הצהרת ה-"DOCTYPE" בהתחלה מצהירה שסוג המסמך הוא "XHTML 1.0 Transitional". יש לשם הצהרה כזאת בהתחלה כדי שאפשר יהיה לזהות על פי איזה תקן המסמך נכתב.
ניתן להבחין שמהסמך מתחיל מתגית פתיחה <html>
ומסתיים בתגית </html>
במסמך XML יש לכלול את כל התוכן בתוך תגית פתיחה ותגית סיום. במקרה של מסמך HTML מדובר בתגית <html>
.
לתגית <html>
מקבלת מספר תכונות. הראשונה שבהן היא "xmlns" המצהירה על מרחב-השמות של ברירת המחדל של המסמך. במסמכי XHTML ניתן לכלול מרחבי שמות אחרים, המאפשרים שילוב של תגיות של תחבירי XML אחרים. כרגע לא צריך להתעמק בזה יותר מדי.
התכונות האחרות ("lang") מצהירות על שפת המסמך, במקרה שלנו אנגלית אמריקאית. ראוי לציין שכדאי שהן lang והן xml:lang תקבענה ביחד.
האלמנט <head>
מכיל כותר למסמך ומכיל מעט מטה-מידה הקשור אליו.
האלמנט <title>
שחייב להימצא בתוך <head>
מכיל טקסט (מחוסר תיוג) המהווה כותרת למסמך - ניתן לראות שהוא מופיע בכותר החלון של הדפדפן.
רצוי מאוד לתת כותרת בעלת משמעות למסמך כדי שאנשים ותוכניות מחשב (כמו מנועי חיפוש) יוכלו לדעת מייד מה תכליתו.
מטרת תגית ה-<meta>
המסוימת הזאת היא להצהיר שקידוד המסמך הוא "utf-8". יש שימושים אחרים לתגיות "meta" ואת חלקם נראה בהמשך.
ניתן גם לראות שהקו הנטוי ("/") בסוף התגית אומר למפענח שהתגית סוגרת את עצמה. זה כמו לומר:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
אבל מאפשר תאימות טובה יותר לדפדפנים ישנים.
האלמנט <body>
מכיל את גוף הטקסט של המסמך ומה שיוצג למשתמש.
האלמנט <h1>
מכיל כותרת המוצגת בגוף הטקסט. יש גם את <h2>
, <h3>
עד <h6>
. מומלץ לחלק את המסמך לחלקים על-ידי הכותרות כך שידעו מה משמעות כל חלק.
כדי לוודא שהמסמך שכתבתם (או חוללתם) הוא תקין, רצוי לבצע לו אימות (Validation) באמצעות מאמתים מקוונים:
חשוב לבצע אימות כדי לוודא שטעויות בדפים אינן גוררות התנהגות לא רצויה של הדפדפנים השונים. עוד על המוטיבציה לאימות, ניתן למצוא בדפים הבאים:
במידה שדף ה-HTML זמין באינטרנט בפומבי, ניתן לשלוח קישור אליו למאמת. אחרת, ניתן להעלות את התוכן המקומי למאמת כדי לקבל עליו דו"ח.
ככה נראה אימות של דף כתקין בעזרת המאמת: