عناوین و پاراگراف‌ها

          ابن حسام 
            بازدید : 71
          پنجشنبه 24 مرداد 1398
           نظرات (0)
        

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

1

<p>Iamaparagraph،oh yesIam.</p>

هر عنوان باید در عنصر عنوان پوشش یابد:

1

<h1>Iam the title of the story.</h1>

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

پیاده‌سازی سلسله‌ مراتب سازماندهی

برای نمونه در یک داستان، <h1> می‌تواند عنوان داستان را نشان دهد، عناوین <h2> می‌توانند عنوان هر فصل را نشان دهند و عناوین <h3> بخش‌های فرعی هر فصل را نمایش می‌دهند و همین طور تا آخر.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<h1>The Crushing Bore</h1>
 
<p>By Chris Mills</p>
 
<h2>Chapter1:The dark night</h2>
 
<p>It wasadark night.Somewhere,an owl hooted.The rain lashed down on the...</p>
 
<h2>Chapter2:The eternal silence</h2>
 
<p>Our protagonist could notso much asawhisper out of the shadowy figure...</p>
 
<h3>The specter speaks</h3>
 
<p>Several more hours had passed,when all ofasudden the specter sat bolt upright andexclaimed,"Please have mercy on my soul!"</p>

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

ترجیح بر این است که از عنوان <h1> در هر صفحه تنها یک بار استفاده کنید. این عنصر عنوان سطح بالا است و همه عناوین دیگر در سلسله‌مراتب زیر آن قرار می‌گیرند.
مطمئن شوید که عناوین در ترتیب صحیحی در سلسله‌مراتب قرار دارند. اگر از عناوین <h3> برای نمایش عناوین فرعی استفاده کنید و در ادامه از عناوین <h2> برای نمایش بخش‌های فرعی این عناوین فرعی استفاده کنید، ساختار شما به هم می‌ریزد و نتایج عجیبی به دست می‌آید.
از میان شش سطح عنوان‌بندی موجود در هر صفحه از بیش از سه عنوان استفاده نکنید؛ مگر این که واقعاً آن را ضروری حساب کنید. اسناد دارای سطوح زیاد یعنی دارای سلسله‌مراتب کاملاً تو در تو خواننده را دچار سردرگمی کرده و حرکت در آن دوار می‌شود. در چنین موقعیت‌هایی بهتر است محتوا را در صورت امکان در چنین صفحه گسترش دهید.

چرا به سازماندهی نیاز داریم؟

برای پاسخ به این سؤال کد HTML زیر را در نظر بگیرید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Quick hummus recipe</title>
  </head>
  <body>
    Quick hummus recipe
 
    Thisrecipe makes quick,tasty hummus,with no messing.It has been adapted fromanumber of different recipes thatIhave read over the years.
 
    Hummus isadelicious thick paste used heavily inGreek andMiddle Eastern dishes.It isvery tasty with salad,grilled meats andpitta breads.
 
    Ingredients
 
    1can(400g)of chick peas(garbanzo beans)
    175gof tahini
    6sundried tomatoes
    Halfared pepper
    Apinch of cayenne pepper
    1clove of garlic
    Adash of olive oil
 
    Instructions
 
    Remove the skin from the garlic,andchop coarsely
    Remove all the seeds andstalk from the pepper,andchop coarsely
    Add all the ingredients intoafood processor
    Process all the ingredients intoapaste.
    Ifyou wantacoarse"chunky"hummus,process it forashorttime
    Ifyou wantasmooth hummus,process it foralonger time
 
    Foradifferent flavour,you could tryblending inasmall measure of lemon andcoriander,chili pepper,lime andchipotle,harissa andmint,orspinach andfeta cheese.Experiment andsee what works foryou.
 
    Storage
 
    Refrigerate the finished hummus inasealed container.You should be able touseit foraboutaweek after you've made it.Ifit starts tobecome fizzy,you should definitely discard it.
 
    Hummus issuitable forfreezing;you should thaw it anduseit withinacouple of months.
 
 
  </body>
</html>

این نقطه آغازین مثال ما در این نوشته است و کد فوق را دریک فایل به نام text-start.html روی سیستم محلی خود ذخیره کنید. متن این سند در حال حاضر شامل چندین بخش از محتوا است. این متون هیچ نوع نشانه‌گذاری ندارند؛ اما با استفاده از Enter از هم جدا شده‌اند.

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

text structure

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

کاربرانی که از یک صفحه وب بازدید می‌کنند، میل دارند که کل صفحه را برای یافتن محتوای مرتبط با جستجوی خود به سرعت پیمایش کنند و از این رو در اغلب موارد صرفاً عناوین مطلب را می‌خوانند. در این موارد اگر بازدیدکننده در طی چند ثانیه نخست مورد مفیدی برای خود نیابد، ناامید شده و به صفحه دیگری مراجعه می‌کند.
موتورهای جستجو صفحه‌های وب را با در نظر گرفتن محتوای عناوین به عنوان کلیدواژه‌های مهم برای تأثیرگذاری روی رتبه‌بندی جستجوی صفحه اندیس‌گذاری می‌کنند. بنابراین یک صفحه وب بدون وجود عنوان‌بندی، ازنظر سئو (SEO) عملکرد ضعیفی خواهد داشت.
افرادی که دارای ناتوانی‌های بینایی شدید هستند، در اغلب موارد صفحه‌های وب را نمی‌خوانند؛ بلکه به آن‌ها گوش می‌دهند. این کار از طریق نرم‌افزارهای قرائت صفحه صورت می‌گیرد. این نرم‌افزارها روش‌هایی برای دسترسی سریع به محتوای متنی ارائه می‌کنند. یکی از این تکنیک‌ها این است که با خواندن عنوان‌های موجود در صفحه آن را برای کاربری که آن را می‌شنود خلاصه می‌کنند و بدین ترکیب آن کاربر می‌تواند اطلاعات مورد نظر خود را سریع‌تر بیابد. اگر عنوانی در صفحه موجود نباشد، آن‌ها مجبور خواهند بود به کل سند گوش دهند.
برای سبک‌بندی محتوای صفحه با استفاده از CSS یا برای جذاب‌تر ساختن آن با استفاده از جاوا اسکریپت باید عناصری در صفحه باشند که محتواهای مرتبط را پوشش دهند تا CSS/JS بتوانند آن را انتخاب کنند.

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

یادگیری عملی: سازماندهی محتوای صفحه وب

در این بخش مستقیماً سراغ یک مثال می‌رویم. در مثال زیر عناصری را به متن خام موجود در فیلد ورودی اضافه می‌کنیم تا به صورت یک عنوان و دو پاراگراف در فیلد خروجی نمایش یابد.

در صورتی که هر نوع مشکلی پیش آمد همواره می‌توانید با زدن دکمه Reset به حالت اولیه بازگردید. اگر واقعاً فکر کردید نمی‌توانید این کار را انجام دهید می‌توانید با زدن دکمه Show Solution پاسخ را ملاحظه کنید.

چرا به سازماندهی مفهومی نیاز داریم؟

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

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

1

<h1>Thisisatop level heading</h1>

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

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

1

<span style="font-size: 32px; margin: 21px 0;">Isthisatop level heading?</span>

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