HTML چیست؟

Hyper Text Markup Language

کلمه HTML مخفف Hyper Text Markup Language به معنای «زبان نشانه گذاری ابرمتن» است. این زبان به صورت اختصاصی برای شرکت خاصی نیست و کنسرسیوم جهانی وب این زبان را پشتیبانی میکند.

کد HTML که میخوانیم اچ تی ام ال اولین و مهم ترین و پرکاربرد ترین زبان طراحی سایت می باشد. صفحه ای که در حال حاضر در پیش روی شماست با اچ تی ام ال نوشته شده است. کافی ست روی صفحه کلیک راست کنید و گزینه ی View page source انتخاب کنید. بیشتر حجم کد های پیش روی شما در صفحه ی View page source را زبان اچ تی ام ال می گویند.

HTML چیست؟

لازم به ذکر است که HTML یک زبان برنامه نویسی نیست بلکه یک زبان طراحی وب سایت میباشد که به وسیله ی تگ ها میتوان اسکلت سایت را ساخت و بعد از آن به وسیله زبان CSS میتوان به آن استایل داد و سایت را زیبا و جذاب کرد. پایه و اسکلت هر سایتی زبان HTML میباشد، HTML از تعدادی تگ (tags)  به وجود آمده است که با این تگ ها میتوانید بسیاری از خدمات مانند لینک ها و عکس ها و متن و ویدیو و جداول و فهرست ها و … را ارایه دهید.

(tags) در زبان نشانه گذاری html

تگ‌ها در HTML به دو دسته تگ باز (opening tag) و تگ بسته (closing tag) تقسیم می‌شوند. تگ باز با علامت < شروع می‌شود و تگ بسته با علامت </ پایان می‌یابد. بین دو تگ می‌توان محتوایی را قرار داد. برای مثال، تگ <p> برای تعریف یک پاراگراف استفاده می‌شود و تگ </p> برای بستن پاراگراف.

HTML هسته اصلی هر صفحه وب

HTML هسته اصلی هر صفحه وب است.هر صفحه وبی در هر سایتی که میبینید از HTML ساخته شده است و هرگونه المانی که در سایت ها میبینید مانند متن، عکس و ... که توسط مرورگر وب شما نمایش داده می شوند.

یک سند اچ تی ام ال رو معمولا با پسوند htm یا html نامگذاری میکنند، که به سادگی می توانید داخل یک Notepad اولین سند HTML خود را تنظیم کنید و با پسوند .htm و یا .html ذخیره کنید و بدون هیچ ابزار دیگری در مرورگر باز کنید، فایل های html برای اجرا شدن نیاز به هیچ کامپایلری ندارند و خود مرورگر به تنهایی میتواند آن را اجرا کند. با فایرفاکس یا گوگل کروم یا هر مرورگری میتوانید کد ها رو اجرا کنید و خروجی نهایی را مشاهده نمائید.

تاریخچه HTML

HTML هم زبانی هست که در طول زمان دستخوش تغییراتی برای زیبایی و کارآمدی بیشتر شده است. اولین نسخه این زبان HTML1.0 بود، این نسخه محدود کننده بود و فقط میتوانستیم یک متن ساده در وب بگذاریم تا اینکه نسخه HTML2.0 وارد بازار شد که تمام ویژگی های نسخه اول را داشت بعلاوه ی چند ویزگی جدید، این نسخه تا ژانویه 1997 کارآیی داشت.

با گذشت زمان تعداد بیشتری به سمت HTML گرایش پیدا کردند اما این دو نسخه جوابگوی آن ها نبود. به دلیل اینکه همه به دنبال ویژگی ها و توانایی بیشتری بودند تا اینکه گروهی HTML3.0 را تولید کردند که در آن تگ ها و ویزگی های جدیدی وجود داشت اما به دلیل اینکه مرورگرها ویژگی های جدید را به کندی بارگزاری میکردند این نسخه از دور خارج شد. کمی بعد کنسرسیوم وب جهانی HTML3.2 را که اولین نسخه ی خود بود را به بازار ارایه داد.

نسخه HTML 4.01 تحول بسیار بزرگی نسبت به نسخه های پیشین داشت و در دسابمر 1997 پیشنهاد داده شده و در آوریل 1998 به استاندار رسمی طراحی سایت تبدیل شد.

تحولی بزرگ در دنیای HTML

و در نهایت در سال 2004 تصمیم به ساختن آپدیت جدید گرفنه شد و در سال 2010 نسخه HTML5.0 وارد بازار شد که تا اکنون مورد استفاده قرار میگیرد. این ورژن نسبت به ورژن های قبلی خیلی بیشتر تغییر کرده و تگ های جدیدی مانند header، video، canvas و audio و بسیار تگ های جدید را در خود دارد. از مهمترین ویژگی های این زبان میتوان گفت که امکان استفاده همزمان از نوشته و انیمیشن و صدا را دارد که قبل از اچ تی ام ال 5 نبودن این امکان باعث ناراحتی بسیاری از طراحان سایت می شد.

HTML 5

نسخه HTML 5 تحول عظیمی در وب معنایی بود، این نسخه با هدف تسهیل و ساده سازی برای پردازش ماشین کمک بسیاری در درک و فهم جزئیات و محتوایات صفحه ساخته شده است، بعنوان مثال یک ربات خزنده گوگل می تواند منوی ناوبری سایت را با استفاده از تگ استاندارد شده برای این موضوع که با نام تگ nav مورد استفاده قرار میگیرد، درک کند و به راحتی رفتار مناسبی نسبت به آن نشان دهد. به این تیپ از تیگ ها تگ های معنا گرا (Semantic Tags) می گویند که می توان گفت داخل خود متا دیتایی دارند و نیازی به نوشتن هیچ کد و توضیحات اضافه دیگری ندارند.

برخی امکانات اضافه شده به HTML5:

• پشتیبانی از SVG
• پشتیبانی بهتر از ویدئو
• پشتیبانی بهتر از ویدئو
• پشتیبانی بهتر از CSS3
• گرافیک های 2 بعدی و 3 بعدی
• پایگاه‌های داده لوکال (Local)
• تگ های معنا یی (Semantic Tags)

طراحی صفحات وب با استفاده از HTML و CSS

طراحی صفحات وب با استفاده از HTML و CSS یکی از اصولی‌ترین و شاید هم مهم‌ترین قسمت‌های طراحی وب است. HTML به عنوان زبان برنامه‌نویسی اصلی برای ساختاردهی و ایجاد محتواهای وب سایت‌ها استفاده می‌شود. این زبان، توانایی تعریف عناصر مختلفی را برای ساختاردهی صفحات وب ارائه می‌دهد، از جمله سربرگ‌ها، پاراگراف‌ها، تصاویر، لینک‌ها و جداول.

با استفاده از زبان برنامه نویسی CSS، طرح بندی و استایل دهی به صفحات وب صورت می‌گیرد. این زبان، ابزارهای زیادی را برای کنترل ظاهر و صفحه‌بندی صفحات وب فراهم می‌کند. با استفاده از CSS، می‌توانید رنگ‌ها، فونت‌ها، حاشیه‌ها، پس‌زمینه‌ها و دیگر ویژگی‌هایی را که می‌خواهید در طرح خود ببینید، تعریف کنید. همچنین با استفاده از CSS، می‌توانید به راحتی یک طرح بندی شیک و حرفه‌ای برای صفحات خود ایجاد کنید.

برخی از تگ های عمومی HTML:

• تگ <html> :  تگ اصلی HTML که تمامی تگ های اچ تی ام ال در آن قرار میگیرد. این تگ اجباریست باید حتما داخل هر صفحه ای وجود داشته باشد
• تگ <head> : اطلاعاتی مثل عنوان صفحات، کلمه کلیدی آن صفحه، کد های جاوا اسکریپت، توضیحی درباره طراح و … که عموما متا دیتا ها (Meta Tags) هستند را تعریف میکند.
• تگ <body> :  این تگ پس از تگ head قرار میگیرد و هر چه که در آن نوشته شود در سایت نمایش داده خواهد شد.
• تگ <a> :  از این تگ برای لینک دادن استفاده میشود.
• تگ <input> :  این تگ برای قرار دادن دکمه ای برای چیزی نوشتن یا تیک زدن استفاده میشود.
• تگ <img> :  این تگ برای عکس گذاشتن استفاده میشود و با وارد کردن آدرس تصویر در ویژگی src تگ می توانید آن تصویر را در خروجی فایل HTML ببینید.
• تگ <p> :  با استفاده از این تگ پاراگراف های خود را در آن قرار میدهید.
• تگ <div>  :  یکی از مهم ترین تگ های HTML که کارایی بالایی دارد و یکی از ویژگی های این تگ این است که میتوانید سایت را به طور دلخواه تکه تکه کنید و هر بخش را مخصوص کار مورد نظرتان قرار دهید.
• تگ <h1>, <h2>, <h3> و غیره: برای تعریف عنوان‌ها استفاده می‌شود.

HTML و SEO: نحوه استفاده از تگ‌ها برای بهبود جایگاه در نتایج جستجوگرها

استفاده صحیح از تگ‌های HTML می‌تواند به بهبود جایگاه صفحات وب (می توانید مقاله مرتبط با سئو چیست را مطالعه فرمایید) در نتایج جستجوگرها کمک کند. به طور مثال، استفاده از تگ‌های عنوان (Heading Tags) مانند H1 و H2 به موتورهای جستجو اطلاع می‌دهد که عنوان صفحه چیست و از اهمیت بالایی برخوردار است. همچنین، استفاده از تگ‌های Alt در تصاویر به موتورهای جستجو کمک می‌کند تا محتوای تصاویر را درک کنند و در نتیجه صفحه را در جستجوگرها بهتر رتبه‌بندی کنند. همچنین، استفاده از تگ‌های مرتبط مانند Meta Description و Meta Keywords می‌تواند به توضیحات دقیق تر صفحه کمک کند و در نتیجه رتبه‌بندی بهتری را در جستجوگرها به دست آورد. در کل، استفاده صحیح از تگ‌های HTML می‌تواند به بهبود جایگاه صفحات وب در نتایج جستجوگرها کمک کند، اما باید توجه داشت که استفاده از تگ‌های بیش از حد و یا نادرست ممکن است به جایگاه صفحه در نتایج جستجوگرها آسیب برساند.