آموزش HTML : سرفصلها و پاراگرافها
یکی از وظایف اصلی HTML، ایجاد ساختار متن است تا مرورگر بتواند یک سند HTML را آنطور که توسعهدهنده آن در نظر دارد نمایش دهد. این مقاله توضیح میدهد که چگونه میتوان از HTML برای ارائه ساختار اساسی صفحه با تعریف سرتیترها و پاراگرافها استفاده کرد.
بیشتر متنهای ساختاریافته از تیترها و پاراگرافها تشکیل شدهاند، چه در حال خواندن یک داستان، روزنامه، کتاب درسی دانشگاه، مجله و غیره باشید.
محتوای ساختاریافته، تجربه خواندن را آسانتر و لذتبخشتر میکند.
در HTML، هر پاراگراف باید در یک عنصر قرار گیرد، مانند این:
هر عنوان باید در یک عنصر عنوان قرار گیرد:
شش عنصر عنوان وجود دارد: h1، h2، h3، h4، h5 و h6. هر عنصر نشاندهنده سطح متفاوتی از محتوا در سند است؛ نشاندهنده عنوان اصلی، نشاندهنده زیرعنوانها، نشاندهنده زیرزیرعنوانها و غیره است.
اجرای سلسله مراتب ساختاری
برای مثال، در این داستان، عنصر نشان دهنده عنوان داستان، عناصر نشان دهنده عنوان هر فصل و عناصر نشان دهنده زیربخشهای هر فصل هستند:
اینکه عناصر مربوطه چه چیزی را نشان میدهند، تا زمانی که سلسله مراتب منطقی باشد، واقعاً به شما بستگی دارد. فقط باید چند نکتهی مهم را هنگام ایجاد چنین ساختارهایی در نظر داشته باشید:
ترجیحاً، شما باید از یک در هر صفحه استفاده کنید - این بالاترین سطح عنوان است و سایر موارد در سلسله مراتب زیر این قرار میگیرند.
مطمئن شوید که از عنوانها به ترتیب صحیح در سلسله مراتب استفاده میکنید. از عناصر برای نمایش زیرعنوانها و به دنبال آن از عناصر برای نمایش زیر-زیرعنوانها استفاده نکنید - این کار منطقی نیست و منجر به نتایج عجیب و غریب میشود.
از شش سطح عنوان موجود، باید سعی کنید در هر صفحه بیش از سه سطح استفاده نکنید، مگر اینکه احساس کنید ضروری است. اسنادی که سطوح زیادی دارند (مثلاً سلسله مراتب عنوان عمیق) دست و پا گیر و پیمایش آنها دشوار میشود. در چنین مواقعی، توصیه میشود در صورت امکان، محتوا را در چندین صفحه پخش کنید.
چرا به ساختار نیاز داریم؟
برای پاسخ به این سوال، بیایید نگاهی به عکس زیر بیندازیم - یک دستور غذای خوب برای حمص. بدنهی این سند در حال حاضر شامل چندین قطعه محتوا است. آنها به هیچ وجه نشانهگذاری نشدهاند، اما با خطشکن از هم جدا شدهاند (برای رفتن به خط بعدی، Enter/Return را فشار دهید).
با این حال، وقتی سند را در مرورگر خود باز میکنید، خواهید دید که متن به صورت یک تکه بزرگ ظاهر میشود!
دلیل این امر این است که هیچ عنصری برای ساختاردهی به محتوا وجود ندارد، بنابراین مرورگر نمیداند عنوان چیست و پاراگراف چیست. علاوه بر این:
- کاربرانی که به یک صفحه وب نگاه میکنند، معمولاً برای یافتن محتوای مرتبط، به سرعت آن را مرور میکنند و اغلب فقط سرتیترها را میخوانند. (ما معمولاً زمان بسیار کوتاهی را در یک صفحه وب میگذرانیم.) اگر نتوانند در عرض چند ثانیه چیز مفیدی ببینند، احتمالاً ناامید میشوند و به جای دیگری میروند.
- موتورهای جستجو که صفحه شما را ایندکس میکنند، محتوای عنوانها را به عنوان کلمات کلیدی مهم برای تأثیرگذاری بر رتبهبندی جستجوی صفحه در نظر میگیرند. بدون عنوانها، صفحه شما از نظر سئو (بهینهسازی موتور جستجو) عملکرد ضعیفی خواهد داشت.
- افراد دارای اختلال بینایی شدید اغلب صفحات وب را نمیخوانند؛ در عوض به آنها گوش میدهند. این کار با نرمافزاری به نام صفحهخوان انجام میشود. این نرمافزار روشهایی را برای دسترسی سریع به محتوای متن ارائه میدهد. در میان تکنیکهای مختلف مورد استفاده، آنها با خواندن سرفصلها، طرح کلی سند را ارائه میدهند و به کاربران خود اجازه میدهند اطلاعات مورد نیاز خود را به سرعت پیدا کنند. اگر سرفصلها در دسترس نباشند، آنها مجبور میشوند به کل سند که با صدای بلند خوانده میشود گوش دهند.
- برای استایلدهی به محتوا با CSS، یا انجام کارهای جالب با جاوا اسکریپت، باید عناصری داشته باشید که محتوای مرتبط را در بر بگیرند، تا CSS/JavaScript بتواند به طور مؤثر آن را هدف قرار دهد.
بنابراین، باید به محتوای خود نشانهگذاری ساختاری بدهیم. (markup structure)
چرا به معناشناسی نیاز داریم؟
معانی (semantics) در همه جای اطراف ما مورد استفاده قرار میگیرند - ما برای اینکه به ما بگویند عملکرد یک شیء روزمره چیست، به تجربیات قبلی خود تکیه میکنیم؛ وقتی چیزی را میبینیم، میدانیم که عملکرد آن چیست. بنابراین، برای مثال، انتظار داریم چراغ راهنمایی قرمز به معنای «ایست» و چراغ راهنمایی سبز به معنای «برو» باشد. اگر معانی اشتباهی به کار گرفته شوند، اوضاع میتواند خیلی سریع پیچیده شود. (آیا کشوری از قرمز به معنای «برو» استفاده میکند؟ امیدواریم که اینطور نباشد.)
به همین ترتیب، باید مطمئن شویم که از عناصر صحیح استفاده میکنیم و به محتوای خود معنی، عملکرد یا ظاهر صحیحی میدهیم. در این زمینه، عنصر نیز یک عنصر معنایی است که به متنی که در اطراف آن قرار دارد، نقش (یا معنی) "یک عنوان سطح بالا در صفحه شما" را میدهد.
به طور پیشفرض، مرورگر به آن اندازه فونت بزرگی میدهد تا شبیه یک عنوان به نظر برسد (اگرچه میتوانید با استفاده از CSS آن را طوری استایلبندی کنید که شبیه هر چیزی که میخواهید به نظر برسد). مهمتر از آن، ارزش معنایی آن به روشهای مختلفی استفاده میشود، به عنوان مثال توسط موتورهای جستجو و خوانندگان صفحه نمایش (همانطور که در بالا ذکر شد).
از سوی دیگر، میتوانید هر عنصری را شبیه یک عنوان سطح بالا کنید. موارد زیر را در نظر بگیرید:
این یک عنصر است. هیچ معنای خاصی ندارد. وقتی میخواهید CSS را روی محتوا اعمال کنید (یا کاری باجاوا اسکریپت روی آن انجام دهید) بدون اینکه معنای اضافی به آن بدهید، از آن برای پوشش دادن محتوا استفاده میکنید. (در ادامهی این دوره بیشتر در مورد این موارد خواهید آموخت.) ما مقداری CSS روی آن اعمال کردهایم تا شبیه یک عنوان سطح بالا به نظر برسد، اما از آنجایی که هیچ ارزش معنایی ندارد، هیچ یک از مزایای اضافی که در بالا توضیح داده شد را نخواهد داشت. ایدهی خوبی است که از عنصر HTML مربوطه برای این کار استفاده کنید.
