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

هر فایل HTML باید این ساختار پایه را داشته باشد.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>عنوان صفحه در مرورگر</title>
</head>
<body>
    <!-- محتوای قابل نمایش سایت اینجا قرار می‌گیرد -->
</body>
</html>

تگ‌های عنوان (Headings)

تگ‌های h1 تا h6 برای عناوین استفاده می‌شوند. h1 مهمترین و h6 کم‌اهمیت‌ترین است.

عنوان سطح یک (h1)

عنوان سطح دو (h2)

عنوان سطح سه (h3)

<h1>عنوان سطح یک (h1)</h1>
<h2>عنوان سطح دو (h2)</h2>
<h3>عنوان سطح سه (h3)</h3>
<h4>عنوان سطح چهار (h4)</h4>
<h5>عنوان سطح پنج (h5)</h5>
<h6>عنوان سطح شش (h6)</h6>

پاراگراف (p) و خطوط (br, hr)

تگ p برای متن‌های معمولی، br برای شکستن خط و hr برای ایجاد خط افقی جداکننده استفاده می‌شود.

این یک پاراگراف است.
این متن در خط بعدی نمایش داده می‌شود.

این پاراگراف بعد از خط جداکننده است.

<p>این یک پاراگراف است. <br> این متن در خط بعدی نمایش داده می‌شود.</p>
<hr>
<p>این پاراگراف بعد از خط جداکننده است.</p>

فرمت‌بندی متن و تفاوت‌ها

تگ‌های قالب‌بندی برای تغییر ظاهر و اهمیت کلمات استفاده می‌شوند.

تفاوت b و strong: تگ <b> فقط متن را توپر (Bold) می‌کند، اما <strong> علاوه بر توپر کردن، به موتورهای جستجو می‌فهماند که این کلمه اهمیت بالایی دارد.
تفاوت i و em: تگ <i> فقط متن را کج (Italic) می‌کند، اما <em> برای تأکید معنایی روی کلمه استفاده می‌شود.

متن بولد ساده (b) و متن مهم و بولد (strong)

متن ایتالیک ساده (i) و متن مورد تأکید (em)

متن هایلایت شده (mark) و متن کوچکتر (small)

فرمول آب: H₂O (تگ sub)

توان ریاضی: X² (تگ sup)

<p>متن <b>بولد ساده (b)</b> و متن <strong>مهم و بولد (strong)</strong></p>
<p>متن <i>ایتالیک ساده (i)</i> و متن <em>مورد تأکید (em)</em></p>
<p>متن <mark>هایلایت شده (mark)</mark> و متن <small>کوچکتر (small)</small></p>
<p>فرمول آب: H<sub>2</sub>O</p>
<p>توان ریاضی: X<sup>2</sup></p>

لینک‌ها (a)

اتریبیوت href آدرس مقصد را مشخص می‌کند. اتریبیوت target="_blank" لینک را در تب جدید باز می‌کند.

ورود به سایت گوگل (تب جدید)

<a href="https://google.com" target="_blank">ورود به سایت گوگل (تب جدید)</a>

تصاویر (img)

تگ img تگ پایانی ندارد. src آدرس عکس و alt متن جایگزین (برای زمانی که عکس لود نشود یا برای سئو) است.

<img src="image.jpg" alt="توضیح تصویر برای سئو" width="300" height="200">

لیست‌ها (ul, ol, li)

تگ ul برای لیست‌های نامرتب (نقطه‌ای) و ol برای لیست‌های مرتب (عددی) استفاده می‌شود. آیتم‌ها داخل li قرار می‌گیرند.

آیتم اول (لیست نامرتب)
آیتم دوم

مرحله اول (لیست مرتب)
مرحله دوم

<ul>
    <li>آیتم اول (لیست نامرتب)</li>
    <li>آیتم دوم</li>
</ul>

<ol>
    <li>مرحله اول (لیست مرتب)</li>
    <li>مرحله دوم</li>
</ol>

مرجع کدهای آموزش داده شده HTML