مهم ترین تگ های HTML که باید بشناسیم

مهمترین تگ های HTML رو میشناسی؟

تو این مقاله بهت میگم کدوم تگ ها مهم و کاربردی هستن اما اول لازمه این نکته رو بگم که در HTML یک قانون داریم به نام قانون 20 – 80 یعنی در 80 درصد مواقع 20 درصد تگ ها استفاده میشن و تقریبا 80 درصد از تگ ها در 20 درصد مواقع استفاده میشن.

اولین اجازه بدید به 4 تگ اصلی اشاره کنم که در تمام صفحات وب الزاما وجود داره و بدون اونها صفحه وب معنایی نداره

• تگ DOCTYPE

  دستور doctype مخفف عبارت Document Type هست و در اولین سطر از کد صفحه وب قرار میگیره.

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

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

• تگ html

  تگ HTML باعث می شود که مرورگرها بتونن تشخیص بدن هر بخش از صفحه وب سایت چه نوع عنصریه و باید چطور نمایش داده بشه. از طرفی در نظر داشته باشید کل کدهای html ما بین تگ باز شونده و بسته شونده ی همین تگ قرار میگیره پس نتیجه میگیریم که هر صفحه وب ما حتما دارای یک تگ باز و بسته ی html هست.

• تگ head

  هد یا Head یا قسمت سر، یکی از مهمترین و اساسی ترین بخشهای یک صفحه ی وبه. بطور کلی میتونیم بگیم که Head یک صفحه ی وب ، مغز اون صفحه ست و توش یکسری اطلاعات مربوط به مرورگرها و موتورهای جستجوگر ( برای بحث سئو ) قرار میگیره.

  مثلا عنوان صفحه ی ما برای نمایش در مرورگرها در این قسمت قرار میگیره، یا مثلا برای اضافه کردن دستورات CSS یا دستورات JS و .. همگی از قسمت Head یک صفحه باید استفاده کنیم.

  تگ head در یک صفحه ی وب بعد از تگ html و قبل از تگ body قرار میگیره.

• تگ body

  تگ body تعیین کننده محتوای اصلی سنده که در مرورگر نمایش داده می شه. این تگ می تونه حاوی محتوای متن، پاراگراف ها، عناوین، تصاویر، جدول ها، لینک ها، ویدئوها و … باشد.

  تگ body باید عنصر دوم بعد از تگ head باشه و یا باید بین تگ های head و html قرار بگیره. این تگ برای هر سند HTML ای لازمه و باید فقط یک بار در کل سند استفاده بشه.

و حالا اجازه بدین به تگ های پرکاربرد دیگه بپردازیم:

• تگ title

  در قسمت head صفحه وب، از تگ title برای اعلام عنوان صفحه وب استفاده میشه. این عنوان در نوار عنوان یا برگه ی مرورگر وب نشون داده میشه اما در صفحه وب واقعی که کاربران می‌بینند ظاهر نمی‌شود.

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

• تگ های H1 تا H6

  ما 6 تا تگ H تو HTML داریم که به ترتیب از H1 شروع و به H6 ختم میشن.

  تگ H1 بزرگ ترین عنوان و تگ H6 کوچکترین عنوان رو ایجاد میکنه نوشتن H یا h هم فرقی نداره. این تگ های H یکی از پرکاربردترین تگ های سند HTML هستن. حالا اگه به خروجی H های دقت کنید متوجه تفاوت تگ های H میشید.

  

• تگ p

  تگ p هم به عنوان یکی دیگه از پر کاربردترین تگ‌ های HTML عمل میکنه که در اون حرف p مخفف «Paragraph» به معنی پاراگرافه. برای ساختاربندی متن به پاراگراف‌های صفحه وب استفاده می‌شه. در کدنویسی HTML، صرفاً زدن کلید Enter در ویرایشگر کد، پاراگراف جدید ایجاد نمی‌کنه. اگر کاربری چند پاراگراف بخواد، باید از چندین تگ p تو سند خودش استفاده کنه.

• تگ b

  از این تگ برای پررنگ کردن یا به اصطلاح bold کردن یک متن یا کلمه یا حرف استفاده میشه.

• تگ span

  تگ span مثل نوعی ظرف خالیه که می‌تونیم از اون برای گروه‌بندی و استایل دادن به متون استفاده کنیم. این تگ هیچ سبک پیش فرضی برای خودش نداره. میشه از تگ span داخل تگ‌های دیگه مثل سرفصل‌ها و پاراگراف‌ها استفاده کرد تا به بخش‌های خاصی از متن استایل بدیم.

  در مثالی که این پایین می بینید ما داخل تگ های h2 و p تگ span قرار دادیم و تونستیم قسمتی از جمله رو به رنگ قرمز در بیاریم. خروجی کا رو در عکس زیر ببینید.

  

• تگ div

  تگ div مخفف عبارت division هست.یعنی تقسیم کننده . در اصل میتونم بگم پر استفاده ترین تگ در html همین تگ div هستش. چون برای هر قسمتی لازم داریم از div استفاده کنیم تا از بقیه ی قسمتها جداش کنیم.

• تگ img

  یکی از مهمترین تگ های Html تگ img هست که برای نمایش عکس ازش استفاده میشه. در مثال زیر با استفاده از تگ html یه تصویر فراخونی میکنیم.

  

• تگ a

  یکی دیگه از پرکاربردترین تگ ها، تگ a نام داره، که برای لینک کردن صفحه ی جاری به صفحات دیگه (حالا یا از سایتهای دیگه یا از سایت خودمون) بهش احتیاج داریم. نحوه ی نوشتن تگ a رو مثال ببینید:

  

  تو این مثال دو تا لینک درست کردیم یکی رو وقتی روش کلیک کنیم ما رو میبره به صفحه ی index ما دومی هم وقتی کلیک کنیم میره به سایت آپارات، خروجی رو ببینید:

  

• تگ form

  این تگ هم در صفحات وب خیلی مهمه و باعث میشه تا از طریق اون و تگ های داخلش که در ادامه بهتون معرفی میکنم، یه سری اطلاعات از کاربر بگیریم و به سرور بفرستیم. هر تگ form یه خصوصیت داره به نام action که از طریق این خصوصیت میتونیم بهش بفهمونیم که چه کاری باید انجام بده. به مثال زیر توجه کنید:

  

  در مثال بالا یه تگ form داریم که دارای خصوصیت action ، method و enctype هستش.

  خصوصیت action که همونطوری که گفتم آدرس اون تابع و دستوری رو میگیره که باید با اعمال شدن این فرم اجرا بشه.

  خصوصیت method هم برای تعیین کردن نوع و روش ارسال داده ها استفاده میشه. احتمالا در یک مقاله جدا راجع بهش صحبت کنم.

  خصوصیت enctype هم برای وقتیه که میخواهیم از طریق تگ form یه عکس به سرور ارسال کنیم ، در این صورت باید حتما از خصوصیت enctype استفاده کنیم و مقدار اون رو برابر با مقدار multipart/form-data قرار بدیم.

  در آخر هم هر form یه دکمه داره که با زدنش داده های form ارسال میشن به اون آدرسی که تو action نوشته شده، فقط برای اینکه این اتفاق بیفته باید حتما نوع دکمه رو submit قرار بدید.

• انواع تگ input

  از طریق این تگ میتونیم از کاربر یسری داده دریافت کنیم. مثلا یسری فیلدها مثل نام و نام خانوادگی و موبایل و رمز عبور و عکس پروفایل و هر چی که دلمون بخواد (در حالات متنی، انتخابی یا حتی فایل) می تونیم از کاربر دریافت کنیم.

  در کل هر تگ input چند مدل type داره که اینجا چند تا از مهم ترین هاش رو واستون میارم:

  input نوع text:

  مقدار متنی دریافت میکنه (مثلا برای نام و نام خانوادگی و شماره تماس استفاده میشه)

  input نوع file:

  از کاربر فایل دریافت میکنه (مثلا به کاربر میگیم عکس پروفایل یا فایل رزمه ات رو بارگزاری کن)

  input نوع radio:

  چندتا گزینه به کاربر میده که فقط یکیش رو میتونه انتخاب کنه (حواستون باشه برای استفاده از radio باید name همه گزینه ها یکی باشن مثل عکس زیر)

  

  input نوع checkbox:

  برای تیک زدن استفاده میشه (مثلا من قوانین را می پذیرم)

  input نوع hidden:

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

  input نوع password:

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

  حالا تو عکس زیر میخوام واستون از همش یه مثال بزارم:

  

• تگ textarea در html

  ما برای گرفتن متن های کوتاه از تگ input استفاده میکنیم ولی برای گرفتن متن های طولانی مثل توضیحات یا متن رزومه و بیوگرافی از textarea استفاده میکنیم

• سایر تگ ها

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

  صمیمانه در کنار شما هستیم