دلایل معنایی شدن HTML5
توسط حمیدرضا عباسی
هر کسی که امروزه در بحث طراحی وب سایت و یا برنامه نویسی آن دست اندرکار باشد این حرف را حتما خواهد زد که زبان HTML5 بسیار معنایی و مفهومی شده است. البته این جمله برای بسیاری از افراد ممکن است کمی در ابتدا گیج کننده به نظر برسد, به خصوص که در اینترنت و کتاب های مختلف از بخش های جدید آن تعابیر و مفاهیم مختلفی گفته میشود و مخاطبان و خوانندگان آن مقاله ممکن است بیشتر گیج شوند.
در این مقاله از وب شهر میخواهیم به شما در مورد این مفهومی بودن زبان توضیح دهیم و وضعیت کنونی و آینده این زبان را برای شما مشخص نماییم.
مفهومی بودن یک معنا میباشد
مفهومی بودن بیشتر به شاخه ای از زبان بر میگردد که میتوانیم بخشی را به صورت خاص به مخاطب خود معرفی نماییم. به عنوان مثال در زبان انگلیسی میتوانیم تفاوت را بین گرامر و معنی آن به مخاطب خود بگوییم.
مفهومی بودن بیشتر به این معنا میباشد که که مردم میتوانند حس خود را از خواندن متن مربوطه به حالتهای مختلف برداشت نمایند. معمولا از کلمه مفهومی زیاد در HTML5 استفاده شده است. به یاد داشته باشید که ما در مورد یکی از زبانهای کامپیوتر صحبت میکنیم و نه افراد یا اشخاص. مفهومی بودن در زبان HTML5 به این معنا میباشد که نرم افزار و در این سناریو قدرت صفحه وب سایت طراحی شده را افزایش دهیم و کارکردهای آن را بهبود ببخشیم.
به عنوان مثال به قطعه کد زیر توجه فرمایید.
<p>The man threw the computer through the window.</p>
<img src=“broken_window.png” alt=“Broken Window” />
توسط تگ و خصوصیت های آن به مرورگر اینترنتی در مورد نوع اطلاعات و همچنین خود کاربر اطلاعاتی را میدهیم. پاراگراف ها کلا در طراحی سایت دارای فاصله ای اضافی در بالا و پایین میباشد و همچنین تصاویر توسط تگ مربوطه و خصوصیت src در مرورگر اینترنتی به کاربر نشان داده میشود. زمانی که مرورگر به هر یکی از این آبجکت ها برسد, به همان صورت که طراح وب سایت آن را تعریف نموده باشد نمایش میدهد و موقعیت آنها را تعیین مینماید.
ساختار تگهای HTML از قبل دارای معنا و مفهوم بوده اند.
به خاطر سپردن این نکته بسیار مهم میباشد که زبان HTML5 برای اولین بار بحث مفهومی بودن را به دنیای طراحی وب سایت معرفی ننموده است. زبان HTML دارای تگ های مفهومی در گذشته هم بوده است. اما نسخه جدید زبان HTML بسیار متفاوت کار نموده است. اگر شما به قطعه کد پایین که برای تمامی طراحان وب سایت مشخص است نگاه نمایید:
<img src=“broken_window.png” alt=“Broken Window” />
اگرچه بسیار کوتاه و خلاصه میباشد, نام تگ img نمایانگر نوع خود تگ میباشد, که همان نام Image است. در این لحظه شما باید به مواردی بیشتر توجه داشته باشید که خود تگ را تفسیر و بیان مینماید.
به خاطر داشته باشید که چه زمانی خود محتویات صفحه از خصوصیت های Style آن مجزا میشود؟
بعضی از تگ های زبان HTML که مورد استفاده قرار میگیرد به خود مرورگر میگوید که چگونه آن آبجکت را در داخل صفحه قشنگتر و یا Style بدهد. از گذشته تا به الان روال بر این صورت بوده است که خود محتویات صفحه از Style آن متفاوت بوده است.
به عنوان مثال ما تگ i را با تگ em جابجا نموده ایم بطوریکه در هر دوی این تگها کاملا نتیجه یکسان ملاحظه میگردد. دلیل استفاده از تگ em به جای تگ i این بوده است که اطلاعاتی در رابطه با خود آیتم داخل آن به مرورگر و کاربر اعلام نماییم نه نحوه نمایش آن در مرورگر.
تگهای مفهومی زبان HTML5 فراتر از همه این مراحل عمل نموده است. هدف بالاتری از استفاده از این تگ ها در طراحی صفحات وب سایت و یا نرم افزارهای تحت وب مورد نظر است.
تگ های جدید و مهم زبان HTML5 چه چیزهایی میباشند که باید در طراحی وب سایت مورد استفاده قرار بگیرد
به راستی مفاهیم و بخشهای جدید اضافه شده در زبان HTML5 چه چیزهایی میتوانند باشند؟ به طور کلی زبان HTML5 دارای چندین تگ مفهومی جدید میباشندکه میتوانید توسط آنها اطلاعات را با فرمت و قالب مناسب تر در اختیار کاربرانتان قرار دهید.
تگ Header برای برای بالای وبسایت میتواند مورد استفاده قرار بگیرد.
<header>
<h1>گروه طراحی سایت وب شهر</h1>
</header>
این تگ میتواند در داخل خودش تگهای دیگر هم داشته باشد مانند تگ h1.
تگ footer مانند تگ header میباشد.
تگ nav برای بیان نمودن بخش ناوبری وب سایت یا همان navigation مورد استفاده قرار میگیرد.
<nav>
<ul>
<li> <a href=“news.php”>News</a></li>
<li><a href=“weather.php”>Weather</a></li>
<li><a href=“entertainment.php”>Entertainment</a></li>
</ul>
</nav>
تگ section برای در بر گرفتن مجموعه ای از آیتم ها میتواند در طراحی صفحات وب سایت مورد استفاده قرار بگیرد.
<section id=“overview”>
<h2>What happened</h2>
<p>Police officers apprehended the man at 3.30pm…</p>
<img src=“images/arrest.jpg” alt=“The Arrest”/>
</section>
در ادامه تگ دیگری به نام article وجود دارد که میتواند برای توصیف یک روایت و یا همان مقاله ها مورد استفاده قرار بگیرد.
<article>
<h2>The Law</h2>
<p>The law on throwing items through windows is very clear…</p>
</article>
نتیجه گیری
در زمان های گذشته حتما شما ها هم خاطرتان میباشد که معلمان ما در مورد انتقلابی در زمینه دسترسی به اطلاعات صحبت مینمودند. آنها به صورت مستقیم یا حتی غیر مستقیم به تکنولوژی وب اشاره داشتند. بنابراین امروزه که در دل این بستر بسیار بزرگ هستیم باید بیشتر در مورد آن بدانیم و سعی نماییم این تکنولوژی بسیار مهم را در زندگی روزمره خود نیز به کار ببریم. زبان HTML5 طراحی وب سایت را متحول خواهد نمود و بسیاری از مشکلاتی که امروزه کاربران و یا حتی خود طراحان وب سایت با آنها دست و پنجه نرم مینماییند را به طور کامل حل خواهد نمود.
امروزه جالب است بدانیم که همین مفهومی بودن و تگ هایی که در بالا به آن اشاره شد در سئو وب سایت و بهینه سازی سایت تاثیر و نقش بسیار مستقیمی دارد.
حمیدرضا عباسی
حمیدرضا عباسی هستم، کارشناس نرم افزار و دانشجوی کارشناسی ارشد تجارت الکترونیک، طراح و توسعه دهنده وب سایت و متخخص سئو، از سال ۹۰ به صورت حرفه ای شروع به فعالیت در زمینه طراحی وب سایت کردم و بسیار علاقه مند و مشتاق به استفاده از تکنولوژی های جدید و بروز در زمینه طراحی وب سایت و تجارت الکترونیک هستم.
