«اچ.تی.ام.ال» یک زبان نشانه گذاری استاندارد برای ایجاد صفحات وب است. این زبان با استفاده از نشانه‌ها، ساختار صفحات را تعیین می‌کند. عناصر HTML بلوک‌های سازنده صفحات هستند و با استفاده از تگ‌ها مشخص می‌شوند. هر تگ HTML بخش‌هایی از محتوا مثل عنوان، پاراگراف، جدول و غیره را مشخص می‌کند. مرورگرها این تگ‌ها را نمایش نمی‌دهند بلکه از آن‌ها برای تفسیر محتوای صفحه استفاده می‌کنند.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
اگر به این سند (Document) توجه کنید می‌بینید که از چند تگ با علامت <> تشکیل شده است که هر کدام بخش‌هایی از سند HTML را برای مرورگرها توضیح می‌دهند. حالا به توضیح هر قسمت از این سند می پردازیم تا ببینیم هر تکه کد چه معنایی در بر دارد و چه دستوری به مرورگر برای نمایش محتوا می‌دهد:
– عبارت <DOCTYPE html!> مشخص می‌کند که این سند یک سند HTML5 است.
– عنصر <html> عنصر ریشه یک صفحه HTML است.
– عنصر <head> حاوی اطلاعات متا در مورد سند است.
– عنصر <title> عنوان سند را مشخص می‌کند.
– عنصر <body> حاوی محتوای قابل دیدن صفحه است.
– عنصر <h1> یک عنوان درشت را تعریف می‌کند.
– عنصر <p1> پاراگراف را تعیین می‌کند.
تگ‌ها در واقع نام عناصر هستند که درون پرانتز‌های شکسته قرار می‌گیرند. تگ‌های HTML معمولا به حالت جفت می‌آیند مثل <p> و <p/> . تگ اول در جفت را تگ آغازین و تگ دوم را تگ پایانی می‌نامند. تگ پایانی درست به شکل تگ آغازین نوشته شده اما یک اسلش ( / ) هم قبل نام تگ قرار داده می‌شود.
هدف یک مرورگر وب (مثل گوگل کروم، اینترنت اکسپلورر، فایرفاکس یا سافاری) خواندن اسناد HTML و نمایش آن‌ها است. مرورگر تگ‌های HTML را نمایش نمی‌دهد اما از آن‌ها برای تعیین نحوه نمایش سند استفاده می‌کند.
در زیر نمایی از ساختار یک صفحه HTML آمده است:
نکته: فقط محتوای درون بخش <body> در مرورگر نمایش داده می‌شود.
این عبارت نشان‌دهنده نوع سند است و به مرورگرها کمک می‌کند تا صفحات سایت را به درستی نمایش دهند. این عبارت باید فقط یک بار و در بالای صفحه (قبل از هرگونه تگ HTML) قرار بگیرد. این عبارت برای HTML به صورت <!DOCTYPE html> نوشته می‌شود.
می‌توان صفحات وب را با استفاده از ویرایشگرهای حرفه‌ای HTML ایجاد کرده و تغییر داد. البته ما در دوره آموزش HTML در لیداوب، توصیه می‌کنیم برای یادگیری HTML از یک ویراشگر متنی ساده مانند نوت پد (PC) یا تکست ادیت (Mac) استفاده کنید. به نظر می‌رسد استفاده از یک ویرایشگر ساده روش خوبی برای یادگیری HTML باشد. با دنبال کردن چهار مرحله زیر می‌توانید اولین صفحه وب خود را با نوت پد یا تکست ادیت ایجاد کنید. البته اگر دوست داشته باشید از امکانات بیشتری بهره ببرید، می‌توانید روی سیستم عامل ویندوز از ++Notepad هم استفاده کنید.
در ویندوز ۸ و نسخه‌های بعدی ابتدا منوی استارت را باز کرده و عبارت Notepad را تایپ کنید. در ویندوز ۷ و نسخه‌های قبلی، منوی استارت را باز کرده، وارد قسمت Programs شده و Accessories را انتخاب کرده و سپس Notepad را پیدا و باز کنید.
قسمت Finder را باز کرده، از منوی اپلیکیشن گزینه TextEdit را انتخاب کنید. همچنین باید برخی از preferenceها را تغییر دهید تا فایل‌ها به درستی ذخیره شوند. در قسمت Preference، گزینه Format و سپس Plain Text را انتخاب کنید. سپس باکسی «Ignore rich text commands in HTML files» که در زیر گزینه «Open and Save» قرار دارد را تیک بزنید. سپس یک سند جدید باز کرده تا کدهای خود را در آن قرار دهید.
داخل نوت پد کدهای HTML را نوشته یا کپی کنید.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
فایل را روی کامپیوتر ذخیره کنید. گزینه File و سپس Save as را در منوی نوت پد انتخاب کنید. فایل را به نام «index.htm» نام‌گذاری کرده و حالت encoding را روی UTF-8 (که حالت encoding مطلوب برای فایل‌های HTML است) تنظیم کنید.
پسوند فایل می‌تواند .htm یا .html باشد که هیچ فرقی هم با هم ندارند و به سلیقه شما بستگی دارد.
فایل HTML ذخیره شده را روی مرورگر مورد نظر خود باز کنید (روی فایل دابل کلیک کنید). نتایج به شکل زیر خواهد بود: