نکات مهم HTML
خوش اومدین به نهمین جلسه از دوره آموزش HTML. ما در طول این دوره مطالب زیادی در مورد HTML و نحوه کارکرد اون یادگرفتیم. همچنین با تگ های زیادی آشنا شدیم و با صفات و attribute های اختصاصی و عمومی اونها آشنا شدیم. هرچند ما با همه تگ هایی که در HTML وجود داره، آشنا نشدیم و حتی برخی از همین تگ هایی هم که معرفی کردیم، صفات متعدد دیگه ای دارند ولی شما با مطالعه هشت جلسه قبل و دیدن ویدیوهای مربوط به اونها تسلط نسبی به HTML دارید. در این جلسه قصد داریم به بررسی برخی نکات مهم HTML بپرداریم. نکاتی که بین تگ های مختلف مشترک هستند و راه رو برای یادگیری آسان دیگر تگ های html که در ما در موردشون صحبت نکردیم، باز میکنن. پس در این جلسه همراه من باشید.
نکات مهم HTML
اولین نکته مهم از نکات مهم HTML که باید بدونید، این است که در نوشتن تگ های دو قسمتی دقت داشته باشیم. همیشه در لحظه بازکردن تگ باز، تگ بسته را نیز بنویسیم که دچار مشکل نشیم. اگر تگی را باز کنیم و آن را نبندیم، آن تگ یا خاصیت خود را از دست میدهد و یا در جایی که تنظیمات پیشفرض مشخص کردن بسته میشه، که ممکن هست در فایل ما خرابی به وجود بیاره و اشکال یابی رو بسیار سخت میکنه.
دومین نکته از نکات مهم HTML این است که ما تگ هایی داریم که از لحاظ ساختار و خروجی یکسان هستند. به عنوان مثال تگ های div , section, header, footer , aside و چندین تگ دیگه، همگی خروجی یکسانی رو برای ما توی صفحه نمایش خواهند داشت. این تگ ها برای طرح بندی صفحه استفاده میشه ولی در ظاهر همه یک کار ثابت رو انجام میدن و یک بخشی رو ایجاد میکنن. تنها خاصیت این تگ ها برای موتورهای جستجو هست که راحتتر متوجه میشن که این بخش شما header سایت شما است و بخش دیگر که داخل تگ footer هست مربوط به اطلاعات footer شما هست و الی آخر. ولی از لحاظ ظاهری بخشی که توسط هر کدام از این تگ ها ایجاد میشه، هیچ تفاوتی با هم ندارن.
ما با تگ های بالا که مربوط به طرح بندی صفحه هستند، در دوره CSS آشنا میشیم. چرا که تنها تفاوت ظاهری اونها در استایل اونهاست که حتما به اون میپردازیم.
نکته بعدی از نکات مهم HTML که میخوام در موردش صحبت کنم این است که جدا از تقسیم بندی هایی که تا اینجا برای تگ ها داشتیم، ما یک نوع تقسیم بندی دیگه هم برای تگ ها داریم. تگ های ما یا block هستند یا inline. ما با هر دو نوع از این تگ ها در طول دوره آشنا شدیم. تفاوت block و inline در این است که تگ های block یک بخش با عرض کامل رو اشغال میکنن ولی تگ های inline در فقط روی بخشی که داخل اون قرار دارند تأثیر میگذارن. به عنوان مثال تگ a که یک تگ inline هست میتونه در وسط یک پارگراف قرار بگیره و قبل و بعد از این تگ رو متن میتونه پرکنه و تأثیر تگ a صرفا روی متن داخل اون هست اما تگی مثل p از ابتدای خط شروع میشه و بعد از بستن تگ p، ادامه متن از ابتدای خط بعدی شروع میشه. در زیر میتونیم تگ های block و تگ های inline رو ببینیم:
تگ های block
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>تگ های inline
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>ما در طول این دوره با خیلی از این تگ ها آشنا شدیم و از اونها استفاده کردیم. هرچند این خصوصیت block و inline بصورت پیشفرض برای تگ های بالا تعیین شده ولی این امکان وجود داره که با استفاده از کدهای CSS این خصوصیت رو تغییر در پروژه خودمون و بر حسب نیازمون تغییر بدیم.
نکته بعدی از نکات مهم HTML : همونطور که در لیست بالا دیدید ما بعضی از این تگ ها رو در دوره توضیح ندادیم و البته تگ های دیگری هم هستند که دراین لیست نیستند. نکته مهم در این خصوص این است که تگ های مهم و پرکاربرد رو شرح دادیم و بعضی از اونها رو هم در دوره CSS توضیح میدیم (چرا که به خودی خود هیچ تأثیری در خروجی ندارند و وابسته به CSS هستند) و برخی تگ های دیگه هم هستند که بر حسب نیازتون میتونید به سرعت باهاشون آشنا بشید. چرا که با چگونگی استفاده از یک تگ آشنا هستید و مفاهیم کلی مورد نیاز رو بلد هستید. به عنوان مثال اگه شما لازم داشته باشید که یک ویدیو در صفه HTML خودتون قرار بدید، با اینکه تا الان از تگ video استفاده نکردین ولی با توجه به اینکه تگها رو میشناسید و با آدرس دهی ها آشنا هستید و صفات مشترک رو هم تا حدودی میشناسید. با ملاحظه ساختار کلی تگ video میتونید به راحتی یک ویدیو رو به پروژه خودتون اضافه کنید. این موضوع در خصوص تمامی تگ های دیگه صدق میکنه.
یکی از نکات مهم HTML که مربوط به تگ های منسوخ شده است. تگ iframe این امکان رو به ما میده که بتونیم یه صفحه وب دیگه رو داخل صفحه خودمون نمایش بدیم.این تگ در گذشته بسیار مورد استفاده قرار میگرفت ولی در حال حاضر به طور غیررسمی این تگ منسوخ شده و حتی سایتهای زیادی امکان استفاده از iframe رو برای سایت خودشون مسدود کردند. به عنوان مثال شما قادر نیستید که سایت گوگل رو داخل ساخت خودتون با استفاده از تگ iframe نمایش بدید. این چنین تگ هایی که همانند iframe غیررسمی منسوخ شدند زیاد هستند و بیشتر از اونها تگ هایی هستند که به طور رسمی منسوخ شدند مثل تگ center که وظیفه وسط چین کردن متن رو به عهده داشت که چون وسط چین کردن مربوط به CSS بود به طور کلی منسوخ شد و این عمل وسط چین رو ما با استفاده از CSS اعمال میکنیم.
هرچند توی منابع مختلف همچنان این تگ ها وجود دارند ولی پیشنهاد من این هست که از این تگ ها استفاده نکنید و از روشها و تگ های اصولی در پروژه های خودتون استفاده کنید.
آخرین نکته از نکات مهم HTML که قصد دارم اینجا بهش اشاره کنم، استفاده از توضیحات در HTML هست. ما این امکان رو داریم که توضیحاتی رو به فایل HTML خودمون اضافه کنیم که این توضیحات توسط مرورگر خوانده نمیشه و تأثیری در خروجی فایل ما نداره. این توضیحات که میتونه یک یا چند خط باشه میتونه شامل مطاب و نکاتی مربوط به اون بخش از کدمون باشه که در آینده برای خودمون و یا شخص دیگری که کد ما رو مطالعه میکنه، حکم راهنما رو داره. ما برای اضافه کردن توضیحات از ساختار زیر استفاده میکنیم:
<!-- Write your comments here -->
همانطور که میبینید توضیحات به شکل یه تگ یک قسمتی هستی که با یک علامت تعجب و دو تا خط تیره شروع میشه و با دو خط تیره هم تموم میشه. متن توضیحات مدنظرمون رو هم بین این دو قسمت قرار میدیم.
