درباره HTML5 و قابلیت‌های آن – ساختار کلی یک صفحه وب

در مطلب گذشته کمی درباره قابلیت های HTML5 و امکانات آن توضیح دادم و در یک پست، یک ویدئو برای آشنایی با HTML5 معرفی کردم. فکر میکنم مقدمات را به خوبی برای ورود به دنیای HTML5 آماده کرده ام پس با هم شروع می کنیم.
بخش اول: ساختار کلی یک صفحه با استفاده از HTML۵
HTML5 شامل تغییرات بسیاری نسبت به نسخه پیشین خود بوده است. تغییراتی که خیلی ها هنوز آن را باور ندارند و وقتی در پست های قبلی درباره HTML5 نوشتم، بعضی ها با استناد به کتب دانشگاهی به اصطلاح معتبر به بنده ایمیل
زده و با کمی تشریفات فرمودند HTML همچین قابلیت هایی ندارد. اما همین آقایان دانشجو حتی زحمت یک جستجوی کوچک را به خود نداده بودند. از بحث خارج نمی شوم و یک راست به سراغ قابلیتی می روم که به نظر من یکی از مهمترین ویژگی های HTML5 است و آن مشخص نمودن نوع محتوا است که می‌تواند تحولی در عرصه‌ی موتورهای جستجو باشد به این صورت که شما با مشخص کردن مکان دقیق
مطالبتان، آنها را  از قسمت‌های دیگر سایت که همیشه ثابت هستند جدا کرده و باعث دسته‌بندی صحیح محتوا نزد موتورهای جستجو می‌شوید. حاشیه را کنار گذاشته و با تصویری به شما درباره این قابلیت HTML5 توضیح می‌دهم.
HTML5 Page Reviewهمانطور که در تصویر بالا مشاهده میکنید تمامی قسمت‌ها توسط تگ‌هایی از یکدیگر جدا شده‌اند و کار را برای موتورهای جستجو فوق‌العاده راحت میکنند. تصویر بالا کاملا واضح است اما درباره هر یک از کدهای به کار رفته در تصویر در ادامه همین مطلب توضیح خواهم داد. پس همراه باشید.

<header>

همانطور که از نامش پیداست مکان دقیق سربرگ سایت را مشخص می‌سازد و تمامی عناصر مربوط به سربرگ بین دو تگ <header> و </header> قرار می‌گیرند به صورت زیر:<header>
.
.
</header>

<aside>

مکان دقیق منو را مشخص می‌سازد که شما میتوانید از این کد برای مشخص کردن محل دقیق منو و ابزارک‌ها به موتورهای جستجو استفاده کنید. توضیح خاصی ندارد و مانند <header> باید تمامی کدها را بین دو کد <aside> و </aside> قرار دهید.

<section>

حتما در سایت‌های مختلفی بخشی را با عنوان ویژه‌ها، تبلیغات و … دیده‌اید. مانند پست‌های منتخب در یک سایت که با تصاویری به صورت اسلاید نمایش داده میشوند و … تمامی این قسمت‌ها که به نوعی قسمت‌های اضافی سایت هستند و نبود آنها تاثیری روی سایت نمی‌گذارد را با تگ <section> مشخص می‌سازند.

<article>

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

<footer>

اما تگ <footer> همانطور که از نام آن مشخص است برای مشخص کردن مکان پابرگ سایت یا وبلاگ استفاده میشود و تمامی عناصری که در قسمت پابرگ وبلاگ قرار می‌گیرند بین دو تگ <footer> و </footer> قرار می‌گیرند.

تا اینجا ۵ تگ مهم و از نظر من بهترین تگ‌های اضافه شده به نسخه جدید HTML را بازگو کردم اما هنوز درباره ساختار یک صفحه توضیحی داده نشده است پس جا دارد کمی هم درباره ساختار یک صفحه وب صحبت کنیم.
در نسخه قدیمی HTML یعنی نسخه ۴ آن برای شروع کدنویسی هر صفحه باید استاندارد آن صفحه تایید میشد که با کد زیر مشخص می‌شود:<!DOCTYPE html PUBLIC "-//W۳C//DTD XHTML ۱.۰ Transitional//EN" "http://www.w۳.org/TR/xhtml۱/DTD/xhtml۱-transitional.dtd">

<html xmlns=”http://www.w۳.org/۱۹۹۹/xhtml”>اما در HTML۵ دیگر لازم نیست دو خط کد بنویسید تا استاندارد جهانی HTML را مشخص کنید و فقط کافی است با تکه کد زیر در ابتدای کدها، استانداردتان را مشخص کنید:<!DOCTYPE html>همانطور که مشاهده کردید کدها در HTML۵ بسیار بهینه‌تر از گذشته شده اند اما دلیل این حرف من تنها این مورد نیست.
تگهای بسیاری در نسخه جدید جایگزین چندین خط کد شده‌اند که تا جایی که امکان داشته باشد درباره هریک از آنها به طور جداگانه توضیح خواهم داد. به عنوان مثال برای مشخص کردن نوع کاراکتر سایت و تنظیم آن به UTF8 قبلا باید کد زیر را می‌نوشتید:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />اما حالا در نسخه جدید فقط کافی است از کد زیر استفاده کنید:<meta charset="UTF-۸">این کدها در مورد فایلهای سایت نیز صدق میکنند. شما قبلا برای قراردادن یک پلیر صوتی یا تصویری در سایت باید از چندین خط کد استفاده میکردید و برای داشتن یک پلیر خوش‌ساخت باید دست به دامان جاوا میشدید ولی در HTML5 به راحتی و فقط با یک تگ می‌توانید یک پلیر فایلهای صوتی و تصویری با یک پلیر زیبا داشته باشید. (در مطالب بعدی بیشتر درباره تگهای پخش کننده فایلهای صوتی و تصویری خواهم نوشت).
امیدوارم تا اینجای کار را به خوبی بیان کرده باشم. خوشحال می‌شوم اگر با نظرات سازنده خود مرا در نگارش بهتر مقالات یاری نمایید.
این مقاله میتواند به دست شما نیز منتشر شود. اگر مقاله‌ای در مورد طراحی وب دارید می‌توانید آن را با نام خودتان در فاروکسا منتشر کنید.
موفق و پیروز باشید.

8 دیدگاه برای «درباره HTML5 و قابلیت‌های آن – ساختار کلی یک صفحه وب»

  1. سلام فکر کنم از این بعد به همه پست هات نظر بدم
    آخه بیننده ثابت وبت شدم مطالبت عالی هستش
    شاید این مطالب را توی خیلی از دیگر سایتها میبینم ولی رقبت خوندنشو ندارم ولی اینجا هر چند تکرای میخونم
    موفق باشی

امکان ثبت دیدگاه وجود ندارد.