צור קשר
מאמרים אחרונים
תגובות אחרונות
כיצד מעצבים טקסט מוזח, מודגש, קטן או גדול?
עיצוב סגנונות טקסט ב-HTML5
תגיות העיצוב משמשות לעיצוב טקסט, למשל בולד, מוזח או טקסט בסגנון פלט מחשב.
כך מגדירים בקוד סוגי עיצוב שונים של הטקסט:
<em>this text is emphasized</em>
<i>this text is italic</i>
<small>this text is small</small>
<strong>this text is strong</strong>
Some Text<sub>this text is subscript</sub>
Some Text<sup>this text is superscript</sup>
<ins>this is an inserted text</ins>
<del>this is a deleted text</del>
this text is emphasized
this text is italic
this text is small
this text is strong
Some Textthis text is subscript
Some Textthis text is superscript
this is an inserted text
כך יוצרים טקסט בסגנון פלט מחשב:
<kbd>this is keyboard text</kbd>
<samp>this is sample computer code</samp>
<var>this is a variable</var>
<pre>this is a preformatted text</pre>
this is computer code textthis is keyboard text
this is sample computer code
this is a variable
this is a preformatted text
ואלו הן תגיות נוספות להגדרת טקסט (ראשי תיבות, ציטוטים וכו'):
<address>this is a contact information for the document's owner or author</address>
<bdo dir="ltr">this defines the text's direction</bdo>
this defines the text's direction
this is a quotation block
this is a short quotation
this is a citation
this is a definition term
שים לב: בדפדפנים שונים, יתכן כי העיצוב יראה מעט אחרת.
הסמנטיקה של תגיות העיצוב
מעבר לעיצוב עצמו, לרוב התגיות קיימת הסמנטיקה (המשמעות) של מה שהיא מייצגת: ציטוט, פלט מחשב, הבלטה של הטקסט וכן הלאה.
המלצתנו היא שלא להשתמש בתגיות עיצוב למטרת העיצוב עצמו, אלא למטרות סמנטיות בלבד. כלומר, אם יש לנו בטקסט ציטוט, אז נשתמש בתגית cite שנועדה למטרה זו, אבל במקרה שסתם רוצים לעצב את הטקסט שיהיה יפה ובולט יותר, מומלץ שלא להכניס תגיות עיצוב לקוד, אלא להשתמש ב-CSS. כל תאור עיצובי רצוי שיעשה בנפרד מהקוד, בקובץ CSS חיצוני, וזאת על מנת לבצע הפרדה של קוד סמנטי מעיצוב. הפרדה זו נחוצה על מנת לייצר קוד קריא, קומפקטי, כזה שנטען במהירות על הדפדפן ונסרק בקלות על ידי העכביש של גוגל.
