مقدمه ای بر Semantic HTML
مقدمه
همه ما با تگ های div آشنا هستیم. این تگ ها سالهای بسیاری است که برای در برگرفتن چند المان در قالب یک block و همچنین به خاطر استفاده از style یا ساختار خاصی در کدها استفاده می شوند. در کدها و پروژه هایی مانند کد زیر، دیدن این تگ ها بسیار عادی است:
<div class="container" id="header">
<div class="header header-main">Sokan Academy best blog ever</div>
<div class="site-navigation">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</div>
</div>
<div class="container" id="main">
<div class="article-header-level-1">
Read more article in "Sokan Academy" website
</div>
<div class="article-content">
<div class="article-section">
<div class="article-header-level-2">
Part 1: Start reading something
</div>
<!-- cheesy content -->
</div>
<div class="article-section">
<div class="article-header-level-2">
Part 2: Start learning somthing
</div>
<!-- more cheesy content -->
</div>
</div>
</div>
<div class="container" id="footer">
Contact us!
<div class="contact-info">
<p class="email">
<a href="mailto:us@example.com">article@sokanAcademy.com</a>
</p>
<div class="street-address">
<p>125</p>
<p>Tehran</p>
<p>Iran</p>
</div>
</div>
</div>
همانطور که می بینیم، در این کد از تعداد بسیار زیادی <div> استفاده شده است.
این قطعه کد به خوبی کار می کند (البته در بیشتر موارد کار می کند) و همچنین ساختاری که مدنظرمان هست را دارد و حتما style مدنظر هم به خوبی پیاده سازی شده است.
اما چندین مشکل بزرگ دارد.
دسترس پذیری:
هنگامی که برای div ها از class و id با نام هایی مرتبط استفاده می کنیم، یک حالت ایده آل برای افزایش خوانایی کد می باشد. اما هنگامی که ربات ها و ابزارهای تست سایت، این کدها را بررسی می کنند، نمی توانند از این نام گذاری های class و id چیزی متوجه شوند چون آن ها مثل انسان نیستند. در نتیجه هیچ اطلاعات مفیدی از این کدها دستگیرشان نمی شود. آن ها فقط تعدادی div شناسایی می کنند که به صورت block در کنار هم قرار گرفته اند.
خوانایی:
برای خواندن و فهمیدن ساختار اصلی این کد، باید با دقت اسم کلاس ها را بررسی کنیم و آنها را از دل تعدادی کد دیگر (مثل <div class="..."></div>) تشخیص دهیم. همچنین زمانی که چندین سطح به درون div ها می رویم به سختی می توان تشخیص داد کدام div باز شده و کدام بسته شده است. البته به لطف ویژگی IDE ها (مثل استفاده از رنگ های متنوع برای سطح های مختلف کد و هم چنین نشان دادن تگ هایی که باز و بسته شده اند) می توان متوجه شد که اکنون در کجای کد هستیم که در پروژه های بزرگتر باید مقدار زیادی اسکرول کرده تا همین ویژگی ها به کمک ما بیاید.
ثبات و استاندارد:
هنگامی که وارد یک پروژه یا یک شرکت جدید می شویم، یادگیری و متوجه شدن تمامی کدهای قبلی و ماژول های پیاده سازی شده در آن، بسیار اذیت کننده و دشوار خواهد بود. اگر یک استاندارد جامع در ساختار کدهای وبسایت ها داشته باشیم که همه از آن استفاده کنیم، بررسی و خواندن کدهای HTML در یک پروژه جدید بسیار ساده تر از قبل خواهد بود.
اگر یک استاندارد وجود داشت....
HTML5 خودش استاندارد دارد!
HTML5 چیز جدیدی نیست و یک نسخه اولیه از آن در سال 2008 معرفی شد که بعد ها در سال 2014 به یک نسخه نهایی و قابل اعتماد تبدیل شد. چیزی در حدود 7 سال قبل...
پس مدت هاست که HTML5 هست و از آن استفاده می شود.
یکی از اصلی ترین مزایای HTML5 معرفی مجموعه ای از "تگ های معنایی" (Semantic Elements) بود. Semantic Elements به مجموعه از تگ ها گفته می شود که طراحی شده اند تا ساختار کدها را معنا ببخشند. به عبارت دیگر به روشی بیان می کنند که برای چه چیزی لازم هستند و چرا استفاده شده اند. همانطور که در بالا گفته شد، از آنجا که این تگ های معنایی استاندارد هستند، کدها را به روشی بیان می کنند که همه بتوانند آن ها را متوجه شوند، حتی ربات ها و ابزارهای تست.
در منابع و اطلاعات HTML5 درباره زمان استفاده از <div> به زیبایی بیان شده است:
توصیه شده است که از <div> زمانی استفاده شود که دیگر هیج تگی قابل استفاده نباشد. در موقعیت های مختلف از تگ های مناسب همان موقعیت و به جای <div> استفاده شود. در این صورت کدها بسیار خواناتر و قابل دسترس برای خواننده ها و همچنین قابل توسعه برای برنامه نویسان است.
استفاده از استانداردهای HTML5 در ساختار اصلی:
یک فرمت بسیار معمول که در بیشتر وبسایت ها و آموزش ها می توانید ببینید به صورت زیر است. در این فرمت که بسیار رایج است، معمولا یک صفحه را به سه قسمت اصلی تقسیم می کنند: header، main و footer که در نهایت این سه قسمت را در صورت نیاز به قسمت های دیگری به نام section تقسیم بندی می کنند. این فرمت را در مثال زیر با هم می بینیم:
<div class="container" id="header">...</div>
<div class="container" id="main">
...
<div class="article-section">...</div>
...
</div>
<div class="container" id="footer">...</div>
خیلی از ما این فرمت را دیده و شاید بارها از آن استفاده کرده باشیم. این ساختار در زمینه دسترس پذیری، خوانایی کدهای HTML و همچنین برای استفاده از css نیز بسیار مناسب تر از ساختار اولیه ماست.
همانطور که دیدیم ساختار دوم خوانایی بهتری نسبت به ساختار اولیه ما داشته و می تواند به عنوان یک استاندارد مورد استفاده قرار بگیرد تا همه از همین ساختار پیروی کنند. در واقع مجموعه های WHATWC و W3C که استانداردهای HTML را تصویب کرده اند، این فرمت را به چهار تگ در HTML5 خلاصه کرده و با نام های <header>، <main>، <section> و <footer> معرفی کرده اند.
کاربرد تگ های <header> و <footer> :
تگ های <header> و <footer> در واقع دوقلو هستند. آنها در تعریف و تعدادی از قانون ها، نظیر اینکه در کجاها اجازه استفاده دارند، شبیه به هم هستند و تنها تفاوتشان هدف معنایی استفاده از آنهاست:
"<header> در ابتدای همه المان ها و <footer> در پایان همه المان ها استفاده می شود."
در اینجا منظور از المان، تنها محدود به تگ <body> نمی شود و از این زوج تگ ها می توانیم در سرتاسر کد خود استفاده کنیم که مفهوم شروع و پایان را برساند. به عنوان مثال در فرم ها، مقاله ها، پست ها، کارت ها و دیگر قسمت های کد خود قابل استفاده هستند.
تگ های header و footer می توانند در دو دسته “sectioning root” (تگ هایی که در root اصلی کد قرار می گیرند) و “sectioning content” (تگ هایی که در قسمت های داخلی کد قرار می گیرند) استفاده شوند. این دو دسته شامل مجموعه از تگ ها است که برخی از آن ها عبارتند از <body>، <blockquote>، <section>، <td>، <aside> و تعدادی دیگر...
برای مشاهده لیست کامل تگ های قابل استفاده در HTML می توانید روی دو دسته ای که در بالا گفته شد، به طور جداگانه کلیک نمایید.
به خاطر داشته باشید که در هر قسمت (چه در root اصلی و چه در قسمت های داخلی) می توان تنها از یک header و یک footer استفاده کرد. <header> برای نگه داشتن تگ های تیتر معمول است (<h1> - <h6>). استفاده از این تگ ها ضروری و لازم نیست اما برای حفظ معنا و ساختاری که در بالا صحبت کردیم، استفاده از آن ها بهتر است.
تگ <main>:
سومین تگ اصلی در HTML تگ مخصوص <main> است. در منابع دو چیز مهم درباره این تگ گفته شده است:
" قسمت main شامل محتوای اصلی سایت می شود که فقط مخصوص به آن صفحه است و از محتواهایی که در بیشتر صفحات تکرار می شوند، مستثنا است. مانند لینک های navbar، لوگو و بنرهای بالایی و پایین سایت."
به عبارت دیگر main جایی است که شما محتوای اصلی آن صفحه را قرار می دهید. به طور دقیق مهم ترین قسمت صفحه و قسمتی که کاربران را جذب خود می کند. تمامی موارد گفته شده در بالا نظیر لینک های navbar، لوگو، فرم سرچ و اطلاعات کپی رایت را می توان در <header> و <footer> استفاده کرد.
این تگ برخلاف تگ های header و footer، تنها باید یکبار در صفحه استفاده شود. این تگ را نمی توان در قسمت های داخلی و محتواهای دیگر استفاده کرد. در یک حالت استثنا می توان از چندین تگ main استفاده کرد اما به جز یک تگ main مابقی تگ ها باید hidden شوند و در هر لحظه تنها یک تگ main نمایش داده شود.
اکنون در اینجا و بعد از تمامی این توضیحات، مثالی که در بالا زده شد را دوباره بررسی می کنیم و به جای نام گذاری کلاس ها از تگهایی که گفتیم استفاده می کنیم:
<header>
<h1>Super duper best blog ever</h1>
...
</header>
<main>
<h2>Why you should buy more cheeses than you currently do</h2>
...
</main>
<footer>
Contact us!
<div class="contact-info">this.is.us@example.com</div>
</footer>نسبت به کد اولیه ما بسیار بهتر و خواناتر شده است. اما هنوز کار بسیاری برای انجام وجود دارد.
قسمت قسمت کردن با تگ <section>:
ما تا به اینجا ساختار اصلی صفحه خود را چیده ایم و اکنون باید محتوای داخلی را قرار دهیم. به طور معمول برای مقالات و متن های بلند، آن را به قسمت ها و پاراگراف های متعدد تقسیم می کنیم تا خوانایی آن را بهبود ببخشیم. برای این منظور از تگ <section> استفاده می کنیم. درواقع این section ها همان div ها هستند اما با رعایت semantic elements و می توانند به ساختار اصلی صفحه ما معنا ببخشند. این تگ جزو دسته sectioning content قرار گرفته و می تواند header و همچنین footer مخصوص به خود را داشته باشد تا ساختاری بهتری پیدا کند.
برای اینکه تفاوت بین div و section را بهتر درک کنیم به جملات زیر دقت کنید:
"تگ section یک تگ نگهدارنده عمومی مانند div نیست. هنگامی که یک تگ نیاز به استایل و طراحی خاصی دارد، برنامه نویسان ترجیح می دهند از div استفاده کنند. نکته مهم اینجاست که استفاده از تگ section زمانی مناسب است که محتواهای صفحه نیاز دارد به صورت مجزا ولی درکنار هم لیست شوند."
به عبارت ساده تر هنگامی که باید محتوای حجیمی را در یک صفحه نمایش دهیم، برای قسمت بندی این محتوا به بخش های کوچک تر از section و در غیر این صورت از div استفاده می کنیم.
تگ <article>، نمایش دهنده محتوا:
این تگ برای نمایش قسمتی استفاده می شود که کاملا از محتوا تشکیل شده است و از نام این تگ هم کاملا متوجه می شویم که نمایش دهنده چه نوع محتواهایی می تواند باشد. این محتوا می تواند یک بلاگ یا محتوای شبکه های اجتماعی باشد.
در منابع و اطلاعات HTML توصیه شده است که article ها همیشه یک تیتر دارند که نشان می دهد آن مقاله در رابطه با چه موضوعی است و برای تیتر هم معمولا از h1 – h6 استفاده می شود. پس تا به اینجا یک مقاله دارای تگ header است. همچنین یک article می تواند تگ های <footer> و <section> هم داشته باشد. در نتیجه می توان این بخش article که خودش یک مجموعه جدا، مستقل و مرتب با ساختاری منظم است را در هر صفحه دیگری نیز به کار برد.
در مثال اولیه بالا، دوباره کدها را بررسی کرده و برای قسمت مقاله دوباره کدها را بازنویسی می کنیم:
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
<!-- more cheesy content -->
</section>
</article>اکنون با یک نگاه اولیه به این خط کدها می توان به راحتی قسمت های مختلف و هدف استفاده از هر بخش را متوجه شد و نسبت به مثال اولیه بسیار خواناتر و دارای ساختار شده است.
تگ <nav>:
این تگ به منظور نگه داشتن مجموعه ای از لینک ها طراحی می شود که به کاربر کمک می کند تا به راحتی به قسمت های مختلف سایت دسترسی داشته باشد.
برای پیاده سازی یک nav در header و در مثال بالا به صورت زیر عمل می کنیم:
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
در دسترس بودن با تگ <address>:
این تگ بیانگر قسمت تماس با ما بوده و معمولا در قسمت <footer>استفاده می شود و شامل اطلاعات تماس نظیر ایمیل، تلفن، آدرس و... می باشد. استفاده از این تگ روش و قانون خاصی ندارد اما در برخی از منابع به عنوان یک label برای اطلاعات تماس استفاده می شود.
برای درک بهتر استفاده از این تگ، مثال قبلی خود را به صورت زیر بازنویسی می کنیم:
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:article@sokanAcademy.com"> article@sokanAcademy.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Tehran, Iran</p>
<p>
<span property="addressLocality">Tehran</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">Iran</p>
</address>
</section>
</footer>
در نهایت تمامی div های اضافی حذف شده و به ساختار استاندارد و خوانایی بیشتر دست یافتیم که مثال اولیه خود را به صورت نهایی زیر درآوردیم:
<header>
<h1>Sokan Academy best blog ever</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Read more article in "Sokan Academy" website</h1>
</header>
<section>
<header>
<h2>Part 1: Start reading something</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Start learning somthing</h2>
</header>
<!-- more cheesy content -->
</section>
</article>
</main>
<footer>
<section class="contact" vocab="http://sokanacademy.com/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:article@sokanAcademy.com">article@sokanAcademy.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Tehran, Iran</p>
<p>
<span property="addressLocality">Tehran</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">Iran</p>
</address>
</section>
</footer>
