از اینکه با Google I/O تنظیم کردید متشکریم! تماشای محتوا بر اساس تقاضا

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

مبانی متن

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

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

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

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

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

نمونه های تو در تو H1.

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

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

اما مدل Object Accessibility یا AOM هنوز سطح عنصر را به درستی گزارش می‌کند. در این مورد، "سرفصل، سطح 1". توجه داشته باشید که مرورگر این کار را برای سطوح عنوان دیگر انجام نمی دهد. گفته شد، از استایل مرورگر مبتنی بر سطح عنوان استفاده نکنید. حتی اگر مرورگرها از طرح کلی پشتیبانی نمی‌کنند، وانمود می‌کنند که دارند. عناوین محتوای خود را طوری علامت گذاری کنید که گویی انجام می دهند. این باعث می شود محتوای شما برای موتورهای جستجو، صفحه خوان ها و نگهبانان آینده (که ممکن است شما باشید) منطقی باشد.

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

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

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

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

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

نقل قول ها و نقل قول ها

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

موجودیت های HTML

ممکن است متوجه توالی فرار یا «موجود» شده باشید. از آنجایی که < در HTML استفاده می شود، باید با استفاده از یکی از < یا یک رمزگذاری که کمتر به یاد می‌آید < . چهار موجودیت رزرو شده در HTML وجود دارد: < , > , & , و " . ارجاع کاراکترهای آنها به ترتیب < , > , & و " است.

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

اگر به بررسی کارگاه 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&#x336;&#x33C;&#x356;&tcedil;&#x318;h&#x31D;&#x330;&#x329;&#x348;&#x317;i&#x319;&#x32A;n&#x34F;&#x329;&#x319;
&#x34D;&#x331;&#x32B;&#x31C;&#x31F;g&#x322;&#x323;&#x345; &#x317;&#x330;&#x353;&#x332;&#x31E;&#x300;t&#x359;&#x300;o&#x31F;
&#x316;&#x356;&#x339;&#x315; &#x353;&#x33C;&#x34E;&#x31D;&#x356;&#x32D;d&oacute;&#x32A;&#x320;&#x355;&#x31C; &#x34D;&#x331;
&#x34E;&#x35A;&#x32F;&#x31F;&#x301;w&#x32E;&#x332;&#x339;&#x355;&#x348;&#x31F;&#x35E;&igrave;th&#x322; &#x330;&#x333;
&#x32F;&#x32E;&#x347;

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

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

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

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

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

چگونه نماد حق چاپ را در HTML نشان می دهید؟

c

دوباره امتحان کنید.

©

درسته!

&copyright .

دوباره امتحان کنید.

کدام عنصر برای نشان دادن یک نقل قول استفاده می شود؟

<blockquote>

صحیح

<quote>

دوباره امتحان کنید.

<cite>

دوباره امتحان کنید. عنصر <cite> برای نشان دادن منبع یک نقل قول استفاده می شود، نه خود نقل قول.