فرادرسمبانی کار با متن در HTML — راهنمای کاربردی
یکی از وظایف اصلی HTML ایجاد ساختار و معنا برای متن است به طوری که مرورگر بتواند آن را به طرز صحیحی نمایش دهد. این مقاله به توضیح روش‌هایی می‌پردازد که HTML برای سازماندهی متن در یک صفحه به کار می‌گیرد.
پیش‌نیازها
آشنایی اولیه با HTML که در این مطلب ارائه شده است. هدف این مقاله یادگیری طرز نشانه‌گذاری اولیه یک صفحه متن برای سازماندهی و ایجاد مفهوم در آن است و شامل پاراگراف‌بندی، ایجاد عنوان، عناصر تأکید و نقل‌قول‌ها می‌شود.
بخش قبلی این مطلب را می‌توانید از طریق کلیک روی لینک زیر مطالعه کنید:
مبانی اولیه متن در HTML: عناوین و پاراگراف‌ها
اغلب بخش‌های متن ساخت‌یافته، شامل عناوین و پاراگراف‌ها است و فرقی نمی‌کند که مشغول خواندن یک داستان، روزنامه، کتاب درسی، مجله و یا موارد دیگر باشید.
محتوای ساخت‌یافته موجب می‌شود که تجربه خواندن آسان‌تر شده و لذت بیشتری داشته باشد. در HTML هر پاراگراف دو عنصر پوششی <p> به صورت زیر دارد:
1<p>I am a paragraph، oh yes I am.</p>هر عنوان باید در عنصر عنوان پوشش یابد:
1<h1>I am the title of the story.</h1>شش سطح از عنصر عنوان وجود دارد که شامل <h1>، <h2>، <h3>، <h4>، <h5> و <h6> است. هر عنصر نماینده سطح متفاوتی از محتوا در سند است. <h1> عنوان اصلی را نمایش می‌دهد، <h2> نشان‌دهنده عناوین فرعی است، <h3> نشان‌دهنده عناوین فرعی سطح دوم و همین طور تا آخر است.
پیاده‌سازی سلسله مراتب سازماندهی
برای نمونه در یک داستان، <h1> می‌تواند عنوان داستان را نشان دهد، عناوین <h2> می‌توانند عنوان هر فصل را نشان دهند و عناوین <h3> بخش‌های فرعی هر فصل را نمایش می‌دهند و همین طور تا آخر.
1<h1>The Crushing Bore</h1>
2
3<p>By Chris Mills</p>
4
5<h2>Chapter 1: The dark night</h2>
6
7<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
8
9<h2>Chapter 2: The eternal silence</h2>
10
11<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
12
13<h3>The specter speaks</h3>
14
15<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>در عمل این بر عهده شما است که تصمیم بگیرید از کدام عناصر برای نمایش متن استفاده کنید، صرفاً باید مطمئن باشید که سلسه‌مراتب شما معنی‌دار است. موارد زیر را به عنوان بهترین رویه برای ایجاد چنین ساختارهایی به خاطر بسپارید:
- ترجیح بر این است که از عنوان <h1> در هر صفحه تنها یک بار استفاده کنید. این عنصر عنوان سطح بالا است و همه عناوین دیگر در سلسله‌مراتب زیر آن قرار می‌گیرند.
- مطمئن شوید که عناوین در ترتیب صحیحی در سلسله‌مراتب قرار دارند. اگر از عناوین <h3> برای نمایش عناوین فرعی استفاده کنید و در ادامه از عناوین <h2> برای نمایش بخش‌های فرعی این عناوین فرعی استفاده کنید، ساختار شما به هم می‌ریزد و نتایج عجیبی به دست می‌آید.
- از میان شش سطح عنوان‌بندی موجود در هر صفحه از بیش از سه عنوان استفاده نکنید؛ مگر این که واقعاً آن را ضروری حساب کنید. اسناد دارای سطوح زیاد یعنی دارای سلسله‌مراتب کاملاً تو در تو خواننده را دچار سردرگمی کرده و حرکت در آن دوار می‌شود. در چنین موقعیت‌هایی بهتر است محتوا را در صورت امکان در چنین صفحه گسترش دهید.
چرا به سازماندهی نیاز داریم؟
برای پاسخ به این سؤال کد HTML زیر را در نظر بگیرید:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Quick hummus recipe</title>
6 </head>
7 <body>
8 Quick hummus recipe
9
10 This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.
11
12 Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.
13
14 Ingredients
15
16 1 can (400g) of chick peas (garbanzo beans)
17 175g of tahini
18 6 sundried tomatoes
19 Half a red pepper
20 A pinch of cayenne pepper
21 1 clove of garlic
22 A dash of olive oil
23
24 Instructions
25
26 Remove the skin from the garlic, and chop coarsely
27 Remove all the seeds and stalk from the pepper, and chop coarsely
28 Add all the ingredients into a food processor
29 Process all the ingredients into a paste.
30 If you want a coarse "chunky" hummus, process it for a short time
31 If you want a smooth hummus, process it for a longer time
32
33 For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.
34
35 Storage
36
37 Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.
38
39 Hummus is suitable for freezing; you should thaw it and use it within a couple of months.
40
41
42 </body>
43</html>این نقطه آغازین مثال ما در این نوشته است و کد فوق را دریک فایل به نام text-start.html روی سیستم محلی خود ذخیره کنید. متن این سند در حال حاضر شامل چندین بخش از محتوا است. این متون هیچ نوع نشانه‌گذاری ندارند؛ اما با استفاده از Enter از هم جدا شده‌اند.
با این وجود زمانی که سند را در مرورگر خود باز کنید، می‌بینید که متن به صورت یک متن واحد طولانی مانند تصویر زیر نمایش می‌یابد:
دلیل این امر آن است هیچ عنصری برای ایجاد ساختار در محتوا استفاده نشده است، و از این رو مرورگر نمی‌داند که کدام بخش عنوان و کدام بخش پاراگراف است. به علاوه موارد زیر را نیز می‌توان جمع‌بندی کرد:
- کاربرانی که از یک صفحه وب بازدید می‌کنند، میل دارند که کل صفحه را برای یافتن محتوای مرتبط با جستجوی خود به سرعت پیمایش کنند و از این رو در اغلب موارد صرفاً عناوین مطلب را می‌خوانند. در این موارد اگر بازدیدکننده در طی چند ثانیه نخست مورد مفیدی برای خود نیابد، ناامید شده و به صفحه دیگری مراجعه می‌کند.
- موتورهای جستجو صفحه‌های وب را با در نظر گرفتن محتوای عناوین به عنوان کلیدواژه‌های مهم برای تأثیرگذاری روی رتبه‌بندی جستجوی صفحه اندیس‌گذاری می‌کنند. بنابراین یک صفحه وب بدون وجود عنوان‌بندی، ازنظر سئو (SEO) عملکرد ضعیفی خواهد داشت.
- افرادی که دارای ناتوانی‌های بینایی شدید هستند، در اغلب موارد صفحه‌های وب را نمی‌خوانند؛ بلکه به آن‌ها گوش می‌دهند. این کار از طریق نرم‌افزارهای قرائت صفحه صورت می‌گیرد. این نرم‌افزارها روش‌هایی برای دسترسی سریع به محتوای متنی ارائه می‌کنند. یکی از این تکنیک‌ها این است که با خواندن عنوان‌های موجود در صفحه آن را برای کاربری که آن را می‌شنود خلاصه می‌کنند و بدین ترکیب آن کاربر می‌تواند اطلاعات مورد نظر خود را سریع‌تر بیابد. اگر عنوانی در صفحه موجود نباشد، آن‌ها مجبور خواهند بود به کل سند گوش دهند.
- برای سبک‌بندی محتوای صفحه با استفاده از CSS یا برای جذاب‌تر ساختن آن با استفاده از جاوا اسکریپت باید عناصری در صفحه باشند که محتواهای مرتبط را پوشش دهند تا CSS/JS بتوانند آن را انتخاب کنند.
از این رو باید برای محتوای صفحه‌های وب خود یک سازماندهی نشانه‌گذاری ایجاد کنیم.
سازماندهی محتوای صفحه وب
در این بخش مستقیماً سراغ یک مثال می‌رویم. در مثال زیر عناصری را به متن خام زیر اضافه می‌کنیم تا به صورت یک عنوان و دو پاراگراف در فیلد خروجی نمایش یابد.
My short story I am a policewoman and my name is Trish. My legs are made of cardboard and I am married to a fish.
با نوشتن کد زیر:
1<h1>My short story</h1>
2<p>I am a policewoman and my name is Trish.</p>
3<p>My legs are made of cardboard and I am married to a fish.</p>نتیجه زیر حاصل می‌شود:
چرا به سازماندهی مفهومی نیاز داریم؟
سازماندهی مفهومی همه پیرامون ما را احاطه کرده است. ما همواره از تجربیات قبلی خود استفاده می‌کنیم تا کارکردهای روزمره را تشخص دهیم. بدین ترتیب وقتی چیزی را می‌بینیم می‌توانیم بدانیم که کارکرد آن چه خواهد بود. برای نمونه ما می‌دانیم که چراغ قرمز راهنمایی به معنی توقف است و چراغ سبز یعنی باید حرکت کنیم. از این رو اگر از سازماندهی مفهومی نادرستی استفاده کنیم همه چیز به سرعت به هم می‌ریزد. آیا می‌توانید تصور کنید که در یک کشور چراغ قرمز راهنمایی به معنی حرکت باشد؟
به طور مشابه باید اطمینان پیدا کنیم که از عناصر صحیحی در صفحه وب خود استفاده می‌کنیم و معنا، کارکرد یا ظاهر صحیحی به محتوای خود می‌دهیم. در این چارچوب، عنصر <h1> نیز یک عنصر مفهومی محسوب می‌شود که بخش متنی که درون آن قرار دارد، نقش یک عنوان سطح بالا را در صفحه می‌دهد.
1<h1>This is a top level heading</h1>مرورگر به طور پیش‌فرض، اندازه فونت بزرگی به این عنصر می‌دهد تا شبیه به یک عنوان به نظر برسد. البته ما می‌توانیم با استفاده از CSS ظاهر آن را به هر نحو که دوست داریم تغییر دهیم. مهم‌تر از آن این است که ارزش معناشناختی این عنصر به چندین روش برای نمونه از سوی موتورهای جستجو و نرم‌افزارهای قرائت صفحه استفاده می‌شود.
از سوی دیگر، می‌توان با هر عنصر، کاری کرد که شبیه به یک عنوان سطح بالا به نظر برسد. به کد زیر توجه کنید:
1<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>این یک عنصر <span> است که هیچ ساختار مفهومی ندارد. از آن در مواردی که بخواهیم سبک‌بندی CSS رویش اعمال کنیم یا کاری با استفاده از جاوا اسکریپت روش اجرا کنیم، استفاده خواهیم کرد و از این رو این عنصر هیچ معنای دیگری به متن اضافه نمی‌کند. با این وجود، ما نوعی سبک‌بندی CSS روی آن اعمال کرده‌ایم تا شبیه به یک عنوان سطح بالا به نظر بیاید؛ اما از آنجا که هیچ ساختار مفهومی یا معناشناختی ندارد، هیچ یکی از مزیت‌هایی که در بخش فوق اشاره کردیم را به دست نمی‌آورد. استفاده از عناصر مرتبط HTML در این موارد گزینه مناسب‌تری محسوب می‌شود.
لیست‌ها
اینک نوبت آن رسیده است که به لیست‌ها بپردازیم. لیست‌ها در همه جای زندگی ما حضور دارند و از لیست خرید تا لیست مسیرهایی که برای رسیدن به خانه هر روز باید طی کنیم را شامل می‌شوند. لیست دستورالعمل‌هایی که در این نوشته ارائه می‌شوند نیز در این فهرست می‌گنجند. لیست‌ها در وب نیز همه جا حضور دارند. به طور کلی سه نوع لیست در وب وجود دارند.
لیست نامرتب
لیست‌های نامرتب جهت نشانه گاری لیست‌هایی از آیتم‌ها استفاده می‌شوند که در آن ترتیب اهمیتی ندارد. برای مثال می‌توان به یک لیست خرید اشاره کرد:
milk eggs bread hummus
هر لیست نامرتب با یک عنصر <ul> آغاز می‌شود و این عنصر همه آیتم‌های لیست را در خود جای می‌دهد:
1<ul>
2milk
3eggs
4bread
5hummus
6</ul>آخرین مرحله برای ایجاد یک لیست نامرتب این است که همه آیتم‌ها درون عناصر <li> قرار می‌گیرند:
1<ul>
2 <li>milk</li>
3 <li>eggs</li>
4 <li>bread</li>
5 <li>hummus</li>
6</ul>نشانه‌گذاری یک لیست نامرتب
موارد زیر را در نظر بگیرید:
1<ul>
2<li>milk</li>
3<li>eggs</li>
4<li>bread</li>
5<li>hummus</li>
6</ul>نتیجه زیر حاصل می‌شود:
- milk
- eggs
- bread
- hummus
لیست مرتب
لیست‌های مرتب، لیست‌هایی هستند که در آن‌ها ترتیب آیتم‌ها مهم است. به عنوان مثال مجموعه مسیرهای زیر را در نظر بگیرید:
1Drive to the end of the road
2Turn right
3Go straight across the first two roundabouts
4Turn left at the third roundabout
5The school is on your right, 300 meters up the roadهمان طور که می‌بینید ساختار نشانه‌گذاری همانند لیست‌های نامرتب است؛ به جز این که باید آیتم‌های لیست را به جای <ul> درون عنصر <ol> قرار دهید:
1<ol>
2 <li>Drive to the end of the road</li>
3 <li>Turn right</li>
4 <li>Go straight across the first two roundabouts</li>
5 <li>Turn left at the third roundabout</li>
6 <li>The school is on your right, 300 meters up the road</li>
7</ol>یادگیری عملی: نشانه‌گذاری یک لیست مرتب
در مورد پاراگراف زیر:
با اعمال کد زیر :
1<ol>
2<li>Drive to the end of the road</li>
3<li>Turn right</li>
4<li>Go straight across the first two roundabouts</li>
5<li>Turn left at the third roundabout</li>
6<li>The school is on your right, 300 meters up the road</li>
7</ol>نتیجه زیر حاصل می‌شود:
مثال استایل‌بندی صفحه دستور آشپزی
متن بدون استایل زیر را در نظر بگیرید:
Quick hummus recipe This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. Ingredients 1 can (400g) of chick peas (garbanzo beans) 175g of tahini 6 sundried tomatoes Half a red pepper A pinch of cayenne pepper 1 clove of garlic A dash of olive oil Instructions Remove the skin from the garlic, and chop coarsely Remove all the seeds and stalk from the pepper, and chop coarsely Add all the ingredients into a food processor Process all the ingredients into a paste If you want a coarse "chunky" hummus, process it for a short time If you want a smooth hummus, process it for a longer time For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. Storage Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. Hummus is suitable for freezing; you should thaw it and use it within a couple of months.
با اعمال کد زیر:
1<h1>Quick hummus recipe</h1>
2
3<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>
4
5<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>
6
7<h2>Ingredients</h2>
8
9<ul>
10<li>1 can (400g) of chick peas (garbanzo beans)</li>
11<li>175g of tahini</li>
12<li>6 sundried tomatoes</li>
13<li>Half a red pepper</li>
14<li>A pinch of cayenne pepper</li>
15<li>1 clove of garlic</li>
16<li>A dash of olive oil</li>
17</ul>
18
19<h2>Instructions</h2>
20
21<ol>
22<li>Remove the skin from the garlic, and chop coarsely.</li>
23<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
24<li>Add all the ingredients into a food processor.</li>
25<li>Process all the ingredients into a paste.</li>
26<li>If you want a coarse "chunky" hummus, process it for a short time.</li>
27<li>If you want a smooth hummus, process it for a longer time.</li>
28</ol>
29
30<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>
31
32<h2>Storage</h2>
33
34<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.</p>
35
36<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>نتیجه زیر حاصل می‌شود:
لیست‌های تو در تو
در HTML قرار دادن یک لیست درون لیست دیگر کاملاً ممکن است. برای نمونه ممکن است لازم باشد که در مواردی یک لیست از موارد فرعی درون یک لیست از آیتم‌های سطح بالا قرار گیرد. برای نمونه لیست دوم را در مثال آشپزی خودمان در نظر بگیرید:
1<ol>
2 <li>Remove the skin from the garlic, and chop coarsely.</li>
3 <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
4 <li>Add all the ingredients into a food processor.</li>
5 <li>Process all the ingredients into a paste.</li>
6 <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
7 <li>If you want a smooth hummus, process it for a longer time.</li>
8</ol>از آنجا که دو مورد آخر بسیار به مورد پیش از خود شباهت دارند، بهتر است آن‌ها را درون یک لیست نامرتب به صورت لیست فرعی در زیر آیتم چهارم کنونی ارائه کنیم. روش انجام این کار به صورت زیر است:
1<ol>
2 <li>Remove the skin from the garlic, and chop coarsely.</li>
3 <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
4 <li>Add all the ingredients into a food processor.</li>
5 <li>Process all the ingredients into a paste.
6 <ul>
7 <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
8 <li>If you want a smooth hummus, process it for a longer time.</li>
9 </ul>
10 </li>
11</ol>اینک می‌توانید به بخش یادگیری عملی قبلی بروید و لیست دوم را به همین صورت به‌روزرسانی کنید.
نمایش تأکید و اهمیت
ما در زبان انسانی در اغلب موارد روی کلمات خاصی تأکید می‌کنیم تا معنای جمله را تغییر دهیم. همچنین در مواردی لازم می‌آید که برخی کلمه‌ها را به روشی مهم یا متفاوت علامت‌گذاری کنیم. HTML عناصر معناشناختی متفاوتی برای اعمال چنین مواردی در سازماندهی محتوای متنی ارائه می‌کند و در این بخش چند مورد از این عناصر را که رایج‌تر هستند، بررسی خواهیم کرد.
تأکید
زمانی که می‌خواهیم در بیان شفاهی روی کلمه‌ای تأکید کنیم، آن‌ها را به صورت مشدّد تلفظ می‌کنیم و به این ترتیب تفاوت‌های ظریفی در آن چه قصد بیانش را داریم ایجاد می‌کنیم. به طور مشابه در زبان مکتوب نیز میل داریم که برخی کلمات را با نوشتن به صورت کج (italic) به صورت مؤکّد ارائه کنیم. برای نمونه دو جمله زیر معناهای متفاوتی دارد:
- خوشحال هستم که دیر نکرده‌اید.
- خوشحال هستم که دیر نکرده‌اید.
جمله اول به طور معمولی مشخص می‌کند که فرد دیر نکرده است. به طور عکس در جمله دوم، گوینده با تأکید روی کلمه خوشحال با حالتی عصبی، آزردگی خود را از این که فرد تأخیر داشته است، بیان می‌کند.
در HTML از عنصر (تأکید) <em> برای نشانه‌گذاری چنین نمونه‌هایی استفاده می‌کنیم. همچنین این کار موجب می‌شود که مطالعه اسناد متنی جذاب‌تر شود. این موارد از سوی نرم‌افزارهای قرائت صفحه شناسایی می‌شوند و با لحن صدای متفاوت خوانده می‌شوند. مرورگرها این عناصر را به طور پیش‌فرض به صورت کج (italic) نمایش می‌دهند؛ اما برای دسترسی به سبک کج نباید به تنهایی از این تگ استفاده کرد. به این منظور باید از عنصر <span> و مقداری CSS استفاده کرد و یا احتمالاً از یک عنصر <i> استفاده کرد. به مثال زیر توجه کنید:
1<p>I am <em>glad</em> you weren't <em>late</em>.</p>اهمیت زیاد
برای تأکید روی واژه‌های مهم در زبان شفاهی آن‌ها را به صورت مؤکد بیان می‌کنیم و در زبان مکتوب نیز آن‌ها را به صورت درشت (bold) می‌نویسیم. برای نمونه
- مایع بسیار سمی است.
- من روی تو حساب می‌کنم. دیر نکن!
در HTML از عنصر <strong> به معنی اهمیت زیاد، برای نشانه‌گذاری چنین نمونه‌هایی استفاده می‌کنیم. بدین ترتیب علاوه بر این که سندهایمان مفیدتر می‌شود، نرم‌افزارهای قرائت صفحه هم با شناسایی این تگ‌ها آن‌ها را با لحن متفاوتی می‌خوانند. مرورگرها این موارد را به طور پیش‌فرض به صورت درشت نمایش می‌دهند؛ اما شما نباید از این روش برای درست کردن برخی واژه‌ها در متن استفاده کنید. به این منظور باید از عنصر <span> و مقداری کد CSS و احتمالاً از عنصر <b> استفاده کنید. به مثال زیر توجه کنید:
1<p>This liquid is <strong>highly toxic</strong>.</p>
2
3<p>I am counting on you. <strong>Do not</strong> be late!</p>در صورت لزوم می‌توان عناصر تأکید (italic) و اهمیت (bold) را درون هم به صورت تو در تو استفاده کرد:
1<p>This liquid is <strong>highly toxic</strong> —
2if you drink it، <strong>you may <em>die</em></strong>.</p>یادگیری عملی: استفاده از عناصر اهمیت‌دهی در متن
در این بخش از یادگیری عملی یک مثال ارائه کرده‌ایم که در آن عناصر اهمیت و تأکید را به واژه‌هایی که ضروری تشخیص می‌دهیم اضافه می‌کنیم:
Important notice
On Sunday January 9th 2010, a gang of goths were spotted stealing several garden gnomes from a shopping center in downtown Milwaukee. They were all wearing green jumpsuits and silly hats, and seemed to be having a whale of a time. If anyone has any information about this incident, please contact the police now.
با اعمال کد زیر:
1<h1>Important notice</h1>
2<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>
تگ‌های Italic ،bold ،underline و موارد دیگر
عناصری که تا به اینجا مورد بررسی قرار دادیم، ساختار معناشناختی کاملاً مشخصی داشتند. این مسئله در مورد تگ‌های <b> ،<i> و u> کمی پیچیده است. این تگ‌ها بدین منظور ارائه شده‌اند که در زمان‌هایی که CSS هنوز پشتیبانی نمی‌شد یا دارای پشتیبانی ضعیفی از سوی مرورگرها بود، افراد بتوانند متن‌ها را به صورت درشت، کج یا با زیرخط بنویسند. عناصری مانند این که تنها روی جنبه نمایشی متن تأثیر دارند و ساختار معناشناختی را تغییر نمی‌دهند به نام «عناصر نمایشی» (presentational elements) نامیده می‌شوند و دیگر نباید از آن‌ها استفاده کرد، چون همان طور که قبلاً دیدیم ساختارهای معناشناختی برای مباحث دسترسی برای افراد ناتوان، سئو و موارد دیگر بسیار حائز اهمیت هستند.
در HTML5 تگ‌های <b>، <i> و <u> با نقش‌های جدید و تا حدودی گیج‌کننده بازتعریف شده‌اند. بهترین قاعده سرانگشتی برای توضیح این عنصرها به صورت زیر است:
استفاده از <b> ،<i> و <u> برای القای معنی‌هایی که به صورت سنتی با استفاده از نگارش درشت، کج یا زیرخط دار، انتقال می‌یابند و جایگزین مناسبی هم برای آن‌ها نداریم، منعی ندارد. با این وجود همواره باید افراد دارای ناتوانی‌های مختلف را در ذهن خود داشته باشیم. برای افرادی که از نرم‌افزارهای قرائت صفحه استفاده می‌کنند یا افرادی که از سیستم‌های نگارشی با الفبایی به جز لاتین بهره می‌گیرند، مفهوم italic چندان مفید نیست.
- <i> برای القای معناهایی استفاده می‌شود که به طور سنتی با نگارش italic انتقال می‌یابند یعنی واژه‌های بیگانه، نمایش رده‌بندی، اصطلاح‌های فنی، اندیشه‌ها و غیره.
- <b> برای القای معناهایی استفاده می‌شود که به طور سنتی با استفاده از نگارش bold انتقال می‌یابند مانند کلیدواژه‌ها، نام‌های محصولات، جمله‌های لید و غیره.
- <u> برای القای معناهایی استفاده می‌شود که به طور سنتی با استفاده از نگارش زیرخط انتقال می‌یابند مانند نام مناسب، املای نادرست و غیره.
نکته: دقت کنید که افراد معمولاً عبارت‌های زیرخط دار را به صورت هایپرلینک تشخیص می‌دهند. از این رو در وب باید تنها لینک‌ها را به صورت زیرخط‌دار نوشت. در موارد مقتضی می‌توان از عنصر <u> برای زیرخط‌دار کردن یک عبارت استفاده کرد؛ اما دقت کنید که باید با استفاده از CSS ظاهر پیش‌فرض زیرخط را طوری تغییر دهید که با هایپرلینک‌ها اشتباه نشود. در مثال زیر شیوه انجام این کار را مشاهده می‌کنید:
1<!-- scientific names -->
2<p>
3 The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
4 is the most common hummingbird in Eastern North America.
5</p>
6
7<!-- foreign words -->
8<p>
9 The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
10 <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
11</p>
12
13<!-- a known misspelling -->
14<p>
15 Someday I'll learn how to <u>spel</u> better.
16</p>
17
18<!-- Highlight keywords in a set of instructions -->
19<ol>
20 <li>
21 <b>Slice</b> two pieces of bread off the loaf.
22 </li>
23 <li>
24 <b>Insert</b> a tomato slice and a leaf of
25 lettuce between the slices of bread.
26 </li>
27</ol>سخن پایانی
بدین ترتیب به پایان یک نوشته دیگر از سری مطالب راهنمای کاربردی HTML می‌رسیم. در این مقاله ایده خوبی از شیوه آغاز نشانه‌گذاری یک سند HTML یافتیم و با برخی از مهم‌ترین عناصر در این زمینه آشنا شدیم. البته عناصر مفهومی زیادی وجود دارند که هنوز باید بشناسیم و در بخش بعدی از این سری مقالات راهنمای عملی HTML به بررسی آن‌ها خواهیم پرداخت. در مقاله بعدی به روش ایجاد هایپرلینک‌ها که احتمالاً مهم‌ترین عنصر در وب محسوب می‌شود، می‌پردازیم.
برای مطالعه قسمت بعدی این مجموعه مطلب آموزشی روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی و توسعه پروژه های وب
- مجموعه آموزش‌های برنامهنویسی
- آموزش طراحی وب با HTML – مقدماتی
- آشنایی مقدماتی با HTML — به زبان ساده
- آموزش طراحی وب با HTML – تکمیلی
- گنجاندن صوت و ویدیو در فایل های HTML — از صفر تا صد
==
