درس ۲۵ از ۴۵ · صفحه‌های وب

صفحه و متن

بیشتر صفحه‌ی وب متن است و HTML برای هر نوع متن عنصری دارد: سرتیتر، پاراگراف، نقل قول، تکه‌ای کد، یک تاریخ. در سلام همه را با نام‌های ساده‌ی فارسی می‌نویسید و مترجم آن‌ها را به برچسب‌های HTML تبدیل می‌کند. این درس هر کدام را با نمونه‌ای که اجرا می‌شود نشان می‌دهد.

ساختار یک صفحه

بلوک صفحه: همه‌ی چیزهایی را که در صفحه هست نگه می‌دارد. پیش از نخستین عنصر می‌توانید چیزهایی را تنظیم کنید که مال خود صفحه‌اند: عنوان متن زبانه‌ی مرورگر است، زبان و جهت می‌گویند متن چه زبانی و چه جهتی دارد، و پس زمینه، رنگ و دیگر ویژگی‌های سبک در همان سطح کل صفحه را رنگ می‌کنند. در پرونده‌ی فارسی زبان و جهت خودشان فارسی و راست‌به‌چپ‌اند و لازم نیست بنویسیدشان. هر چیز دیگر یک عنصر است. عنصر با نامش و یک دونقطه باز می‌شود و با پایان بسته می‌شود، و میانش ویژگی‌ها و عنصرهای فرزند می‌آیند، به شکل نام = مقدار و بدون ویرگول.

متن هر عنصر ویژگی محتوای آن است. این متن همیشه متن ساده است: < یا & درونش همان‌طور که هست دیده می‌شود و هرگز به نشانه‌گذاری تبدیل نمی‌شود، پس متنی که از کاربر می‌رسد نمی‌تواند صفحه را خراب کند. چند کلمه را در یک رشته بگذارید، یا با + رشته‌ای از ثابت‌ها و عددها بسازید.

web-text-article.salam
صفحه:
    عنوان = "یک نوشته‌ی کوتاه"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" بیشینه عرض = "34rem" فضا = "2rem auto" ارتفاع خط = 1.9 پایان
    گروه سرتیتر:
        h1: محتوا = "چرا صفحه‌ها را به سلام می‌نویسیم" پایان
        پاراگراف:
            محتوا = "منتشر شده در "
            زمان: زمان دقیق = "2026-10-26" محتوا = "۴ آبان ۱۴۰۵" پایان
        پایان
    پایان
    پاراگراف: محتوا = "صفحه درختی از عنصرهاست. هر عنصر یک نام دارد، چند ویژگی و گاهی فرزند." پایان
    سرتیتر: اندازه = ۲ محتوا = "یک زبان برای همه چیز" پایان
    پاراگراف: محتوا = "صفحه و برنامه‌ای که آن را می‌فرستد به یک زبان نوشته می‌شوند، پس نام اشتباه هنگام ترجمه گرفته می‌شود." پایان
    خط: پایان
    ریز: محتوا = "برای درس‌های سلام نوشته شده است." پایان
پایان

پیش‌نمایش بالا همان صفحه‌ای است که مترجم ساخته. خط سراسری یک قاعده‌ی سبک برای کل صفحه است و در درس‌های CSS دوباره می‌بینیدش؛ اینجا فقط به صفحه قلمی خوانا و پهنایی راحت می‌دهد.

سرتیترها

سرتیترها به صفحه طرح کلی می‌دهند. سرتیتر یک اندازه از ۱ تا ۶ می‌گیرد و h1 تا h6 همان‌ها با نام‌های HTML هستند. برای عنوان صفحه یک سرتیتر سطح ۱ بگذارید و بعد یکی‌یکی پایین بروید: سطح ۳ زیر سطح ۲ می‌آید، نه مستقیم زیر سطح ۱. مرورگرها سطح‌ها را با اندازه‌های کاهشی می‌کشند، ولی سطح را برای معنایش انتخاب کنید و اندازه را با CSS عوض کنید. وقتی سرتیتر زیرعنوان دارد، هر دو را مثل نمونه‌ی بالا در یک گروه سرتیتر بگذارید.

پاراگراف، شکست و خط

پاراگراف یک بلوک متن است و مرورگرها بالا و پایینش فاصله می‌گذارند. درون پاراگراف، شکست سطر تازه شروع می‌کند، که برای نشانی و شعر درست است و برای ایجاد فاصله نادرست، چون فاصله کار CSS است. خط میان دو موضوع یک خط افقی می‌کشد و شکست واژه جایی را نشان می‌دهد که اگر کلمه‌ی بلندی جا نشد می‌شود آن را برید.

پاراگراف می‌تواند کنار محتوای خودش عنصر فرزند هم داشته باشد. متن محتوا همیشه اول می‌آید و فرزندان به ترتیبی که نوشته‌اید پشت آن. پس جمله‌ای که وسطش کلمه‌ای پررنگ است، قسمت اول در محتوا می‌رود، بعد عنصر پررنگ، و بعد یک تکه با باقی جمله. تکه ظرفی بی‌طرف است: نه معنایی اضافه می‌کند و نه ظاهری، و برای همین عنصر مناسب سبک دادن به چند کلمه است.

تأکید و متن درون‌خطی

عنصرهای درون‌خطی میان یک سطر متن می‌نشینند. چند تایشان در مرورگر شبیه هم‌اند و در معنا فرق دارند، و معنا چیزی است که صفحه‌خوان‌ها و موتورهای جستجو به کار می‌برند. قوی متن مهم است و پررنگ فقط حروف پررنگ. تاکید تأکید گفتاری است، واژه‌ای که بلندتر می‌گویید، و کج صدایی دیگر است، مثل واژه‌ای بیگانه. برجسته آنچه را همین حالا به کار می‌آید روشن می‌کند، خط خورده آنچه را دیگر درست نیست نشان می‌دهد، و ریز برای نوشته‌ی ریز است. زیرنویس و بالانویس متن را برای فرمول بالا و پایین می‌برند. کد، صفحه کلید، نمونه خروجی و متغیر چهار راه نوشتن درباره‌ی رایانه‌اند.

web-text-inline.salam
صفحه:
    عنوان = "متن درون‌خطی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 2 پایان
    پاراگراف:
        محتوا = "فرمول آب H"
        زیرنویس: محتوا = "2" پایان
        تکه: محتوا = "O است و انرژی E = mc" پایان
        بالانویس: محتوا = "2" پایان
        تکه: محتوا = ". " پایان
        قوی: محتوا = "هرگز" پایان
        تکه: محتوا = " آب " پایان
        تاکید: محتوا = "دوم" پایان
        تکه: محتوا = " را ننوشید. برای ذخیره " پایان
        صفحه کلید: محتوا = "Ctrl + S" پایان
        تکه: محتوا = " را بزنید یا در کد " پایان
        کد: محتوا = "save()" پایان
        تکه: محتوا = " را صدا کنید. " پایان
        برجسته: محتوا = "این بخش برجسته شده است." پایان
    پایان
پایان

عنصر را برای آنچه متن هست انتخاب کنید، نه برای ظاهرش. ظاهر را در CSS یک‌جا عوض می‌کنید، اما معنا با متن می‌ماند، و خواننده‌ای که صفحه‌ی شما را نمی‌بیند، مثل یک صفحه‌خوان، به آن تکیه دارد.

نقل قول، کد و متن پیش‌قالب

نقل قول نقل قول کوتاهی است که میان جمله می‌آید و مرورگر دورش گیومه می‌گذارد. نقل قول بلند نقل قول درازتری است که از متن اطرافش جدا می‌ایستد. هر دو می‌توانند ویژگی منبع نقل را با نشانی منبع بگیرند، و نام اثر به‌عنوان عنصر نام یک اثر مثل کتاب یا فیلم است. برای فهرستی که هر فاصله و هر رفتن‌به‌سطرش مهم است، پیش‌قالب را به کار ببرید: متنش را با قلم هم‌عرض نشان می‌دهد و چیدمان را دقیقاً نگه می‌دارد. رفتن به سطر بعد را درون رشته با \n بنویسید.

web-text-quote.salam
صفحه:
    عنوان = "نقل قول و کد"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    نقل قول بلند:
        منبع نقل = "https://example.com/essay"
        محتوا = "هر چیز را تا جای ممکن ساده کنید، اما ساده‌تر از آن نه."
    پایان
    پاراگراف:
        محتوا = "از "
        نام اثر: محتوا = "جستاری درباره‌ی طراحی" پایان
        تکه: محتوا = "، به گفته‌ی او: " پایان
        نقل قول: محتوا = "کوچک آغاز کن" پایان
        تکه: محتوا = "." پایان
    پایان
    پیش‌قالب:
        محتوا = "تابع ریشه:\n    سرچاپ \"درود\"\nپایان"
        پس زمینه = "#f3f4f6"
        فاصله = "12px"
        گردی کادر = "8px"
    پایان
پایان

ویرایش، تاریخ و کوته‌نوشت

حذف شده و افزوده آنچه برداشته شد و آنچه گذاشته شد را نشان می‌دهند و هر دو زمان دقیق و منبع نقل می‌پذیرند. زمان یک تاریخ یا ساعت را به زبان آدم‌ها در متنش و به شکل ثابت در زمان دقیقش برای برنامه‌ها نگه می‌دارد، و داده همین کار را برای هر مقدار دیگر می‌کند. کوته‌نوشت شکل کاملش را در عنوان می‌گذارد و تعریف واژه‌ای را که جمله تعریفش می‌کند علامت می‌زند.

web-text-edits.salam
صفحه:
    عنوان = "ویرایش‌ها و کوته‌نوشت‌ها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 2 پایان
    پاراگراف:
        محتوا = "جلسه از "
        حذف شده: زمان دقیق = "2026-10-26" محتوا = "دوشنبه" پایان
        تکه: محتوا = " به " پایان
        افزوده: زمان دقیق = "2026-10-26" محتوا = "سه‌شنبه" پایان
        تکه: محتوا = " منتقل شد." پایان
    پایان
    پاراگراف:
        تعریف: محتوا = "سلام" پایان
        تکه: محتوا = " برای شما " پایان
        کوته‌نوشت: عنوان = "برگه‌های سبک آبشاری" محتوا = "CSS" پایان
        تکه: محتوا = " و " پایان
        کوته‌نوشت: عنوان = "زبان نشانه‌گذاری ابرمتن" محتوا = "HTML" پایان
        تکه: محتوا = " می‌نویسد." پایان
    پایان
    پاراگراف:
        محتوا = "بها: "
        خط خورده: محتوا = "۲۰۰ هزار" پایان
        تکه: محتوا = " " پایان
        داده: مقدار = "150" محتوا = "۱۵۰ هزار" پایان
    پایان
پایان

جهت‌های آمیخته و آوانما

در صفحه‌ی فارسی اغلب نامی انگلیسی هست و در صفحه‌ی انگلیسی نامی فارسی. مرورگرها ترتیب چنین متنی را با یک الگوریتم استاندارد تعیین می‌کنند که معمولاً درست کار می‌کند، اما نامی که لب جمله بیفتد باز هم می‌تواند نقطه و ویرگول را به سمت اشتباه بکشد. متنی را که جهتش معلوم نیست در جداساز جهت بگذارید تا جدا از همسایه‌هایش چیده شود. جهت اجباری ابزار زمخت‌تری است: یک جهت را به زور تحمیل می‌کند، هر چه نویسه‌ها بگویند. آوانما یک حاشیه‌ی کوچک، معمولاً تلفظ، بالای متن اصلی می‌گذارد.

web-text-direction.salam
صفحه:
    عنوان = "جهت‌های آمیخته"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" ارتفاع خط = 2 پایان
    پاراگراف:
        محتوا = "نظر از "
        جداساز جهت: محتوا = "Sara" پایان
        تکه: محتوا = " و از " پایان
        جداساز جهت: محتوا = "علی" پایان
        تکه: محتوا = "." پایان
    پایان
    پاراگراف:
        محتوا = "اجباری: "
        جهت اجباری: جهت = "چپ به راست" محتوا = "سلام ۱۲۳" پایان
    پایان
    پاراگراف:
        آوانما:
            محتوا = "東京"
            متن آوانما: محتوا = "Tōkyō" پایان
        پایان
    پایان
پایان

مرجع: همه‌ی عنصرهای متن

هر عنصر زیر با یک نمونه‌ی کوتاه آمده است. هر جا عنصری ویژگی مخصوص خودش دارد، زیر آن فهرست شده، و ویژگی‌هایی که همه‌ی عنصرها دارند در درس سرصفحه و ویژگی‌های همگانی هستند. نمونه‌ها را مترجم بررسی کرده است، پس هر کدام را می‌توانید درون یک بلوک صفحه: بگذارید. نام‌های انگلیسی هم در هر پرونده کار می‌کنند، اما درس‌های فارسی از نام‌های فارسی استفاده می‌کنند.

سرتیتر (English: heading; HTML: <h1>)

سرتیتر. ویژگی اندازه سطح آن را از ۱ (بزرگ‌ترین و مهم‌ترین) تا ۶ تعیین می‌کند. موتورهای جستجو و صفحه‌خوان‌ها طرح کلی صفحه را از روی سرتیترها می‌سازند، پس برای هر صفحه یک سرتیتر سطح ۱ بگذارید و سطح‌ها را جا نیندازید.

سرتیتر: اندازه = ۲ محتوا = "داستان ما" پایان
ویژگیکار آننمونه
اندازه
size
سطح سرتیتر، یک عدد صحیح از ۱ تا ۶. بدون آن سرتیتر سطح ۱ است و عددی بیرون از این بازه به نزدیک‌ترین سطح بریده می‌شود، پس ۷ سطح ۶ می‌دهد. [int]سرتیتر: اندازه = ۳ محتوا = "ساعت کار" پایان

h1 (HTML: <h1>)

سرتیتر سطح ۱ با نام HTML آن. سرتیتر با اندازه = ۱ دقیقاً همین برچسب را می‌سازد.

h1: محتوا = "خوش آمدید" پایان

h2 (HTML: <h2>)

سرتیتر سطح ۲، برای بخش‌های اصلی زیر عنوان صفحه.

h2: محتوا = "ویژگی‌ها" پایان

h3 (HTML: <h3>)

سرتیتر سطح ۳، برای زیربخش‌های یک بخش سطح ۲.

h3: محتوا = "سرعت" پایان

h4 (HTML: <h4>)

سرتیتر سطح ۴.

h4: محتوا = "سنجش‌ها" پایان

h5 (HTML: <h5>)

سرتیتر سطح ۵.

h5: محتوا = "روش کار" پایان

h6 (HTML: <h6>)

سرتیتر سطح ۶، کوچک‌ترین سطح.

h6: محتوا = "پانوشت" پایان

گروه سرتیتر (English: heading group; HTML: <hgroup>)

یک سرتیتر را با زیرعنوان یا شعارش گروه می‌کند تا در طرح کلی صفحه یک سرتیتر به حساب بیایند.

گروه سرتیتر:
    h1: محتوا = "سلام" پایان
    پاراگراف: محتوا = "زبانی برای وب و فراتر از آن" پایان
پایان

پاراگراف (English: paragraph; HTML: <p>)

یک بند از متن، پرکاربردترین عنصر. مرورگرها بالا و پایین آن فاصله می‌گذارند.

پاراگراف: محتوا = "سلام به کد بومی سریع ترجمه می‌شود." پایان

تکه (English: span; HTML: <span>)

ظرف درون‌خطی بی‌معنا و بدون ظاهر خودش. برای سبک دادن یا اسکریپت زدن روی چند کلمه از یک سطر به کار می‌رود.

پاراگراف:
    محتوا = "جمع کل "
    تکه: محتوا = "۴۲" رنگ = "crimson" پایان
پایان

شکست (English: break; HTML: <br>)

رفتن به سطر بعد درون یک پاراگراف. عنصر تهی است و محتوا نمی‌گیرد. برای شعر و نشانی درست است، نه برای ایجاد فاصله‌ی عمودی.

پاراگراف:
    محتوا = "سطر نخست"
    شکست: پایان
    تکه: محتوا = "سطر دوم" پایان
پایان

عنصر تهی است و فرزند نمی‌پذیرد

خط (English: line; HTML: <hr>)

جداکننده‌ی موضوعی که به شکل خط افقی کشیده می‌شود و تغییر موضوع میان دو بند را نشان می‌دهد.

خط: پایان

عنصر تهی است و فرزند نمی‌پذیرد

شکست واژه (English: word break; HTML: <wbr>)

جایی را نشان می‌دهد که اگر کلمه‌ی بلندی جا نشد مرورگر می‌تواند آن را ببرد. در حالت عادی دیده نمی‌شود.

پاراگراف:
    محتوا = "فرا"
    شکست واژه: پایان
    تکه: محتوا = "بنفش" پایان
    شکست واژه: پایان
    تکه: محتوا = "فروشی" پایان
پایان

عنصر تهی است و فرزند نمی‌پذیرد

پررنگ (English: bold; HTML: <b>)

بی‌آنکه بگوید مهم است، توجه را با حروف پررنگ جلب می‌کند، مثل نام محصول در یک نقد.

پاراگراف:
    محتوا = "طرح "
    پررنگ: محتوا = "حرفه‌ای" پایان
    تکه: محتوا = " را امتحان کنید." پایان
پایان

قوی (English: strong; HTML: <strong>)

متنی که اهمیت زیاد دارد. مرورگرها آن را پررنگ نشان می‌دهند و صفحه‌خوان‌ها ممکن است با تأکید بخوانندش.

پاراگراف:
    قوی: محتوا = "هشدار:" پایان
    تکه: محتوا = " این کار برگشت‌پذیر نیست." پایان
پایان

کج (English: italic; HTML: <i>)

متنی که از اطرافش در لحن یا صدا جداست، مثل یک اصطلاح فنی یا یک فکر. مرورگرها آن را کج نشان می‌دهند.

پاراگراف:
    محتوا = "واژه‌ی "
    کج: محتوا = "salam" پایان
    تکه: محتوا = " یعنی درود." پایان
پایان

تاکید (English: emphasis; HTML: <em>)

تأکید گفتاری، واژه‌ای که بلندتر می‌گویید. مرورگرها آن را کج نشان می‌دهند و صفحه‌خوان‌ها تأکید می‌کنند.

پاراگراف:
    محتوا = "گفتم "
    تاکید: محتوا = "هرگز" پایان
    تکه: محتوا = "." پایان
پایان

زیرخط (English: underline; HTML: <u>)

متنی با نشانه‌ای ناگفته، مثل علامت غلط املایی. برای پیوند به کارش نبرید، چون خواننده انتظار دارد متن زیرخط‌دار کلیک‌شدنی باشد.

پاراگراف:
    محتوا = "املای "
    زیرخط: محتوا = "غلت" پایان
    تکه: محتوا = " را ببینید." پایان
پایان

خط خورده (English: strikethrough; HTML: <s>)

متنی که دیگر درست یا به‌روز نیست و خطی روی آن کشیده می‌شود، مثل قیمت قدیمی.

پاراگراف:
    خط خورده: محتوا = "۲۰۰ هزار" پایان
    تکه: محتوا = " امروز ۱۵۰ هزار" پایان
پایان

ریز (English: small; HTML: <small>)

توضیح‌های کنار متن و نوشته‌ی ریز، مثل حق نشر و نکته‌های حقوقی. مرورگرها آن را یک اندازه کوچک‌تر نشان می‌دهند.

ریز: محتوا = "قیمت‌ها با مالیات است." پایان

برجسته (English: mark; HTML: <mark>)

متنی را که همین حالا به کار می‌آید برجسته می‌کند، مثل نتیجه‌ی یک جستجو. مرورگرها زمینه‌اش را زرد می‌کنند.

پاراگراف:
    محتوا = "نتیجه برای "
    برجسته: محتوا = "سلام" پایان
    تکه: محتوا = ": ۱۲ صفحه" پایان
پایان

زیرنویس (English: subscript; HTML: <sub>)

متنی که پایین‌تر از خط می‌نشیند، مثل فرمول‌های شیمی.

پاراگراف:
    محتوا = "H"
    زیرنویس: محتوا = "2" پایان
    تکه: محتوا = "O" پایان
پایان

بالانویس (English: superscript; HTML: <sup>)

متنی که بالاتر از خط می‌نشیند، مثل توان و علامت پانوشت.

پاراگراف:
    محتوا = "E = mc"
    بالانویس: محتوا = "2" پایان
پایان

کد (English: code; HTML: <code>)

تکه‌ی کوتاهی از کد رایانه میان متن. مرورگرها از قلم هم‌عرض استفاده می‌کنند.

پاراگراف:
    محتوا = "برای چاپ "
    کد: محتوا = "سرچاپ" پایان
    تکه: محتوا = " را صدا بزنید." پایان
پایان

صفحه کلید (English: keyboard; HTML: <kbd>)

متنی که کاربر تایپ می‌کند، معمولاً یک کلید یا میان‌بر.

پاراگراف:
    محتوا = "برای ذخیره "
    صفحه کلید: محتوا = "Ctrl + S" پایان
    تکه: محتوا = " را بزنید." پایان
پایان

نمونه خروجی (English: sample; HTML: <samp>)

خروجی نمونه‌ی یک برنامه، با قلم هم‌عرض.

پاراگراف:
    محتوا = "برنامه این را چاپ کرد: "
    نمونه خروجی: محتوا = "سلام دنیا" پایان
پایان

متغیر (English: variable; HTML: <var>)

نام یک متغیر در فرمول یا در متن برنامه‌نویسی. مرورگرها آن را کج نشان می‌دهند.

پاراگراف:
    محتوا = "مساحت برابر است با "
    متغیر: محتوا = "w" پایان
    تکه: محتوا = " ضربدر " پایان
    متغیر: محتوا = "h" پایان
پایان

کوته‌نوشت (English: abbreviation; HTML: <abbr>)

کوته‌نوشت یا سرواژه. شکل کامل آن را در عنوان بگذارید تا وقتی نشانگر روی آن می‌ماند دیده شود.

کوته‌نوشت: عنوان = "زبان نشانه‌گذاری ابرمتن" محتوا = "HTML" پایان

تعریف (English: definition; HTML: <dfn>)

واژه‌ای که جمله برای تعریف کردنش نوشته شده است.

پاراگراف:
    تعریف: محتوا = "سلام" پایان
    تکه: محتوا = " زبانی کامپایلی با زبان صفحه‌ی درونی است." پایان
پایان

نام اثر (English: cite; HTML: <cite>)

نام یک اثر، مثل کتاب، فیلم یا مقاله. برای نام آدم‌ها نیست.

پاراگراف:
    محتوا = "من "
    نام اثر: محتوا = "شازده کوچولو" پایان
    تکه: محتوا = " را دوست داشتم." پایان
پایان

نقل قول (English: quote; HTML: <q>)

نقل قول کوتاهی که درون یک بند می‌ماند. مرورگرها دورش گیومه می‌گذارند.

پاراگراف:
    محتوا = "گفت "
    نقل قول: محتوا = "به زودی می‌بینمت" پایان
    تکه: محتوا = " و رفت." پایان
پایان
ویژگیکار آننمونه
منبع نقل
cite
نشانی صفحه‌ای که نقل قول از آن آمده. نمایش داده نمی‌شود، اما ابزارها می‌توانند آن را بخوانند. [url]نقل قول: منبع نقل = "https://example.com/talk" محتوا = "کمتر بیشتر است" پایان

نقل قول بلند (English: block quote; HTML: <blockquote>)

نقل قول بلندتری که از متن اطرافش جدا شده، معمولاً با تورفتگی.

نقل قول بلند:
    محتوا = "سادگی بالاترین پیچیدگی است."
پایان
ویژگیکار آننمونه
منبع نقل
cite
نشانی منبع نقل قول. [url]نقل قول بلند: منبع نقل = "https://example.com/essay" محتوا = "ساده‌اش کن." پایان

پیش‌قالب (English: preformatted; HTML: <pre>)

متنی که فاصله‌ها و رفتن‌به‌سطر‌های خود را دقیقاً نگه می‌دارد و با قلم هم‌عرض نشان داده می‌شود. برای فهرست کد و طرح‌های نوشتاری درست است.

پیش‌قالب: محتوا = "سطر اول\n    سطر دوم" پایان

زمان (English: time; HTML: <time>)

یک تاریخ یا ساعت. متن خوانا هر چیزی می‌تواند باشد و زمان دقیق مقدار دقیق را برای برنامه‌ها می‌دهد.

زمان: زمان دقیق = "2026-10-26" محتوا = "۴ آبان ۱۴۰۵" پایان
ویژگیکار آننمونه
زمان دقیق
datetime
تاریخ یا ساعت به شکل ماشین‌خوان، مثل 2026-10-26 یا 2026-10-26T09:30. [datetime]زمان: زمان دقیق = "2026-10-26T09:30" محتوا = "نه و نیم صبح" پایان

داده (English: data; HTML: <data>)

متن خوانا را به مقداری پیوند می‌دهد که برنامه می‌تواند به کار ببرد، مثل شماره‌ی کالا. مقدار الزامی است.

داده: مقدار = "4021" محتوا = "چای سبز" پایان

الزامی: value

ویژگیکار آننمونه
مقدار
value
مقدار ماشین‌خوان. الزامی است. [string]داده: مقدار = "7" محتوا = "هفت" پایان

حذف شده (English: deleted; HTML: <del>)

متنی که از سند برداشته شده. مرورگرها خطی روی آن می‌کشند.

پاراگراف:
    محتوا = "جلسه ساعت "
    حذف شده: محتوا = "۵" پایان
    افزوده: محتوا = "۶" پایان
    تکه: محتوا = " است." پایان
پایان
ویژگیکار آننمونه
منبع نقل
cite
نشانی صفحه‌ای که می‌گوید چرا متن برداشته شد. [url]حذف شده: منبع نقل = "https://example.com/changes" محتوا = "متن قدیمی" پایان
زمان دقیق
datetime
زمان برداشته شدن متن، به شکل تاریخ یا تاریخ و ساعت. [datetime]حذف شده: زمان دقیق = "2026-10-26" محتوا = "متن قدیمی" پایان

افزوده (English: inserted; HTML: <ins>)

متنی که به سند اضافه شده. مرورگرها زیرش خط می‌کشند.

افزوده: محتوا = "تازه در این نگارش" پایان
ویژگیکار آننمونه
منبع نقل
cite
نشانی صفحه‌ای که می‌گوید چرا متن اضافه شد. [url]افزوده: منبع نقل = "https://example.com/changes" محتوا = "متن تازه" پایان
زمان دقیق
datetime
زمان اضافه شدن متن، به شکل تاریخ یا تاریخ و ساعت. [datetime]افزوده: زمان دقیق = "2026-10-26T09:30" محتوا = "متن تازه" پایان

آوانما (English: ruby; HTML: <ruby>)

حاشیه‌نویسی برای خط‌های شرق آسیا و جز آن، یک راهنمای کوچک تلفظ بالای متن اصلی. خود متن اصلی و عنصرهای متن آوانما را نگه می‌دارد.

آوانما:
    محتوا = "漢"
    متن آوانما: محتوا = "han" پایان
پایان

متن آوانما (English: ruby text; HTML: <rt>)

متن کوچک حاشیه‌ی یک آوانما.

آوانما:
    محتوا = "東京"
    متن آوانما: محتوا = "Tōkyō" پایان
پایان

فقط درون: ruby

پرانتز آوانما (English: ruby parenthesis; HTML: <rp>)

پرانتزهایی که فقط مرورگرهای ناتوان از کشیدن آوانما نشان می‌دهند تا حاشیه باز هم به شکل 漢(han) خوانده شود.

آوانما:
    محتوا = "漢"
    پرانتز آوانما: محتوا = "(" پایان
    متن آوانما: محتوا = "han" پایان
    پرانتز آوانما: محتوا = ")" پایان
پایان

فقط درون: ruby

جداساز جهت (English: isolate; HTML: <bdi>)

یک تکه متن را از جهت متن اطرافش جدا می‌کند. راه امن گذاشتن نامی با جهت نامعلوم، مثل نام کاربر، میان یک جمله است.

پاراگراف:
    محتوا = "کاربر "
    جداساز جهت: محتوا = "Sara" پایان
    تکه: محتوا = " نظر گذاشت." پایان
پایان

جهت اجباری (English: direction override; HTML: <bdo>)

جهت متنش را به زور تعیین می‌کند و به نویسه‌ها کاری ندارد. جهت الزامی است.

جهت اجباری: جهت = "راست به چپ" محتوا = "abc 123" پایان

الزامی: dir

خودتان امتحان کنید

  • صفحه‌ی یک دستور پخت بنویسید با سرتیتر سطح ۱، فهرست شماره‌دار مراحل و یک زمان برای مدت پخت.
  • به نوشته‌ی بالا یک نقل قول بلند با منبع نقل اضافه کنید و جمله‌ای را که می‌خواهید دیده شود برجسته کنید.
  • یک قوی را به پررنگ و یک پررنگ را به قوی عوض کنید. آیا صفحه فرق کرد؟ یک صفحه‌خوان چه می‌کرد؟