HTML چیست؟ معرفی نسخه جدید و لیست پرکاربردترین تگ های آن
در این مبحث قصد داریم شما را با HTML بیشتر آشنا کنیم. برای این منظور، ابتدا یک معرفی مختصر از آن خواهیم داشت، سپس به تاریخچه نسخه های منتشر شده این زبان می پردازیم و جدیدترین نسخه آن را معرفی می کنیم. در ادامه تفاوت هایی که html5 با html دارد را بررسی می کنیم. چندین تگ HTML پرکاربرد را معرفی می کنیم. خواهیم گفت که چه ارتباطی بین اچ تی ام ال با CSS و JavaScript وجود دارد و در نهایت به این سوال که چرا html یک زبان برنامه نویسی نیست پاسخ می دهیم. پس تا پایان مطلب همراه ما باشید.
دوره ای که در حال حاضر در آن زندگی می کنیم با فضای مجازی گره خورده است. در این دنیای دیجیتال، وب سایت یکی از بسترهایی است که نقش پر رنگی در ارتباطات مجازی ما دارد.
هر صفحه وب از دو بخش تشکیل شده است: یک بخش ظاهری که برای نمایش به کاربر است و به اصطلاح سمت کاربر یا کلاینت یا فرانت اند (Front-End) گفته می شود و بخش کدهای پشت صفحه که به زبان های PHP، ASP.NET، PYTHON و ... است و به اصطلاح بک اند (Back-End) گفته می شود. ما در این مقاله با بخش ظاهری کار خواهیم داشت.
در حالت کلی، جهت برنامه نویسی سمت کاربر از سه زبان اصلی HTML، CSS و JavaScript استفاده می شود. ابزار های دیگری هم هستند که در کنار زبان های بالا برای راحتی کار برنامه نویسان فرانت اند ارائه شده اند و می توان از آنها نیز استفاده کرد مانند کتابخانه آماده جی کوئری و فریمورک هایی نظیر بوت استرپ.
تمرکز ما فقط بر روی HTML خواهد بود و همانطور که تا اینجای مطلب متوجه شدیم، این زبان در بخش ظاهری صفحه وب استفاده می شود. اما اینکه html چیست و چه تاریخچه ای دارد، در ادامه به آن می پردازیم.
HTML چیست و جدیدترین نسخه منتشر شده آن کدام است؟
HTML مخفف عبارت HyperText Markup Language و به معنی زبان نشانه گذاری فرامتن می باشد که برای طراحی صفحات وب به کار می رود. این زبان از یکسری تگ HTML تشکیل شده است که به وسیله آن، اسکلت و بدنه اصلی وب سایت و عناصر موجود در آن مانند متن، تصویر و ... شکل می گیرد. تگ های html توسط تمام مرورگرها بدون نیاز به مفسر یا کامپایلر، رندر و به اطلاعات قابل نمایش برای کاربر تبدیل می شوند. برای نوشتن این تگ ها می توان از ساده ترین ادیتورهای متنی Text Document، Notepad و یا محیط های برنامه نویسی پیشرفته مانند Visual Studio Code استفاده کرد. پسوند فایل های اچ تی ام ال به صورت .htm و یا .html می باشد.
اچ تی ام ال زبانی است که مدام در حال تکامل بوده و با ارائه نسخه های جدید، سعی در بهبود عملکردهای خود داشته است. در حال حاضر جدیدترین نسخه اچ تی ام ال با عنوان HTML 5.2 می باشد که در سال 2017 منتشر شده است.
در پیشینه ای که از نسخه های این زبان وجود دارد، به طور خلاصه می توان گفت که: این زبان نشانه گذاری توسط تیم برنرزلی، رئیس کنسرسیوم جهانی وب در اواخر سال 1991 ایجاد شد اما به طور رسمی منتشر نشد و در سال 1995 با عنوان HTML 2.0 ارائه شد. پس از آن HTML 3.2 در سال 1997 و HTML 4.01 در اواخر سال 1999 عرضه شد و در نهایت نسخه جدید اچ تی ام ال با عنوان html5 در سال 2012 منتشر شد که تاکنون دو نسخه بروز شده از آن ارائه شده است.
تغییرات نسخه html5 نسبت به html
HTML5 جدیدترین نسخه بروز شده اچ تی ام ال است که در ادامه مطلب به مهم ترین تغییرات html5 اشاره شده است:
- اعلان مشخص کردن نوع سند کوتاه تر شده است <!Doctype html>
- تمام مرورگرهای جدید مانند موزیلا، کروم و ... آن را را پشتیبانی می کنند.
- اضافه شدن تگ های معنایی (Semantic Tags) به جای استفاده از تگ div برای بخش بندی وب سایت. این تگ ها شامل <header>، <nav>، <aside>، <main>، <article>، <section>، <footer> هستند. تگ های معنایی به فهم سریعتر ربات های گوگل از ساختار سایت ما کمک می کنند و به این طریق ربات ها در ایندکس مطالب بهتر عمل می کنند.
اضافه شدن تگ HTML جدید برای ایجاد فایل های چندرسانه ای:
- تگ <canvas> و تگ <svg> برای ساخت گرافیک برداری
- تگ <video> و تگ <audio> برای درج ویدئو و صوت در وب سایت و پخش آنها بدون نیاز به نرم افزار فلش پلیر
- تگ <figure> برای قرار دادن عکس با کپشن و توضیحات
- پشتیبانی از ویژگی های async و ping
- توانایی مدیریت سینتکس و قواعد نوشتاری نادرست
- استفاده از JS GeoLocation API برای بدست آوردن موقعیت جغرافیایی کاربر
- رسم اشکال دایره، مستطیل، مثلث و ...
- حذف و منسوخ شدن تعدادی از تگ ها: از جمله تگ های <center>، <frame>، <font>، <big>، <dir>
لیست پرکاربردترین تگ های HTML
هر سند اچ تی ام ال دارای تعدادی تگ اصلی است از جمله:
- تگ html: تگ ریشه و در برگیرنده تمام تگ ها
- تگ head: تگ سر صفحه وب و شامل تگ های title (عنوان سایت)، meta یا متاتگ ها (توصیف بهتر محتوا)، script (درج اسکریپت ها)، style (تعریف استایل) و link (فراخوانی css). تگ هد داخل تگ HTML قرار دارد.
- تگ body: به عنوان بدنه و در برگیرنده محتوای سایت. این تگ بعد از تگ هد قرار می گیرد.
این تگ ها ساختار کلی سند ما را مشخص می کنند و وجود آنها لازم و ضروری است.
در ادامه لیستی از مهم ترین تگ هایی که در بخش body قرار می گیرند به همراه توضیح مختصر آنها ارائه شده است.
| تگ HTML | توضیحات |
|---|---|
| <p> | ایجاد پاراگراف |
| <h1>…<h6> | عناوین و تیترها |
| <a> | ایجاد لینک |
| <img> | گذاشتن تصویر |
| <div> | ایجاد قسمت های مختلف برای صفحه |
| <ul> <li>…</li></ul> | ساخت منو و لیست بولت دار |
| <span> | ایجاد محتوای متفاوت از نظر رنگ، فونت و... |
| <br> | ایجاد فاصله عمودی و معادل اینتر |
| <hr> | خط افقی |
| <pre> | پاراگراف با قابلیت نمایش اینتر و اسپیس |
| <form> | ایجاد فرم |
| <button> | گذاشتن دکمه |
| <input> | ایجاد کنترل ورودی در فرم |
| Semantic Tags (تگ های معنایی) | بخش بندی صفحه |
| <video> | گذاشتن ویدئو |
| <audio> | گذاشتن صوت |
| <svg> | گرافیک برداری |
| <strong> | متن برجسته با ارزش بالا |
| <map> | ایجاد نقشه تصویری با نقاط قابل کلیک |
| <area> | ایجاد لینک روی تصویر |
| <embed> | قرار دادن فایل خارجی |
| <table> | ساخت جدول |
| <tr> | سطر در جدول |
| <td> | سلول در جدول |
| <blockquote> | نقل قول |
چه رابطه ای بین HTML، CSS و JavaScript وجود دارد؟
با زبان HTML تنها می توان ساختار اصلی وب سایت را ایجاد کرد بنابراین اگر بخواهیم بر روی ظاهر صفحات کار کنیم و آنها را از نظر رنگ، سایز و ... تغییر دهیم بایستی از استایل های css استفاده کنیم. در واقع می توان گفت html و css مکمل یکدیگر در طراحی صفحات وب هستند.
همچنین اگر بخواهیم المان های صفحه وب را، به صورت پویا و تعاملی با تعریف توابع و رویدادها کنترل کنیم تا عمل مورد نظر را انجام دهند، از جاوا اسکریپت استفاده می کنیم. کدهای جاوا اسکریپت در سمت کاربر اجرا می شوند و درخواستی به سمت سرور ارسال نمی شود. به عنوان مثال زمانی که کاربر روی دکمه ای کلیک کرد پیغامی نمایش داده شود و ...
کدهای css و جاوا اسکریپت معمولا در فایل های جداگانه با پسوند .css و .js ذخیره شده و سپس برای اعمال این کدها در صفحات وب، آنها را در تگ هد صفحه فراخوانی می کنیم.
HTML یک زبان برنامه نویسی نیست
همانطور که گفته شد html یک زبان نشانه گذاری فرامتن است. فرامتن به این معنی است که ما با متن می توانیم فراتر از متن ایجاد کنیم مانند تصویر، صوت، ویدئو و .... به عنوان مثال وقتی از تگ <img> استفاده می کنیم منظور همان تصویر است و از آنجا که مرورگرها به ساختار تگ HTML آشنا هستند بدون هیچ پردازشی معادل همان تگ را به ما نشان می دهند. در مقابل زبان های برنامه نویسی شامل دستورالعمل های کنترلی و شرطی است و می بایست روی آنها پردازشی انجام شود تا نتیجه آن برای کاربر نشان داده شود.
برای درخواست مشاوره و پیشنهاد همکاری با شرکت برکه میتوانید از طریق فرم مشاوره با ما در تماس باشید.
فرم مشاوره