سلام و خسته نباشید خدمت همراهان روکسو، در این قسمت می خواهیم با روش پیشنهادی کدنویسی و ساختار کلی عناصر HTML صحبت کنیم. برخی از موارد زیر جزو قوانین کدنویسی در زبان HTML هستند اما برخی دیگر صرفا پیشنهاد می شوند و دست شما باز است که از آن ها پیروی نکنید.
شیوه تعریف عناصر HTML به صورت زیر می باشد:
<tagname> محتوا در این قسمت قرار می‌گیرد </tagname>
بنابراین هر عنصر HTML برابر است با تگ آغازین + محتوا + تگ پایانی. مثال:
<p>My first paragraph.</p>
نکته: عناصر HTML ای که دارای محتوا نباشند «عناصر خالی» یا empty element نام دارند و دارای تگ پایانی نیز نیستند. یکی از مثال های بارز این تگ ها، تگ <br> است که معادل اینتر زدن و به خط بعد رفتن در هنگام نوشتن است.
«به خط جدید رفتن» اصطلاح خاص خودش را دارد؛ line break. به مثال زیر توجه کنید:
برای مشاهده ی خروجی این کد در مرورگتان روی این لینک کلیک کنید.
در HTML5 نیازی به بستن عناصر خالی ندارید اما اگر دوست دارید کدهایتان را در نهایت استاندارد بنویسید و همچنین کد هایتان توسط تجزیه کنندگان XML قابل خواندن باشد می توانید آن ها را به این شکل ببیندید:
<br />
توجه کنید که در این حالت، تگ ها دو عدد (تگ آغازین و پایانی) نمی شوند بلکه همان تگ اول تغییر شکل پیدا می کند.
به طور مثال در کد زیر چهار عنصر HTML وجود دارد:
اگر به کد بالا نگاه کنید متوجه می شوید عنصر <html> تمام سند HTML را تعریف می کند و دارای تگ های آغازین و پایانی است. محتوای درون این تگ، یک تگ دیگر به نام <body> است. این عنصر بدنه ی سند را تعریف می کند و مشخصا دارای تگ های آغازین و پایانی است. حالا محتوای خود عنصر <body> شامل دو تگ <h1> و <p> است، یعنی این قسمت:
حالا تگ <h1> یک تیتر را تعیین می کند و دارای تگ های <h1> و <h1/> می باشد. تگ <p> نیز تعریف کننده ی یک پاراگراف است که شامل تگ های <p> و <p/> می شود. این توضیح ساختار تو در توی بالا بود. حالا می فهمیم معنی تو در تو بودن چیست.
زبان HTML مانند دیگر زبان ها آنچنان قوانین سفت و سختی ندارد. منظور من از این حرف چیست؟ منظور من این است که در بسیاری از زبان های برنامه نویسی با جا انداختن کوچک ترین علامت و نوشتار، در اکثر اوقات برنامه از کار می افتد اما در زبان HTML مسئله به شکل دیگری است.
در زبان HTML اگر برخی از قسمت ها را جا بیندازید صفحه تان هنوز هم نمایش داده می شود! به طور مثال: