HTML مخفف HyperText Markup Language است. دقت کنید: Markup Language، نه Programming Language. یعنی HTML منطق ندارد، حلقه ندارد، شرط ندارد. فقط «نشانه‌گذاری» می‌کند که کجای صفحه چه چیزی باشد.
وقتی مرورگر یک فایل HTML را باز می‌کند، آن را می‌خواند و یک درخت از عناصر می‌سازد به نام DOM یا Document Object Model. همین DOM است که بعداً با CSS زیبا می‌شود و با JavaScript زنده.
به عنوان یک برنامه نویس بکند، مهم است بدانیم HTML همان خروجی نهایی است که سرور ما تولید می‌کند (در SSR) یا قالبی است که داده‌های JSON ما در آن ریخته می‌شود (در SPA). پس اگر HTML را نفهمیم، عملاً نمی‌دانیم محصول نهایی کارمان چه شکلی است.
بیایید ساده‌ترین صفحهٔ ممکن را ببینیم. یک فایل با نام index.html بسازید و کد زیر را داخل آن بگذارید:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>این اولین صفحهٔ HTML من است.</p>
</body>
</html>حالا این فایل را با مرورگر باز کنید. یک صفحهٔ سفید می‌بینید با یک عنوان بزرگ که نوشته «Hello, World!» و یک پاراگراف زیرش.
<!DOCTYPE html> — به مرورگر می‌گوید این یک سند HTML5 است. اگر نباشد، مرورگر به حالت قدیمی (quirks mode) می‌رود و رفتارهای عجیبی نشان می‌دهد.<html> — ریشهٔ سند. همه چیز داخل این تگ قرار می‌گیرد.<head> — اطلاعاتی که در صفحه دیده نمی‌شود ولی اطلاعات مفیدی را برای نرم افزار هایی که صفحه را می‌خوانند (ازجمله موتور های جستجو) فراهم می‌کند.<title> — عنوان صفحه که در تب مرورگر نمایش داده می‌شود.<body> — هرچه کاربر می‌بیند اینجا قرار می‌گیرد.<h1> — تیتر صفحه<p> — پاراگرافاین ساختار حداقلی را هر صفحهٔ وبی دارد.
اگر از ویندوز استفاده می‌کنید، تنظیمات File Explorer را باز کرده و گزینه زیر را فعال کنید. زمانی که این گزینه فعال باشد فرمت فایل ها نمایش داده می‌شود. یعنی اگر یک فایل index.html بسازید واقعا فرمت آن html می‌شود. در غیر اینصورت اگر فایل index.html را بسازید، چیزی که واقعا ساخته می‌شود index.html.txt است که ویندوز به صورت پیش‌فرض txt آن را به شما نمایش نمی‌دهد.
بسیاری از دانشجویان تازه کار به دلیل ندانستن این مورد وقت زیادی را از دست می‌دهند. محل قرارگیری این گزینه در نسخه‌های گوناگون ویندوز ممکن است متفاوت باشد اما با کمی جستجو و کمک از هوش مصنوعی حتما آن را پیدا خواهید کرد.
تگ (Tag) واحد سازندهٔ صفحه HTML است. هر تگ با علامت < و > تعریف می‌شود. بیشتر تگ‌ها یک شروع و یک پایان دارند. معمولا به تگ شروع کننده تگِ باز و به تگ پایانی، تگِ بسته می‌گویند.
<tagname>محتوا</tagname>در تکه کد بالا، به <tagname> تگِ باز و به </tagname> تگِ بسته می‌گویند.
برخی تگ ها هم ساختارشان شبیه زیر است که خودشان، خودشان را می‌بندند به این معنی که چیزی در آن‌ها قرار نمی‌گیرد یا تگ دیگری را به عنوان فرزند قبول نمی‌کنند.
<tagname />تگ‌های HTML را می‌شود به دو دستهٔ اصلی تقسیم کرد:
این تگ‌ها هم شروع دارند و هم پایان، و محتوا را در خود می‌پیچند. به عبارت دیگر، تگ های دیگری به عنوان فرزند در این تگ ها قرار می‌گیرند. در ادامه برخی از این تگ ها را مشاهده می‌کنید.
<p> — پاراگراف<h1> تا <h6> — تیترها<div> — بخش‌بندی عمومی<a> — لینک<form> — فرم (که در ادامه این دوره مفصل به آن خواهم پرداخت)<ul>, <ol>, <li> — لیستهااین تگ‌ها محتوایی ندارند و تگ پایان هم ندارند (یا خودشان پایان خودشان هستند). این تگ ها تنها با مقادیری که به عنوان ویژگی (attribute) می‌گیرند، محتوای قابل نمایشی برای ما ایجاد می‌کنند. در ادامه برخی از این تگ ها را مشاهده می‌کنید.
<img> — تصویر<meta> — متادیتا در headاتریبیوت‌ها (Attributes) اطلاعات اضافی‌ای هستند که داخل تگ شروع قرار می‌گیرند و رفتار یا ویژگی‌های آن تگ را مشخص می‌کنند. ساختار کلی:
<tagname attribute="value">محتوا</tagname>مثال واقعی:
<a href="https://example.com">کلیک کن</a>
<form method="post" action="/submit">
<input type="text" name="email" required>ببینید، اینجا href، method، action، type، name و required همه اتریبیوت هستند. بعضی مثل required مقدار ندارند (Boolean Attribute) و صرف بودنشان یعنی فعال‌اند.
من همه ویدئو ها و پادکست های کُدباز رو توی یوتیوب و ساندکلود و پلتفرم هایی آپلود می‌کنم که اغلب فیلتر هستند.
اغلب آموزش‌ها ویدئو و پادکست دارند. پس اگر می‌خواهید از محتوای سایت بیشترین استفاده رو ببرید نیاز به فیلتر شکن دارید.
توجه داشته باشید که برای خرید از فروشگاه بهتره فیلتر شکن رو خاموش کنید.