اولین‌باری که html را یاد گرفته بودم صفحه جدیدی ساختم و بدوبدو سراغ اعضای خانواده رفتم. فکر می‌کردم حالا قرار است طراح سایت مشهوری شوم که مبانی برنامه‌نویسی را قورت داده و قرار است جهان را متحول کند. اما هربار با چالش جدیدی مواجه می‌شدم. آن‌قدر که عطایش را به لقایش بخشیدم و قید یادگیری‌اش را زدم. حالا بعد از گذشت ۹ سال از آن روزهای پرشور دوباره سراغ html رفته‌ام. همه بخش‌هایش را بررسی کرده‌ام و با تاریخچه، کاربرد، مزایا و جزئیات بیشتری از آن آشنا شده‌ام. اگر شما هم می‌خواهید بدانید html چیست و اطلاعات بیشتری درباره آن کسب کنید همراه من باشید.
HTML چیست و مخفف چه عبارتی است؟
HTML مخفف HyperText Markup Language و به‌معنای زبان نشانه‌گذاری اَبَرمتن است. این زبان از تگ‌ها و قواعدی تشکیل شده که با کمک آن‌ها محتوای صفحه‌های وب ساختاربندی می‌شود. مرورگر این ساختار را می‌خواند و بر اساس آن، صفحه را به کاربر نمایش می‌دهد.
ابرمتن (HyperText) و زبان نشانه‌گذاری (Markup) یعنی چه؟
ابرمتن به متنی گفته می‌شود که می‌تواند از طریق پیوندها به صفحه‌ها یا محتواهای دیگر متصل شود. همین پیوندها امکان حرکت میان صفحه‌های وب را فراهم می‌کنند. نشانه‌گذاری هم روشی برای مشخص‌کردن نقش بخشهای مختلف محتواست؛ برای نمونه، اینکه بخشی عنوان، پاراگراف یا پیوند باشد.
به عنوان مثال تگ <p>برای مشخص کردن یک پاراگراف و تگ <a> برای ساخت پیوند استفاده می‌شود. مرورگر این نشانه‌ها را می‌خواند، ساختار محتوا را تشخیص و آن را نمایش می‌دهد.
برای تسلط به مفاهیم HTML شرکت در اسکیل‌کمپ HTML و CSS دانشکار را به شما پیشنهاد می‌دهیم.
آیا HTML زبان برنامه‌نویسی است؟ تفاوت زبان نشانه‌گذاری و برنامه‌نویسی
برای پاسخ دقیق باید میان زبان نشانه‌گذاری و زبان برنامه‌نویسی تفاوت بگذاریم. HTML ساختار و معنای محتوا را مشخص می‌کند، اما به‌تنهایی منطق برنامه یا رفتارهای پیچیده را اجرا نمی‌کند؛ به همین دلیل، دسته‌بندی فنی آن زبان نشانه‌گذاری است. گاهی در گفت‌وگوی روزمره به HTML «زبان کدنویسی» گفته می‌شود؛ اما اصطلاح دقیق‌تر برای آن زبان نشانه‌گذاری است. در جدول زیر تفاوت‌های این دو موضوع را بررسی کرده‌ایم.
| HTML | زبان برنامه‌نویسی |
|---|---|
| ساختار و نقش محتوای صفحه را مشخص می‌کند. | منطق و رفتارهای برنامه را تعریف می‌کند. |
| برای ساخت عنوان، پاراگراف، پیوند و تصویر به کار می‌رود. | برای اجرای دستورها، پردازش داده‌ها و تعریف تعامل‌ها استفاده می‌شود. |
| نمونه: HTML | نمونه: جاوااسکریپت یا پایتون |
تاریخچه HTML و نسخه‌های مهم آن
HTML از سال‌های ابتدایی شکل‌گیری وب برای ساخت و پیوند دادن سندهای آنلاین استفاده شده است. با گذشت زمان، نسخه‌های مختلف آن قابلیت‌هایی مانند فرم‌ها، جدول‌ها، پشتیبانی از CSS و محتوای چندرسانه‌ای را به صفحات وب اضافه کردند.
مسیر HTML از نسخه‌های اولیه تا HTML 4.01 و XHTML
تاریخچه HTML فقط به اضافه‌شدن تگ‌های جدید محدود نمی‌شود؛ در نسخه‌های مختلف، تلاش شده ساختار صفحه‌ها استانداردتر و استفاده از فناوری‌هایی مانند CSS هماهنگ‌تر شود. جدول زیر برخی از نقاط مهم این مسیر را خلاصه می‌کند:
| سال | رویداد |
|---|---|
| ۱۹۹۱ | تیم برنرز-لی HTML را ابداع کرد. |
| ۱۹۹۳ | دیو رگت پیش‌نویس HTML+ را تهیه کرد. |
| ۱۹۹۵ | HTML 2.0 برای استانداردسازی قابلیت‌های اصلی HTML منتشر شد. |
| ۱۹۹۷ | HTML 3.2 امکاناتی مانند جدول‌ها را گسترش داد. |
| ۱۹۹۹ | HTML 4.01 با پشتیبانی بهتر از CSS و اسکریپت‌نویسی منتشر شد. |
| ۲۰۰۰ | XHTML 1.0 معرفی شد و قواعد سخت‌گیرانه‌تری برای نوشتن سندها داشت. |
| ۲۰۰۸ | نخستین پیش‌نویس عمومی HTML5 منتشر شد. |
| ۲۰۱۲ | WHATWG از HTML5 به‌عنوان یک استاندارد زنده یاد کرد. |
| ۲۰۱۴ | HTML5 به‌عنوان توصیه W3C منتشر شد. |
HTML5 چیست و چه قابلیت‌هایی به HTML اضافه کرد؟
HTML5 نسل مهمی از HTML بود که ساخت صفحه‌های مدرن و چندرسانه‌ای را ساده‌تر کرد. بعضی از تغییرهای مهم آن را می‌توان در پشتیبانی از رسانه‌ها، عناصر معنایی و قابلیت‌های تازه مرورگر دید. جدول زیر اطلاعات دقیق‌تری از این قابلیت‌ها در اختیار شما قرار داده است.
| حوزه | نمونه قابلیت |
|---|---|
| عناصر معنایی | تگ هایی مانند <header>، <section> و <article> برای مشخص نقش بخشهای صفحه |
| صوت و ویدیو | تگ‌های <audio> و <video> برای قرار دادن رسانه در صفحه |
| گرافیک | تگ <canvas> برای رسم محتوا با کمک کد |
| قابلیت‌های مرورگر | APIهایی مانند ذخیره‌سازی وب و مکان‌یابی در اکوسیستم مرورگر |
در اینجا یک نکته مهم وجود دارد: HTML5 را نباید نسخه‌ای ثابت و متوقف‌شده در نظر گرفت. بر اساس تاریخچه‌ای که W3Schools ارائه می‌کند، WHATWG روند HTML را به‌صورت استاندارد زنده دنبال کرده است؛ بنابراین امروزه HTML همچنان به‌روزرسانی می‌شود. همچنین همه قابلیت‌های مرورگر، مانند مکان‌یابی، تگ HTML نیستند و برخی از آن‌ها به APIهای وب مربوط می‌شوند.
HTML چگونه کار می‌کند؟
یک فایل HTML از متن و تگ‌هایی تشکیل شده است که نقش بخشهای مختلف محتوا را مشخص می‌کنند. مرورگر فایل را می‌خواند، ساختار آن را تشخیص می‌دهد و نتیجه را نمایش می‌دهد.
مرورگر چگونه کد HTML را تفسیر و نمایش می‌دهد؟
مرورگرهایی مانند Chrome، Firefox، Safari و Edge سند HTML را می‌خوانند و از تگ‌های آن برای تشخیص ساختار صفحه استفاده می‌کنند. تگ‌ها معمولاً به کاربر نشان داده نمی‌شوند؛ کاربر نتیجه تفسیر آن‌ها را می‌بیند. برای نمونه، اگر مرورگر کد زیر را بخواند، عبارت اول را عنوان و عبارت دوم را پاراگراف در نظر می‌گیرد:
ٰ<h1>آشنایی با HTML</h1>
<p>این یک پاراگراف است.</p>تگ (Tag) در HTML چیست؟
تگ نشانه‌ای است که معمولاً با علامت‌های < و > نوشته می‌شود. در بسیاری از عناصر HTML، یک تگ آغاز محدوده را باز می‌کند و تگ پایان آن را می‌بندد. برای مثال در کد زیر <p> تگ آغاز و </P> تگ پایان پاراگراف است:
<p>یادگیری HTML را با یک صفحه ساده شروع کنید.</p>عنصر HTML چیست و چه تفاوتی با تگ دارد؟
عنصر HTML معمولاً از تگ آغاز، محتوا و تگ پایان تشکیل می‌شود. پس تگ بخشی از عنصر است، اما عنصر می‌تواند متن میان تگ‌ها را هم دربر بگیرد. در مثال زیر، کل مجموعه یک عنصر پاراگراف است. در این نمونه <p> و </p> تگ هستند و کل کد، همراه با متن میان آن‌ها، HTML را می‌سازد.
<p>این متن داخل یک عنصر پاراگراف قرار دارد.</p>صفت (Attribute) و مقدار (Value) چیست؟
صفت‌ها اطلاعات بیشتری درباره یک عنصر ارائه می‌دهند و معمولاً در تگ آغاز قرار می‌گیرند. برای نمونه در کد زیر href صفت و آدرس داخل کوتیشن مقدار آن است:
<a href="https://example.com">مشاهده وب‌سایت</a>صفت href مقصد پیوند را مشخص می‌کند. در عنصر تصویر هم می‌توان از src برای تعیین مسیر فایل و از alt برای نوشتن توضیح جایگزین تصویر استفاده کرد:
<img src="image.jpg" alt="نمایی از یک صفحه وب">عناصر تو‌در‌تو و عناصر خالی چه هستند؟
گاهی یک عنصر درون عنصر دیگری قرار می‌گیرد؛ به این حالت تو‌در‌تو بودن عناصر می‌گویند. در نمونه زیر، عنصر <strong> داخل عنصر <p> قرار گرفته است:
<p>این بخش <strong>اهمیت بیشتری</strong> دارد.</p>برخی عناصر محتوا یا تگ پایان ندارند و به آن‌ها عناصر خالی گفته می‌شود. برای نمونه، <br> برای رفتن به خط بعدی و <img> برای قراردادن تصویر به کار می‌روند.
ساختار یک سند HTML و ساخت اولین صفحه
سند HTML ساختار مشخصی دارد و هر بخش آن وظیفه‌ای جداگانه بر عهده می‌گیرد. وقتی این ساختار را بشناسید، پیدا کردن محل هر نوع محتوا و ویرایش صفحه آسان‌تر می‌شود.
بخشهای اصلی سند؛ از DOCTYPE تا head و body
در یک سند ساده، چند بخش اصلی دیده می‌شود که مرورگر از آن‌ها برای شناخت نوع سند و نمایش محتوای آن استفاده می‌کند:
<!DOCTYPE html>نوع سند را مشخص می کند؛<html>عنصر ریشه است و بخشهای دیگر صفحه درون آن قرار می‌گیرندِ<head>اطلاعاتی درباره صفحه را نگه می‌دارد؛ برای مثال، عنوانی که در تب مرورگر دیده می‌شود.<body>محتوای اصلی و قابل‌مشاهده صفحه را در بر می‌گیرد.
برای نوشتن HTML به چه ابزار یا ویرایشگری نیاز داریم؟
برای شروع HTML به نرم‌افزار تخصصی نیاز ندارید. یک ویرایشگر متن برای نوشتن کد و یک مرورگر برای مشاهده نتیجه کافی است. بهتر است فایل را با پسوند .html ذخیره کنید؛ مثلاً index.html. استفاده از ویرایشگری که رنگ‌بندی کد و تکمیل خودکار دارد می‌تواند نوشتن کد را راحت‌تر کند، اما برای شروع ضروری نیست.
ساخت یک صفحه ساده و باز کردن آن در مرورگر
حالا که با بخشهای اصلی سند آشنا شدیم، می‌توانیم یک صفحه کوچک بسازیم. نمونه زیر عنوان، متن، پیوند و بخشهای معنایی صفحه را در خود دارد:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحه معرفی من</title>
</head>
<body>
<header>
<h1>اولین صفحه HTML من</h1>
<p>من در حال یادگیری ساختار صفحات وب هستم.</p>
</header>
<main>
<section>
<h2>درباره من</h2>
<p>این یک صفحه تمرینی برای آشنایی با HTML است.</p>
<a href="https://example.com">مشاهده یک نمونه</a>
</section>
</main>
</body>
</html>کد را در ویرایشگر متن وارد کرده و با نامی مانند index.html ذخیره کنید. سپس فایل را با مرورگر باز کنید. متن داخل در تب مرورگر دیده می‌شود، درحالی‌که محتوای داخل <body> در خود صفحه نمایش داده خواهد شد.
تگ‌های مهم HTML و کاربرد آن‌ها
هر تگ HTML نقش مشخصی دارد؛ بعضی ساختار صفحه را تعریف می‌کنند و بعضی دیگر برای نمایش متن، تصویر یا رسانه به کار می‌روند. فهرست زیر تگ‌های رایج را پوشش می‌دهد، اما فهرست کامل همه تگ‌های HTML نیست.
تگ‌های ساختاری و معنایی
تگ‌های معنایی کمک می‌کنند نقش هر بخش از صفحه روشن باشد. استفاده از آن‌ها خوانایی ساختار را برای توسعه‌دهندگان و ابزارهای پردازش صفحه بهتر می‌کند. چند نمونه پرکاربرد عبارت‌اند از:
- <header> برای سربرگ صفحه یا یک بخش
- <nav> برای بخش پیوندهای ناوبری
- <main> برای محتوای اصلی صفحه
- <section> برای گروه‌بندی محتوای مرتبط
- <article> برای محتوایی که به‌صورت مستقل هم معنا دارد
- <footer> برای بخش پایانی صفحه یا یک بخش
تگ‌های عنوان، متن و پیوند
برای عنوان‌ها از <h1> تا <h6> استفاده می‌شود. این تگ‌ها سطوح مختلف عنوان و زیرعنوان را مشخص می‌کنند. تگ <p> برای پاراگراف و <a> برای پیوند به کار می‌رود. تگ <strong> هم می‌تواند اهمیت یک بخش از متن را نشان دهد. برای مثال:
<h1>عنوان اصلی صفحه</h1>
<h2>یک زیرعنوان</h2>
<p>این یک پاراگراف است.</p>
<a href="https://example.com">رفتن به صفحه نمونه</a>تگ <title> را با <h1> اشتباه نگیرید. <title> عنوان صفحه را در تب مرورگر مشخص می‌کند اما <h1> عنوانی است که در محتوای صفحه دیده می‌شود.
تگ‌های تصویر، فهرست و جدول
برای نمایش تصویر از <img> استفاده می‌شود. صفت alt توضیح متنی تصویر را مشخص می‌کند و برای کاربرانی که تصویر را نمی‌بینند یا زمانی که فایل تصویر بارگذاری نمی‌شود مفید است. فهرست‌ها و جدول‌ها نیز هرکدام مجموعه‌ای از تگ‌های مخصوص خود را دارند:
| تگ‌ها | کاربرد |
|---|---|
| <img> | قرار دادن تصویر، اغلب با alt و src استفاده می‌شود |
| <ul> <ol> | ساخت فهرست نشانه‌دار یا شماره‌دار |
| <li> | تعریف هر مورد فهرست |
| <table> | ساخت جدول |
| <tr> | تعریف ردیف جدول |
| <th> <td> | تعریف سلول عنوان و سلول داده |
تگ‌های فرم و ورودی‌ها
فرم‌ها برای دریافت اطلاعات از کاربر استفاده می‌شوند؛ برای مثال، فرم تماس می‌تواند نام یا ایمیل را بگیرد. تگ‌هایی مانند form>، <lable>، >input> و <botton> در ساخت چنین فرم‌هایی نقش دارند. نمونه زیر یک ورودی امیلی و یک دکمه ارسال دارد:
<form>
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email">
<button type="submit">ارسال</button>
</form>این کد ساختار فرم را نمایش می‌دهد، اما به‌تنهایی اطلاعات را در پایگاه داده ذخیره نمی‌کند. برای پردازش یا ذخیره اطلاعات، به منطق سمت کاربر یا سمت سرور نیاز است.
تگ‌های صوت و ویدئو
در HTML5 تگ‌هایی مانند <audio> و <video> برای قراردادن محتوای صوتی و تصویری در صفحه معرفی شدند. مرورگرهای مدرن می‌توانند با این عناصر رسانه را نمایش دهند و در بسیاری از موارد به افزونه جداگانه نیازی نیست. نمونه ساده استفاده از این تگ‌ها به شکل زیر است:
<audio controls src="music.mp3"></audio>
<video controls src="video.mp4"></video>صفت controls کنترل‌های پخش را در اختیار کاربر می‌گذارد. مسیرهای music.mp3 و video.mp4 هم باید با مسیر واقعی فایل‌های رسانه جایگزین شوند.
کاربردهای HTML چیست؟
HTML در بخشهای مختلف وب نقش دارد؛ از ساختار یک مقاله ساده تا رابط یک ابزار تحت وب. کاربرد اصلی آن تعریف و سازمان‌دهی محتوایی است که مرورگر باید نمایش دهد.
ساختاربندی محتوای صفحات وب
با HTML می‌توان عنوان‌ها، پاراگراف‌ها، پیوندها، تصاویر، فهرست‌ها، جدول‌ها و فرم‌ها را در صفحه قرار داد. این ساختار به مرورگر کمک می‌کند نقش بخشهای مختلف را تشخیص دهد و محتوا را منظم نمایش دهد. استفاده از تگ‌های معنادار می‌تواند به ابزارهای دیگر، از جمله موتورهای جست‌وجو، در فهم سازمان‌دهی صفحه کمک کند؛ اما HTML به‌تنهایی رتبه بهتر در نتایج جست‌وجو را تضمین نمی‌کند.
پایه‌گذاری رابط وب‌سایت‌ها و وب‌اپلیکیشن‌ها
رابط بسیاری از وب‌سایت‌ها و نرم‌افزارهای تحت وب، مانند داشبوردها و پنل‌های مدیریتی، بر پایه HTML ساخته می‌شود. در چنین محصولاتی HTML ساختار محتوا را مشخص می‌کند و CSS و جاوااسکریپت بخشهای دیگر رابط را کامل می‌کنند.
HTML در قالب‌های ایمیل و برخی روش‌های ساخت اپلیکیشن‌های مبتنی بر فناوری وب هم کاربرد دارد. برای مثال، در بعضی چارچوب‌ها از فناوری‌های وب برای ساخت رابط اپلیکیشن موبایل استفاده می‌شود؛ اما در این حالت هم HTML معمولاً در کنار CSS، JavaScript و ابزارهای دیگر قرار می‌گیرد و به‌تنهایی کل اپلیکیشن را نمی‌سازد.
رابطه HTML با CSS و JavaScript چیست؟
HTML، CSS و JavaScript معمولاً برای ساخت رابط وب در کنار هم استفاده می‌شوند. هرکدام از این فناوری‌ها وظیفه متفاوتی دارد و ترکیب آن‌ها امکان ساخت صفحه‌هایی کامل‌تر را فراهم می‌کند.
HTML؛ ساختار و محتوای صفحه
HTML مشخص می‌کند چه محتوایی در صفحه وجود دارد و هر بخش چه نقشی دارد. عنوان‌ها، پاراگراف‌ها، پیوندها، تصاویر و فرم‌ها از جمله بخش‌هایی هستند که می‌توان با HTML ساختاربندی کرد.
CSS؛ ظاهر و چیدمان
CSS ظاهر صفحه را تنظیم می‌کند. با آن می‌توان رنگ، اندازه و نوع فونت، فاصله‌ها و چیدمان اجزای صفحه را تغییر داد. بدون CSS هم صفحه HTML قابل‌نمایش است، اما معمولاً ظاهر ساده‌تری دارد.
JavaScript؛ رفتار و تعامل
JavaScript برای افزودن رفتارهای تعاملی به صفحه به کار می‌رود. برای مثال، می‌توان با آن واکنش صفحه به کلیک کاربر را تعریف کرد یا بخشی از محتوا را تغییر داد.
این سه فناوری در فرانت‌اند چگونه کنار هم کار می‌کنند؟
فرانت‌اند بخشی از وب‌سایت یا اپلیکیشن است که کاربر در مرورگر می‌بیند و با آن تعامل دارد و فرانت‌اند دولوپر مسئول توسعه این بخش از محصول است. HTML ساختار این بخش را مشخص می‌کند، CSS ظاهر آن را شکل می‌دهد و جاوااسکریپت رفتارهای تعاملی را به آن اضافه می‌کند. در ادامه مسیر توسعه فرانت‌اند، بعد از تسلط بر جاوااسکریپت می‌توانید سراغ کتابخانه‌هایی مانند ری‌اکت و سپس فریم‌ورک‌هایی مانند Next.js بروید. در این مرحله، آشنایی با اینکه Next.js چیست و چه امکاناتی برای توسعه وب‌سایت‌ها و وب‌اپلیکیشن‌های مدرن فراهم می‌کند، می‌تواند بخشی از مسیر یادگیری شما باشد.
مرتبط: بوت‌کمپ فرانت‌اند دانشکار
مزایا و محدودیت‌های HTML
HTML به‌دلیل ساختار روشن و پشتیبانی گسترده، یکی از نقطه‌های شروع رایج برای یادگیری توسعه وب است. بااین‌حال، این زبان به‌تنهایی همه نیازهای یک وب‌سایت مدرن را برطرف نمی‌کند.
مزایای HTML
سادگی و سازگاری HTML باعث شده است افراد تازه‌کار بتوانند یادگیری ساخت صفحه‌های وب را با آن شروع کنند. مهم‌ترین مزیت‌های HTML عبارت‌اند از:
- یادگیری نسبتاً ساده: تگ‌های پایه خوانا هستند و می‌توان با آن‌ها یک صفحه اولیه ساخت.
- پشتیبانی گسترده مرورگرها: مرورگرهای مدرن HTML را پشتیبانی می‌کنند.
- قابل‌استفاده روی پلتفرم‌های مختلف: فایل HTML را می‌توان در دستگاه‌ها و سیستم‌عامل‌های گوناگون با مرورگر باز کرد.
- بدون نیاز به ابزار تخصصی: برای نوشتن فایل ساده، ویرایشگر متن و مرورگر کافی است.
- قابل‌ترکیب با فناوری‌های دیگر: HTML در کنار CSS و JavaScript برای ساخت رابط‌های کامل‌تر استفاده می‌شود.
محدودیت‌های HTML
در کنار مزایا، باید در نظر داشت که HTML به‌تنهایی برای طراحی و پیاده‌سازی همه قابلیت‌های یک وب‌سایت کافی نیست. محدودیت‌های اصلی آن را می‌توان این‌طور خلاصه کرد:
- برای تنظیم رنگ، فونت و چیدمان پیشرفته به CSS نیاز است.
- برای بسیاری از قابلیت‌های تعاملی باید از JavaScript استفاده کرد.
- پردازش و ذخیره اطلاعات معمولاً به فناوری‌های سمت سرور نیاز دارد.
- نمایش بعضی جزئیات ممکن است بین مرورگرها یا نسخه‌های قدیمی آن‌ها متفاوت باشد؛ بنابراین بررسی صفحه در مرورگرهای هدف اهمیت دارد.
چگونه HTML را یاد بگیریم؟
برای یادگیری HTML لازم نیست از همان ابتدا همه تگ‌ها را حفظ کنید. بهتر است ابتدا ساختار سند و تگ‌های پایه را بشناسید، سپس با تمرین و ساخت صفحه‌های ساده دانش خود را گسترش دهید.
از مفاهیم پایه تا تمرین‌های عملی
قدم اول، شناخت ساختار یک سند و تفاوت میان تگ، عنصر و صفت است. پس از آن می‌توانید تگ‌های رایج را به‌ترتیب یاد بگیرید و در مثال‌های ساده استفاده کنید. مسیر شروع می‌تواند شامل این مراحل باشد:
- آشنایی با ساختار پایه سند HTML
- تمرین عنوان‌ها، پاراگراف‌ها و پیوندها
- یادگیری نحوه افزودن تصویر و فهرست
- آشنایی با تگ‌های معنایی و فرم‌ها
- ساخت صفحه‌های کوچک و بررسی نتیجه در مرورگر
تمرین با پروژه‌های کوچک و مرور خروجی در مرورگر
پس از یادگیری چند تگ، آن‌ها را در یک صفحه واقعی به کار ببرید. برای مثال، صفحه معرفی شخصی، یک مقاله ساده یا فرم تماس می‌تواند تمرین مناسبی باشد. بعد از هر تغییر، فایل را دوباره در مرورگر باز کنید تا ارتباط میان کدی که نوشته‌اید و نتیجه‌ای که نمایش داده می‌شود بهتر جا بیفتد.
برای دیدن کد یک صفحه وب در مرورگر Chrome می‌توانید روی صفحه راست‌کلیک کنید و گزینه View Page Source را انتخاب کنید؛ در بسیاری از سیستم‌ها میانبر Ctrl + U نیز این کار را انجام می‌دهد. این روش به شما کمک می‌کند ساختار HTML صفحه‌های دیگر را بررسی کنید، هرچند کد منبع همیشه تمام جزئیات رفتاری صفحه را نشان نمی‌دهد.
قدم بعدی پس از یادگیری HTML
پس از آشنایی با ساختار صفحه و تگ‌های رایج، CSS قدم بعدی مناسبی است؛ زیرا با آن می‌توانید ظاهر صفحه را کنترل کنید. سپس می‌توانید JavaScript را یاد بگیرید تا رفتارهای تعاملی بسازید. HTML پایه‌ای مهم برای شروع است، اما ترکیب آن با این مهارت‌ها امکان ساخت رابط‌های کامل‌تری را فراهم می‌کند.
منابع: w3schools.com، geeksforgeeks.org
