ساختار و سبک نوشتاری عناصر در HTML

سلام و خسته نباشید خدمت همراهان روکسو، در این قسمت می خواهیم با روش پیشنهادی کدنویسی و ساختار کلی عناصر HTML صحبت کنیم. برخی از موارد زیر جزو قوانین کدنویسی در زبان HTML هستند اما برخی دیگر صرفا پیشنهاد می شوند و دست شما باز است که از آن ها پیروی نکنید.

ساختار عناصر HTML

هر عنصر HTML یک تگ آغاز و یک تگ پایان دارد و محتوا در بین این تگ ها قرار می گیرد.

شیوه تعریف عناصر HTML به صورت زیر می باشد:

<tagname> محتوا در این قسمت قرار می‌گیرد </tagname>

بنابراین هر عنصر HTML برابر است با تگ آغازین + محتوا + تگ پایانی. مثال:

<p>My first paragraph.</p>

نکته: عناصر HTML ای که دارای محتوا نباشند «عناصر خالی» یا empty element نام دارند و دارای تگ پایانی نیز نیستند. یکی از مثال های بارز این تگ ها، تگ <br> است که معادل اینتر زدن و به خط بعد رفتن در هنگام نوشتن است.

«به خط جدید رفتن» اصطلاح خاص خودش را دارد؛ line break. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body> 

<p>This is a <br> paragraph with a line break.</p>

</body>
</html>

برای مشاهده ی خروجی این کد در مرورگتان روی این لینک کلیک کنید.

در HTML5 نیازی به بستن عناصر خالی ندارید اما اگر دوست دارید کدهایتان را در نهایت استاندارد بنویسید و همچنین کد هایتان توسط تجزیه کنندگان XML قابل خواندن باشد می توانید آن ها را به این شکل ببیندید:

<br />

توجه کنید که در این حالت، تگ ها دو عدد (تگ آغازین و پایانی) نمی شوند بلکه همان تگ اول تغییر شکل پیدا می کند.

عناصر تو در تو (nested)

عناصر HTML می توانند به صورت تو در تو یا nested قرار بگیرند؛ این یعنی یک عنصر داخل عنصر دیگری باشد.

به طور مثال در کد زیر چهار عنصر HTML وجود دارد:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

اگر به کد بالا نگاه کنید متوجه می شوید عنصر <html> تمام سند HTML را تعریف می کند و دارای تگ های آغازین و پایانی است. محتوای درون این تگ، یک تگ دیگر به نام <body> است. این عنصر بدنه ی سند را تعریف می کند و مشخصا دارای تگ های آغازین و پایانی است. حالا محتوای خود عنصر <body> شامل دو تگ <h1> و <p> است، یعنی این قسمت:

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

حالا تگ <h1> یک تیتر را تعیین می کند و دارای تگ های <h1> و <h1/> می باشد. تگ <p> نیز تعریف کننده ی یک پاراگراف است که شامل تگ های <p> و <p/> می شود. این توضیح ساختار تو در توی بالا بود. حالا می فهمیم معنی تو در تو بودن چیست.

تگ های پایانی

زبان HTML مانند دیگر زبان ها آنچنان قوانین سفت و سختی ندارد. منظور من از این حرف چیست؟ منظور من این است که در بسیاری از زبان های برنامه نویسی با جا انداختن کوچک ترین علامت و نوشتار، در اکثر اوقات برنامه از کار می افتد اما در زبان HTML مسئله به شکل دیگری است.

در زبان HTML اگر برخی از قسمت ها را جا بیندازید صفحه تان هنوز هم نمایش داده می شود! به طور مثال:

<!DOCTYPE html>
<html>
<body> 

<p>This is a paragraph.
<p>This is a paragraph.

</body>
</html>

در مثال بالا تگ های پایانی عنصر <p> را قرار نداده ایم اما هنوز هم صفحه ی ما نمایش داده می شود. برای اجرای این کد در مرورگرتان روی این لینک کلیک کنید.

در واقع تگ آغازین در مثال بالا دلخواه فرض شده است اما جدا هشدار می دهیم که هیچ گاه به این شکل کدنویسی نکنید چرا که:

این خطا ها برخی اوقات صفحه ی شما را کاملا به هم میریزد و اینطور نیست که همیشه برایتان بدون هزینه باشد.
حتی اگر صفحه به درستی نمایش داده شود، موتور های جست و جو آن را به عنوان خطا و HTML غیر معتبر می بینند. بنابراین در نتایج جست و جو جریمه می شوید.
هنگام ویرایش کدهایتان به مشکل برمی خورید چرا که همه چیز به هم ریخته خواهد شد و سر و ته هیچ چیز مشخص نخواهد بود.

بزرگی و کوچکی حروف

در زبان HTML بزرگی و کوچکی حروف اهمیتی ندارد بنابراین <P> با <p> یکی است اما تقریبا در تمام دنیا شیوه ی کدنویسی HTML به صورت حروف کوچک است. شما می توانید همین الان به هر سایتی که دوست دارید سر بزنید و کد های HTML آن را مشاهده کنید. 99 درصد سایت های جهان به حروف کوچک HTML می نویسند. همچنین سندهایی که سخت گیری های بیشتری از HTML دارند (مانند XHTML) حروف بزرگ را قبول نمی کنند. بر همین اساس ما در تمام کدنویسی ها و پروژه های آینده از حروف کوچک استفاده می کنیم.

XHTML چیست؟

زبان XHTML مخفف EXtensible HyperText Markup Language (به معنای «زبان امتدادپذیر نشانه‌گذاری فرامتنی») است. در واقع این زبان دقیقا با زبان HTML یکی است و تنها تفاوت آن با HTML در این است که دارای قوانین سخت گیرانه تری می‌باشد.

به عبارت دیگر می توانیم بگوییم XHTML همان HTML است که به عنوان یک برنامه ی XML تعریف شده است. از نظر پشتیبانی نیز خیالتان راحت باشد، XHTML توسط تمام مرورگر های جدید پشتیبانی می شود.

سوالی که پیش می آید این است که چرا باید از این زبان استفاده کنیم؟ پاسخ ساده است. اگر به کد زیر نگاه کنید، می فهمیم که دارای نقص هایی است:

<html>
<head>
  <title>This is bad HTML</title>

<body>
  <h1>Bad HTML
  <p>This is a paragraph
</body>

مانند مثال قبلی ما، تگ های پایانی اش جا افتاده اند.

مرورگر های جدید ویندوز و مکینتاش و لینوکس و ... توانایی حدس زدن و صحیح نمایش دادن این کد را دارند اما دستگاه های کوچکتر مانند گوشی های موبایل ممکن است نتوانند این کد را تصحیح کنند و محتوای صفحه را به هم ریخته نمایش دهند.

حتما با خودتان می گویید من هیچ گاه چنین کاری انجام نمی دهم و حواسم به تگ های پایانی هست. مشکل آن جاست که مسئله فقط تگ های پایانی نیست، زبان HTML اجازه می دهد بسیاری از موارد غیر استاندارد را اجرا کنید و زمانی که کد هایتان تبدیل به 800 خط، 1000 خط و بیشتر شد احتمال خطا بسیار بالا می رود.

برای حل این مشکل از زبان XHTML استفاده می شود. در این زبان شما مجبور هستید که از قواعد سفت و سختی پیروی کنید و گرنه سندتان غیر معتبر خواهد بود. در مورد زبان XHTML در جلسات آخر این دوره صحبت بیشتری خواهیم کرد.

خلاصه مقاله

در این قسمت با روش کدنویسی عناصر HTML و ساختار کلی آن ها آشنا شدیم. همچنین سری به استاندارد های سخت گیرانه تر XHTML زدیم تا تفاوت پایه ی آن با HTML را بفهمیم. امیدوارم از این قسمت لذت برده باشید.

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

سید جلال الدین هاشمی

21 مرداد 1399

سلام ممنون از آموزش خوبتون. واقعا دارم لذت میبرم برای تگ برای بستنش گفتین بذاریم یا . منظورم اینه بینش اسپیس هست یا نه؟ ممنون

reza sdiqi

06 خرداد 1399

روکسو واقعا دمت گرم مطالب بسیار زیبایی روو به صورت رایگان در اختیار ما علاقه مندان به برنامه نویسی وکد نویسی که توانایی پرداخت پول های هنگفت کلاساشو نداشتیم قرار دادی