در درس قبل با ساختار اصلی یک سند HTML آشنا شدیم و یاد گرفتیم بخش‌هایی مانند <!DOCTYPE html>، <html>، <head> و <body> چه نقشی در یک صفحه وب دارند.
حالا برای اینکه بتوانیم محتوای واقعی صفحات وب را بسازیم، باید یکی از پایه‌ای‌ترین مفاهیم HTML را دقیق‌تر یاد بگیریم: تگ و عنصر در HTML.
در کدهای HTML دائماً با ساختارهایی مانند <p>، <h1>، <strong> و <img> روبه‌رو می‌شویم. معمولاً در گفتگوهای روزمره همه این موارد را «تگ» می‌نامیم، اما از نظر فنی Tag یا تگ با Element یا عنصر دقیقاً یک چیز نیست.
در این درس تفاوت میان تگ و عنصر را یاد می‌گیریم، با تگ باز و بسته آشنا می‌شویم، عناصر تو در تو را بررسی می‌کنیم و می‌بینیم چرا بعضی عناصر HTML اصلاً تگ پایان ندارند.
تگ و عنصر در HTML چیست؟
برای درک بهتر این موضوع، ابتدا یک مثال بسیار ساده را ببینید:
<p>این یک پاراگراف است.</p>در این کد چند قسمت مختلف وجود دارد:
<p>تگ شروع یا تگ باز است.این یک پاراگراف است.محتوای عنصر است.</p>تگ پایان یا تگ بسته است.
اما کل این ساختار:
<p>این یک پاراگراف است.</p>یک عنصر HTML یا HTML Element را تشکیل می‌دهد.
بنابراین تگ بخشی از ساختار عنصر است و نباید این دو اصطلاح را همیشه کاملاً مترادف در نظر بگیریم.
تگ HTML چیست؟
Tag یا تگ، نشانه‌ای در کد HTML است که برای مشخص کردن آغاز یا پایان یک عنصر استفاده می‌شود.
تگ‌ها معمولاً با علامت کوچک‌تر از:
<شروع می‌شوند و با علامت بزرگ‌تر از:
>پایان پیدا می‌کنند.
برای مثال:
<p>یک تگ HTML است.
یا:
<h1>تگ دیگری است که برای مشخص کردن یک عنوان سطح اول به کار می‌رود.
نمونه‌های دیگری از تگ‌ها:
<strong>
<a>
<ul>
<li>
<img>هرکدام از این تگ‌ها در HTML کاربرد مشخصی دارند که در درس‌های آینده به‌تدریج آنها را بررسی خواهیم کرد.
عنصر HTML چیست؟
HTML Element یا عنصر HTML ساختاری است که بخشی از محتوا یا ساختار سند را مشخص می‌کند.
یک عنصر معمولی می‌تواند از سه قسمت تشکیل شود:
- تگ شروع
- محتوا
- تگ پایان
برای مثال:
<strong>این متن مهم است</strong>ساختار این عنصر را می‌توان این‌گونه نمایش داد:
<strong> این متن مهم است </strong>
│ │ │
تگ شروع محتوا تگ پایانمجموع این قسمت‌ها یک عنصر را تشکیل می‌دهد.
تفاوت تگ و عنصر در HTML چیست؟
این تفاوت را می‌توان با یک مثال ساده توضیح داد.
در کد زیر:
<h2>آموزش HTML</h2>عبارت‌های:
<h2>و:
</h2>تگ هستند.
اما کل ساختار زیر:
<h2>آموزش HTML</h2>یک عنصر HTML است.
پس به‌صورت خلاصه:
Tag = نشانه‌ای که آغاز یا پایان عنصر را در کد مشخص می‌کند.
Element = ساختار کامل یک بخش از سند HTML.
در گفتگوهای روزمره ممکن است برنامه‌نویسان عباراتی مانند «تگ p» یا «تگ h1» را برای اشاره به خود عنصر نیز استفاده کنند، اما دانستن تفاوت فنی این دو اصطلاح کمک می‌کند مستندات HTML را دقیق‌تر درک کنید.
تگ باز یا Opening Tag چیست؟
تگی که شروع یک عنصر را مشخص می‌کند، Opening Tag یا تگ باز نام دارد.
برای مثال:
<p>تگ باز عنصر پاراگراف است.
نمونه دیگر:
<strong>شروع یک عنصر strong را مشخص می‌کند.
در یک نمونه کامل:
<p>من در حال یادگیری HTML هستم.</p>تگ:
<p>به مرورگر اعلام می‌کند که از این نقطه یک عنصر پاراگراف آغاز شده است.
تگ بسته یا Closing Tag چیست؟
در بسیاری از عناصر HTML باید مشخص کنیم عنصر در کجا پایان پیدا می‌کند.
برای این کار از Closing Tag یا تگ بسته استفاده می‌کنیم.
تگ بسته مشابه تگ باز است، اما قبل از نام عنصر یک علامت اسلش / قرار می‌گیرد.
تگ باز:
<p>تگ بسته:
</p>مثال کامل:
<p>این یک پاراگراف است.</p>نمونه دیگر:
<h2>عنوان بخش</h2>در این مثال:
<h2>شروع عنصر است.عنوان بخشمحتوای عنصر است.</h2>پایان عنصر است.
محتوای یک عنصر HTML چیست؟
قسمتی که بین تگ شروع و تگ پایان قرار می‌گیرد، محتوای آن عنصر است.
مثلاً:
<p>یادگیری HTML را شروع کرده‌ام.</p>محتوای عنصر p عبارت زیر است:
یادگیری HTML را شروع کرده‌ام.اما محتوا همیشه فقط متن ساده نیست.
یک عنصر می‌تواند عناصر دیگری را نیز درون خود داشته باشد.
برای مثال:
<p>
من در حال یادگیری <strong>HTML</strong> هستم.
</p>در این مثال عنصر p علاوه بر متن، یک عنصر strong را نیز درون خود دارد.
این موضوع ما را به مفهوم مهم عناصر تو در تو می‌رساند.
عناصر تو در تو در HTML چیست؟
در HTML می‌توان یک عنصر را داخل عنصر دیگری قرار داد. به این حالت Nesting و به چنین عناصری Nested Elements یا عناصر تو در تو گفته می‌شود.
مثال:
<p>
یادگیری <strong>HTML</strong> را شروع کرده‌ام.
</p>در این ساختار:
- عنصر
pعنصر بیرونی است. - عنصر
strongداخل عنصرpقرار گرفته است.
می‌توانیم ساختار را به شکل زیر تصور کنیم:
p
└── strongیا با یک مثال بزرگ‌تر:
<article>
<h2>آموزش HTML</h2>
<p>
این یک <strong>آموزش مقدماتی</strong> است.
</p>
</article>در این مثال عناصر h2 و p داخل article قرار دارند و عنصر strong نیز داخل p قرار گرفته است.
ترتیب صحیح بستن عناصر تو در تو
یکی از مهم‌ترین قوانین هنگام نوشتن عناصر تو در تو این است که عناصر نباید با یکدیگر هم‌پوشانی داشته باشند.
به زبان ساده، اگر عنصری را داخل عنصر دیگری باز کردیم، ابتدا باید عنصر داخلی را ببندیم.
نمونه صحیح:
<p>
این یک <strong>متن مهم</strong> است.
</p>ابتدا p باز شده است:
<p>سپس داخل آن strong باز شده است:
<strong>بنابراین ابتدا باید strong بسته شود:
</strong>و سپس p:
</p>نمونه اشتباه
کد زیر ساختار صحیحی ندارد:
<p>
این یک <strong>متن مهم
</p>
</strong>در اینجا عنصر strong داخل p شروع شده، اما قبل از بسته شدن strong، عنصر p بسته شده است.
این کار باعث هم‌پوشانی عناصر می‌شود.
یک قانون ساده برای به خاطر سپردن ترتیب
می‌توانید این قانون را به خاطر بسپارید:
آخرین عنصری که داخل ساختار باز می‌شود، باید قبل از عنصر بیرونی بسته شود.
مثال:
<div>
<p>
<strong>
متن
</strong>
</p>
</div>ترتیب باز شدن:
div → p → strongترتیب بسته شدن:
strong → p → divعنصر والد و فرزند در HTML چیست؟
وقتی عناصر داخل یکدیگر قرار می‌گیرند، گاهی از اصطلاح‌های Parent و Child استفاده می‌کنیم.
مثلاً:
<p>
متن معمولی
<strong>متن مهم</strong>
</p>در این مثال:
- عنصر
pوالد یا Parent عنصرstrongاست. - عنصر
strongفرزند یا Child عنصرpاست.
این اصطلاح‌ها در آینده بسیار مهم خواهند شد، زیرا در CSS، JavaScript و ساختار DOM نیز دائماً با رابطه والد، فرزند و سایر روابط بین عناصر سروکار خواهیم داشت.
عنصر خواهر یا Sibling چیست؟
دو عنصری که در یک سطح و زیر یک والد مشترک قرار گرفته باشند، می‌توانند نسبت Sibling داشته باشند.
مثلاً:
<section>
<h2>عنوان بخش</h2>
<p>متن این بخش</p>
</section>در این ساختار h2 و p هر دو مستقیماً داخل section قرار دارند.
بنابراین هر دو فرزند section هستند و نسبت به یکدیگر Sibling محسوب می‌شوند.
فعلاً لازم نیست این اصطلاحات را حفظ کنید، اما آشنایی اولیه با آنها در درس‌های CSS و JavaScript بسیار مفید خواهد بود.
آیا همه عناصر HTML تگ باز و بسته دارند؟
خیر.
بسیاری از عناصر HTML دارای تگ شروع و پایان هستند، مانند:
<p>متن</p>
<h1>عنوان</h1>
<strong>متن مهم</strong>اما گروهی از عناصر HTML نمی‌توانند محتوایی داخل خود داشته باشند و بنابراین تگ پایان ندارند.
به این عناصر Void Elements گفته می‌شود.
Void Element در HTML چیست؟
Void Element عنصری در HTML است که نمی‌تواند متن یا عنصر دیگری را به‌عنوان فرزند درون خود داشته باشد.
برای مثال عنصر br برای ایجاد شکست خط استفاده می‌شود:
<br>این عنصر به شکل زیر نوشته نمی‌شود:
<br></br>عنصر img نیز یک Void Element است:
<img src="image.jpg" alt="توضیح تصویر">و تگ پایان جداگانه ندارد.
Void Elementهای HTML کدام‌اند؟
در استاندارد فعلی HTML، Void Elementها شامل موارد زیر هستند:
<area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<source>
<track>
<wbr>در این مرحله نیازی نیست کاربرد همه این عناصر را بدانید یا آنها را حفظ کنید. هرکدام را در زمان مناسب و در درس مربوط به خودش بررسی خواهیم کرد.
آیا باید Void Elementها را با / ببندیم؟
ممکن است در بعضی کدها با ساختاری شبیه این روبه‌رو شوید:
<br />
<img src="photo.jpg" alt="تصویر" />در HTML امروزی قرار دادن علامت / در انتهای Void Elementها ضروری نیست.
بنابراین این شکل ساده کاملاً مناسب است:
<br>
<img src="photo.jpg" alt="تصویر">نکته مهم‌تر این است که در HTML چیزی به نام تگ self-closing عمومی به همان مفهومی که ممکن است در XML دیده باشید وجود ندارد.
برای مثال نوشتن:
<div />به این معنا نیست که عنصر div بسته شده است.
عنصرهایی مانند div که به تگ پایان نیاز دارند باید به شکل صحیح بسته شوند:
<div></div>آیا می‌توان تگ پایان بعضی عناصر را ننوشت؟
استاندارد HTML در شرایط مشخصی اجازه می‌دهد تگ شروع یا پایان برخی عناصر حذف شود و مرورگر ساختار مورد نظر را از متن سند استنباط کند.
اما این قانون برای همه عناصر صدق نمی‌کند و شرایط هر عنصر متفاوت است.
در دوره آموزشی ما، مخصوصاً در مراحل ابتدایی، تگ‌های مورد نیاز را به‌صورت کامل و صریح می‌نویسیم تا ساختار کد واضح و خوانا باشد.
بنابراین به جای تکیه کردن بر رفتار ضمنی مرورگر، فعلاً از چنین ساختاری استفاده می‌کنیم:
<p>این یک پاراگراف است.</p>آیا نام تگ‌های HTML به حروف کوچک و بزرگ حساس است؟
در سینتکس HTML، نام تگ‌ها را می‌توان بدون حساسیت معمول به حروف بزرگ و کوچک پردازش کرد.
برای مثال ممکن است مرورگر هر دو نمونه زیر را پردازش کند:
<P>Hello</P>
<p>Hello</p>اما روش رایج و پیشنهادی در کدنویسی مدرن این است که نام تگ‌های HTML را با حروف کوچک انگلیسی بنویسیم.
بنابراین در تمام آموزش‌های این دوره از این شیوه استفاده خواهیم کرد:
<p>Hello</p>این کار باعث یکدست شدن کد و افزایش خوانایی آن می‌شود.
چرا تورفتگی عناصر تو در تو مهم است؟
مرورگر برای تشخیص ساختار عناصر لزوماً به فاصله‌های ظاهری ابتدای خطوط وابسته نیست، اما تورفتگی صحیح کد باعث می‌شود انسان ساختار آن را بسیار راحت‌تر بخواند.
به این کار Indentation گفته می‌شود.
مثلاً این کد:
<article><h2>عنوان</h2><p>متن مقاله</p></article>را می‌توان خواناتر نوشت:
<article>
<h2>عنوان</h2>
<p>متن مقاله</p>
</article>هرچه پروژه بزرگ‌تر شود، اهمیت مرتب نوشتن عناصر و استفاده صحیح از تورفتگی بیشتر می‌شود.
مرورگر با اشتباهات ساختار HTML چه می‌کند؟
مرورگرها معمولاً تلاش می‌کنند حتی کد HTML ناقص یا دارای بعضی خطاها را نیز پردازش کنند.
برای مثال اگر ساختار عناصر را اشتباه بنویسید، مرورگر ممکن است تلاش کند ساختار قابل استفاده‌ای از آن ایجاد کند.
اما نباید به این رفتار مرورگر متکی باشیم.
کدی که مرورگر موفق به نمایش آن می‌شود لزوماً به این معنا نیست که کد ما از نظر ساختار صحیح و استاندارد نوشته شده است.
نوشتن HTML صحیح باعث می‌شود:
- کد برای خودمان و سایر توسعه‌دهندگان خواناتر باشد.
- رفتار صفحه قابل پیش‌بینی‌تر شود.
- کار با CSS و JavaScript ساده‌تر شود.
- احتمال ایجاد خطاهای پیچیده در ساختار صفحه کاهش پیدا کند.
یک مثال کامل از تگ‌ها و عناصر HTML
به نمونه زیر توجه کنید:
<article>
<h2>یادگیری HTML</h2>
<p>
من در حال یادگیری
<strong>HTML</strong>
هستم.
</p>
<hr>
</article>در این مثال چند مفهوم مهم این درس را هم‌زمان مشاهده می‌کنیم:
articleیک عنصر بیرونی است.h2داخلarticleقرار دارد.pنیز داخلarticleقرار دارد.strongداخل عنصرpقرار گرفته است.hrیک Void Element است و تگ پایان ندارد.
اشتباهات رایج هنگام نوشتن تگ‌ها و عناصر HTML
فراموش کردن تگ پایان
در عناصری که به تگ پایان نیاز دارند، باید ساختار کامل را بنویسیم.
نمونه نامناسب:
<strong>متن مهمنمونه صحیح:
<strong>متن مهم</strong>استفاده از نام متفاوت در تگ شروع و پایان
نمونه اشتباه:
<p>متن پاراگراف</div>اگر عنصر را با p شروع کرده‌ایم، باید با تگ پایان همان عنصر ببندیم:
<p>متن پاراگراف</p>بستن عناصر تو در تو با ترتیب اشتباه
نمونه اشتباه:
<p>
<strong>متن مهم
</p>
</strong>نمونه صحیح:
<p>
<strong>متن مهم</strong>
</p>نوشتن تگ پایان برای Void Element
برای مثال این ساختار صحیح نیست:
<img src="image.jpg" alt="تصویر"></img>عنصر img تگ پایان ندارد:
<img src="image.jpg" alt="تصویر">فرض کردن اینکه / همه عناصر را می‌بندد
نوشتن:
<div />جایگزین این ساختار نیست:
<div></div>برای عناصر معمولی که تگ پایان دارند، باید تگ پایان مناسب نوشته شود.
تمرین درس چهارم
برای اینکه تفاوت تگ و عنصر و مفهوم Nesting را بهتر یاد بگیرید، فایل تمرینی HTML خود را باز کنید و کد زیر را داخل بخش body بنویسید:
<article>
<h1>اولین مقاله من</h1>
<p>
من در حال یادگیری
<strong>HTML</strong>
هستم.
</p>
<hr>
<p>
این دومین پاراگراف صفحه است.
</p>
</article>سپس سعی کنید موارد زیر را در کد پیدا کنید:
- تگ‌های شروع
- تگ‌های پایان
- محتوای عناصر
- عنصر والد
strong - عناصر فرزند
article - عنصری که تگ پایان ندارد
بعد از آن یک بار عمداً ترتیب بسته شدن strong و p را اشتباه کنید و نتیجه را در مرورگر مشاهده کنید.
سپس کد را دوباره به شکل صحیح برگردانید.
یک تمرین بدون کپی کردن کد
حالا بدون کپی کردن نمونه‌های این صفحه، سعی کنید ساختاری بسازید که شامل موارد زیر باشد:
- یک عنوان اصلی
- یک پاراگراف
- یک عبارت مهم داخل همان پاراگراف
- یک خط جداکننده
- یک پاراگراف دوم
هدف این تمرین حفظ کردن نام تمام تگ‌ها نیست؛ هدف این است که بتوانید تشخیص دهید عناصر چگونه آغاز می‌شوند، چگونه پایان پیدا می‌کنند و چگونه داخل یکدیگر قرار می‌گیرند.
در این درس چه چیزهایی یاد گرفتیم؟
در این درس با یکی از مهم‌ترین مباحث پایه HTML آشنا شدیم و یاد گرفتیم:
- تگ HTML چیست.
- عنصر HTML چیست.
- تفاوت Tag و Element چیست.
- Opening Tag یا تگ باز چگونه نوشته می‌شود.
- Closing Tag یا تگ بسته چگونه نوشته می‌شود.
- محتوای یک عنصر چیست.
- عناصر چگونه داخل یکدیگر قرار می‌گیرند.
- Nesting صحیح عناصر چگونه انجام می‌شود.
- Parent، Child و Sibling چه مفهومی دارند.
- Void Element چیست.
- چرا Void Elementها تگ پایان ندارند.
- چرا نوشتن
/به معنی self-closing شدن همه عناصر HTML نیست.
جمع‌بندی
حالا می‌دانیم تگ و عنصر در HTML دو مفهوم مرتبط اما متفاوت هستند. تگ‌ها در کد برای مشخص کردن آغاز و پایان عناصر استفاده می‌شوند، در حالی که عنصر ساختار کامل بخشی از سند HTML را تشکیل می‌دهد.
بسیاری از عناصر شامل تگ شروع، محتوا و تگ پایان هستند؛ اما بعضی عناصر مانند img، br و hr از نوع Void Element هستند و تگ پایان ندارند.
همچنین یاد گرفتیم که عناصر HTML می‌توانند داخل یکدیگر قرار بگیرند، اما ترتیب باز و بسته شدن آنها باید صحیح باشد و عناصر نباید با یکدیگر هم‌پوشانی داشته باشند.
در درس بعدی یکی دیگر از بخش‌های اصلی ساختار تگ‌ها را بررسی می‌کنیم و یاد می‌گیریم Attribute در HTML چیست، چگونه داخل تگ شروع نوشته می‌شود و چگونه می‌توان با استفاده از Attributeها اطلاعات یا ویژگی‌های بیشتری برای عناصر مشخص کرد.
درس قبلی: ساختار اصلی سند HTML؛ آشنایی با DOCTYPE، html، head و body
درس بعدی: Attribute در HTML چیست؟ آشنایی با خصوصیت‌های تگ‌های HTML
حبیب قنبری
نویسنده و مدرس در ویترین؛ علاقه‌مند به انتقال تجربه‌های کاربردی و قابل اجرا.
مشاهده همه نوشته‌ها
1 دیدگاه