HTML היא שפה פשוטה, אבל אוצר המילים שלה גדול ממה שאתה עשוי להבין. למד הכל על כמה מהתגים היותר יוצאי דופן שבהם אתה יכול להשתמש.

טייק אווי מפתח

  • השתמש ותגים כדי ליצור קטעים הניתנים להרחבה, מתן חוויה ידידותית למשתמש ושמירה על עיצוב נקי.
  • הדגש תוכן חשוב באמצעות התג, תוך הפניית תשומת לב למילות מפתח, ביטויים או תוצאות חיפוש בדף האינטרנט שלך.
  • הוסף משמעות סמנטית לתאריכים ולשעות באמצעות התג, שיפור הנגישות למשתמשים עם מוגבלויות המשתמשים בקוראי מסך.

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

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

1.
ו

תאר לעצמך שיש לך מידע או תוכן נרחב שאינך רוצה להציף קורא בו מיד. ה ו תגים באים להציל!

תגים אלה פועלים יחד כדי ליצור קטע הניתן להרחבה עם כותרת או סיכום שמשתמשי האתר שלך יכולים ללחוץ כדי לחשוף. כברירת מחדל, התוכן בתוך אלמנט הפרטים לא יוצג, ושומר על הדף שלך מסודר ומאורגן.

המבקרים שלך יכולים ללחוץ בקלות על הסיכום כדי לגשת למידע הנסתר.

instagram viewer 
<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

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

2.

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

תכונה זו שימושית במיוחד כאשר אתה רוצה להדגיש מילות מפתח, ביטויים חשובים או תוצאות חיפוש בדף האינטרנט שלך.

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

לדוגמה, אם לאתר שלך יש פונקציונליות חיפוש, אתה יכול להשתמש ב- תג כדי להדגיש את התאמות שאילתת החיפוש בתוצאות, מה שמקל על המשתמשים למצוא מידע רלוונטי.

3.

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

להיכנס ל תָג! זה מייצג קו חוצה ומציג כל תוכן בתוך האלמנט עם קו באמצע.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

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

4.

כאשר אתה רוצה להוסיף משמעות סמנטית לתאריכים ושעות בתוכן שלך, ה תג שימושי.

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

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

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

5.

ניהול טקסט במספר שפות בדף האינטרנט שלך יכול לפעמים להיות מאתגר, במיוחד כאשר כל חלק דורש עיצוב שונה.

ה תג נחלץ לעזרה על ידי בידוד חלק מהטקסט שהדפדפן צריך להתייחס אליו בצורה שונה עקב דרישות שפה שונות.

<p>
<bdi>5,000bdi> people attended the conference.
p>

בדוגמה זו, ה אלמנט עוטף את המספר 5,000. זה מבטיח שאם הטקסט שמסביב הוא בשפה אחרת או דורש עיצוב שונה, הוא לא יפריע למספר.

6. , ,

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

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

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

7.

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

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

בדוגמה שלמעלה, כתובת האתר הארוכה כוללת א אלמנט המאפשר לדפדפן לחלק אותו לשתי שורות במידת הצורך, תוך שמירה על פריסת התוכן שמסביב.

8. ו

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

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

דוגמה זו משתמשת ב- תג כדי להציג את 2 ב H2O כמנוי, בעוד ה תגיות מציגות את המעריכים במשפט פיתגורס.

9.

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

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

<metervalue="75"min="0"max="100">75%meter>

בדוגמה זו, ה אלמנט מייצג ציון בחינה של 75%.

10.

כשצריך צור תיבת דו-שיח או שכבת-על של חלון עבור מודלים אוֹ אינטראקציות מוקפצות מתנהגות היטב, ה תג היא הדרך ללכת. אתה יכול להשתמש ב לִפְתוֹחַ תכונה כדי להציג את תיבת הדו-שיח כברירת מחדל.

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

בדוגמה זו, תיבת דו-שיח פשוטה המכילה פסקה וכפתור סגור מראה מתי הדף נטען, הודות ל- לִפְתוֹחַ תְכוּנָה. אתה יכול להתאים אישית את התוכן וההתנהגות של תיבת הדו-שיח באמצעות JavaScript לאינטראקציות מתקדמות יותר.

11.

להשתמש ב תג כדי לקבץ אפשרויות קשורות בתוך a רכיב נפתח. זה מאפשר לך לארגן ולסווג אפשרויות לניווט ובחירה קלים יותר.

  • התג הוא רכיב מכיל שמקבץ קשורים תגים בתוך a אֵלֵמֶנט.
  • זה עוזר לארגן אפשרויות על ידי יצירת קיבוץ חזותי או סיווג בתפריט הנפתח.
  • ה תג דורש תכונה תווית, המציינת את השם או הכותרת של קבוצת האפשרויות.
  • זה יכול להכיל אחד או יותר תגיות כרכיבי צאצא שלה, המייצגים את האפשרויות האישיות בתוך הקבוצה.

לדוגמה:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

דוגמה זו מקבצת את התפריט הנפתח לבחירה לשני חלקים: אַסְיָה, ו אֵירוֹפָּה. כל קבוצה מכילה תגים המייצגים מדינות שונות באזור זה.

שפר את המיומנות שלך בפיתוח אתרים

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

הוספת תגים אלה למערך הכישורים שלך משפרת את האינטראקטיביות, הנגישות ומייעלת את תהליך פיתוח האינטרנט. זכור, למרות שהם אולי לא מוכרים, יש להם השפעה משמעותית על המסע שלך כמפתח אינטרנט.