مبانی متن

مشابه نحوه‌ای که ویرایشگر متن شما سرتیترهای <h1> تا <h6> را به همراه روش‌های فراوان برای قالب‌بندی بخش‌های متن به شیوه‌های معنادار و بصری ارائه می‌دهد، HTML نیز مجموعه‌ای بسیار مشابه از عناصر معنایی و غیرمعنایی را برای معنا بخشیدن به نثر ارائه می‌دهد.

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

سرفصل‌ها، بازبینی‌شده

شش عنصر عنوان بخش وجود دارد، <h1> ، <h2> ، <h3> ، <h4> ، <h5> و <h6> ، که <h1> مهمترین و <h6> کمترین اهمیت را دارد. سال‌ها به توسعه‌دهندگان گفته می‌شد که عنوان‌ها توسط مرورگرها برای ترسیم کلی اسناد استفاده می‌شوند. این در ابتدا یک هدف بود، اما مرورگرها هرگز ویژگی‌های ترسیم کلی سند را پیاده‌سازی نکردند و الگوریتم پیشنهادی طرح کلی رسماً از مشخصات HTML حذف شد. با این حال، کاربران صفحه‌خوان به شدت به عنوان یک استراتژی کاوش برای یادگیری محتوای یک صفحه متکی هستند و با کلید h در میان عنوان‌ها پیمایش می‌کنند. اطمینان از اینکه سطوح عنوان به طور منطقی پیاده‌سازی شده‌اند - همانطور که یک سند را ترسیم می‌کنید - محتوای شما را قابل دسترس می‌کند و اکیداً توصیه می‌شود.

به طور پیش‌فرض، مرورگرها <h1> را به عنوان بزرگترین، <h2> را به عنوان کمی کوچکتر، و هر سطح عنوان بعدی را به عنوان پیش‌فرض کوچکتر می‌کنند. از لحاظ تاریخی، شیوه‌نامه‌های عامل کاربر همچنین اندازه فونت عناصر <h1> را که درون عناصر بخش‌بندی مانند <article> ، <aside> ، <nav> یا <section> قرار دارند، کاهش می‌دهند.

برخی از شیوه‌نامه‌های عامل کاربر شامل انتخابگرهای زیر (یا مشابه) بودند تا عناصر <h1> تودرتو را طوری سبک‌دهی کنند که گویی سطوح پایین‌تر عنوان هستند:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

با این حال، مدل شیء دسترسی (AOM) و صفحه‌خوان‌ها هرگز سطوح عنوان را بر اساس تودرتو تغییر ندادند؛ یک <h1> تودرتو همیشه به عنوان "عنوان، سطح ۱" گزارش می‌شد. این باعث ایجاد عدم تطابقی شد که در آن عنوان‌های تودرتو از نظر بصری کوچکتر به نظر می‌رسیدند در حالی که برای فناوری‌های کمکی، عنوان‌های سطح بالا باقی می‌ماندند.

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

برای استایل‌بندی بصری یا سلسله مراتب ساختاری، به عناصر <h1> در تو درون عناصر بخش‌بندی تکیه نکنید. همیشه محتوای خود را با استفاده از عناصر عنوان‌بندی متوالی ( <h1> تا <h6> ) بر اساس ساختار سند، نشانه‌گذاری کنید. این کار تضمین می‌کند که محتوای شما برای موتورهای جستجو، خوانندگان صفحه و توسعه‌دهندگان آینده واضح و قابل دسترس باشد.

خارج از سرتیترها، بیشتر متن‌های ساختاریافته از مجموعه‌ای از پاراگراف‌ها تشکیل شده‌اند. در HTML، پاراگراف‌ها با برچسب <p> مشخص می‌شوند؛ برچسب پایانی اختیاری است اما همیشه توصیه می‌شود.

بخش #about دارای یک عنوان و چند پاراگراف است:

این بخش یک نقطه عطف نیست زیرا نام قابل دسترسی ندارد. برای تبدیل این به یک region ، که یک نقش نقطه عطف است، می‌توانید aria-labelledby برای ارائه نام قابل دسترسی استفاده کنید:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

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

نقل قول‌ها و استنادها

هنگام نشانه‌گذاری یک مقاله یا پست وبلاگ، ممکن است بخواهید یک نقل قول یا pull-quote را با یا بدون استناد قابل مشاهده درج کنید. عناصری برای این سه مؤلفه وجود دارد: <blockquote> ، <q> و <cite> برای استناد قابل مشاهده، یا ویژگی cite برای ارائه اطلاعات بیشتر برای جستجو.

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

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

این ارجاع در سه خط ظاهر می‌شود، که شامل نام نویسنده، نقش قبلی و آرمان حرفه‌ای اوست. <br> یک خط جدید در یک بلوک متن ایجاد می‌کند. می‌توان از آن در آدرس‌های فیزیکی، شعر و بلوک‌های امضا استفاده کرد. خط جدید نباید به عنوان بازگشت به پاراگراف‌های جداگانه استفاده شود. در عوض، پاراگراف قبلی را ببندید و یک پاراگراف جدید باز کنید. استفاده از پاراگراف برای پاراگراف‌ها نه تنها برای دسترسی‌پذیری خوب است، بلکه امکان استایل‌دهی را نیز فراهم می‌کند. عنصر <br> فقط یک خط جدید است؛ و تحت تأثیر ویژگی‌های CSS بسیار کمی قرار می‌گیرد.

اگرچه ما اطلاعات مربوط به استناد را در یک پاراگراف پس از هر نقل قول ارائه دادیم، نقل قول‌های نشان داده شده قبلی به این صورت کدگذاری شده‌اند زیرا از منبع خارجی نیامده‌اند. اگر چنین بوده، منبع می‌تواند (باید؟) ذکر شود.

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

اگر نقل قول از Blendan Smooth از مجله آفلاین او گرفته شده باشد، شما باید نقل قول را به این شکل بنویسید:

عنصر استنادی <cite> هیچ نقش ضمنی ندارد و باید نام قابل دسترس خود را از محتویاتش دریافت کند؛ از aria-label استفاده نکنید.

برای ارائه اعتبار در جایی که اعتبار باید ذکر شود، زمانی که نمی‌توانید محتوا را قابل مشاهده کنید، ویژگی cite وجود دارد که مقدار آن URL سند منبع یا پیام برای اطلاعات نقل شده است. این ویژگی هم در <q> و هم <blockquote> معتبر است. اگرچه این یک URL است، اما توسط ماشین قابل خواندن است اما برای خواننده قابل مشاهده نیست:

در حالی که تگ پایانی </p> اختیاری است (و همیشه توصیه می‌شود)، تگ پایانی </blockquote> همیشه الزامی است.

اکثر مرورگرها به هر دو جهت درون‌خطی <blockquote> و محتوای <cite> که به صورت مورب نمایش داده می‌شود، فاصله اضافه می‌کنند؛ این کار را می‌توان با CSS کنترل کرد. <blockquote> علامت نقل قول اضافه نمی‌کند، اما می‌توان آنها را با محتوای تولید شده توسط CSS اضافه کرد. عنصر <q> به طور پیش‌فرض با استفاده از علامت نقل قول مناسب زبان، علامت نقل قول اضافه می‌کند.

در بخش #teachers ، از HAL نقل شده است که می‌گوید: «متاسفم ، اما می‌ترسم که نتوانم این کار را انجام دهم." کد آن، به انگلیسی و فرانسوی، این است:

عنصر نقل قول درون خطی، <q> ، نقل قول‌های متناسب با زبان را اضافه می‌کند. سبک‌های پیش‌فرض عامل کاربر شامل محتوای تولید شده با نقل قول باز و نقل قول بسته است:

q::before {content: open-quote;}
q::after {content: close-quote;}

ویژگی lang به مرورگر اطلاع می‌دهد که اگرچه زبان پایه صفحه در تگ آغازین <html lang="en-US"> انگلیسی تعریف شده است، اما این پاراگراف متن به زبان دیگری است. این به کنترل‌های صوتی مانند Siri، Alexa و voiceOver کمک می‌کند تا از تلفظ فرانسوی استفاده کنند. همچنین به مرورگر اطلاع می‌دهد که چه نوع نقل قول‌هایی را باید نمایش دهد.

مانند <blockquote> ، عنصر <q> از ویژگی cite پشتیبانی می‌کند.

موجودیت‌های HTML

ممکن است متوجه توالی escape یا "entity" شده باشید. از آنجا که < در HTML استفاده می‌شود، باید آن را با استفاده از < یا یک کدگذاری که به خاطر سپردن آن آسان‌تر نیست < escape کنید. چهار entity رزرو شده در HTML وجود دارد: < ، > ، & ، و " . ارجاعات کاراکتری آنها به ترتیب < > & و " است.

چند موجودیت دیگر که اغلب از آنها استفاده خواهید کرد عبارتند از © برای حق چاپ (©)، ™ برای علامت تجاری (™) و   برای فاصله‌ی بین دو کلمه. فاصله‌های بین دو کلمه زمانی مفید هستند که می‌خواهید بین دو کاراکتر یا کلمه فاصله بگذارید و در عین حال از ایجاد شکست خط در آنجا جلوگیری کنید. بیش از ۲۰۰۰ مرجع کاراکتر نامگذاری شده وجود دارد. اما در صورت نیاز، هر کاراکتر، از جمله ایموجی، یک معادل رمزگذاری شده دارد که با &# شروع می‌شود.

اگر نگاهی به بررسی کارگاه ToastyMcToastface (که در نمونه کد بالا گنجانده نشده است) بیندازید، چند کاراکتر متنی غیرمعمول وجود دارد:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

جمله آخر در این نقل قول را می‌توان به صورت زیر نیز نوشت:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

در این کد آشفته، چند کاراکتر بدون پوشش و چند ارجاع کاراکتر با نام وجود دارد. از آنجا که مجموعه کاراکتر UTF-8 است، چند کاراکتر آخر در نقل قول، مانند این مثال، نیازی به پوشش ندارند. فقط کاراکترهایی که توسط مجموعه کاراکتر پشتیبانی نمی‌شوند، باید پوشش داده شوند. در صورت نیاز، ابزارهای زیادی برای فعال کردن پوشش کاراکترهای مختلف وجود دارد، یا می‌توانید مطمئن شوید که <meta charset="UTF-8"> را در <head> قرار می‌دهید.

حتی وقتی مجموعه کاراکتر را به عنوان UTF-8 مشخص می‌کنید، هنوز هم باید وقتی می‌خواهید آن کاراکتر را روی صفحه چاپ کنید، از < عبور کنید. به طور کلی، نیازی به درج ارجاعات کاراکتر نامگذاری شده برای > ، " ، یا & ; ندارید، اما اگر می‌خواهید یک آموزش در مورد موجودیت‌های HTML بنویسید، هنگام آموزش کدنویسی یک < به کسی، باید از < استفاده کنید. 😀

اوه، و آن ایموجی لبخند 😀 است، اما این سند به صورت UTF-8 اعلام شده است، بنابراین escape نشده است.

درک خود را بررسی کنید

دانش خود را از متن در HTML بیازمایید.