در این مقاله میخواهیم بطور کامل Element ها و Attribute های HTML یا به عبارتی آشنا تر تگ های HTML و اتریبیوت های HTML را بررسی کنیم.
HTML Element یا تگ ها در HTML چین ؟
ما از زبان نشانه گذاری HTML جهت تعیین اسکلت بندی صفحات وب و ایجاد یکسری عناصر مثل دکمه، فرم، متن، جدول، عکس و .... استفاده میکنیم. اینکار بوسیله یکسری ELement یا اصطلاحا تگ ها انجام میشه.
به عنوان مثال تگی داریم با نام button که کارش ایجاد یک عنصر دکمه هستش و با نوشتن کد زیر در یک فایل html میتونیم یک دکمه را به صفحه وب خودمون اضافه کنیم:
<button>دکمه</button>سینتکس و قانون نگارشی تگ های HTML به چه صورتن ؟
HTML Elements یا همان تگ های HTML یک قانون خیلی ساده دارن، در ابتدا یک تگ باز میشه و در ادامه محتوای اون تگ میاد و در انتها هم اون تگ بسته میشه.
به همان مثال بالا توجه کنید، در ابتدا تگ باز ما یعنی <button> اومد، در ادامه محتوای ما یعنی "دکمه" اومد و در انتها هم تگ بسته یعنی <button/> اومد. یعنی ساختاری به شکل زیر:
<tagname>محتوای تگ</tagname>نکته: به این نکته توجه داشته باشید که همه Element ها تگ بسته ندارند و بعضی از Element ها مثل تگ <br> تگ های خالی محسوب میشن و تگ بسته ندارند. یعنی به شکل زیر نوشته میشن:
<br>در مثال بالا تگ br به تنهایی میاد و تگ بسته ای نداره، بنابر این ما میتونیم به شکل بالا و بصورت تنها بنویسیمش. اما در برابر تگ هایی مثل تگ p که نیازمند یک تگ بسته هستند حتما و حتما باید هم تگ باز اونهارو بنویسیم و هم تگ بستشون را و اگر مثل نمونه کدی که در پایین قرار دادم تگ بسته را فراموش کنیم ممکنه که این تگ عملکرد درستی از خودش نشون نده:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<title>Document</title>
</head>
<body>
<h1>عنوان
<p>متن
</body>
</html>تو در تو شدن تگ ها در HTML
تگ ها در HTML میتونن بصورت تو در تو نوشته بشن، یعنی یک تگ داخل یک تگ دیگه نوشته بشه. به مثال زیر توجه کنید:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<title>Document</title>
</head>
<body>
<h1>عنوان</h1>
<p>متن</p>
</body>
</html>در مثال بالا ما یک تگ html داریم که با تگ آغازین <html> شروع میشه و با تگ <html/> بسته میشه و کاربردش تعیین ماهیت سند html ما هستش.
در داخل تگ html یک تگ body داریم که این تگ با <body> باز و با <body/> بسته میشه و کاربرد تگ body هم ایجاد بدنه اصلی سند html ما هستش.
<body>
<h1>عنوان</h1>
<p>متن</p>
</body>در داخل تگ body هم تگ های h1 و p را داریم که به ترتیب با <h1> و <p> باز میشن و در نهایت با <h1/> و <p/> بسته میشن و کاربرد تگ h1 ایجاد یک عنوان و کاربرد تگ p هم ایجاد یک تگ متنی معمولی هستش.
<h1>عنوان</h1>
<p>متن</p>دیگه چی ؟
نکته آخر درمورد تگ های HTML هم اینکه این تگ ها به حروف بزرگ و کوچک حساس نیستند! به عنوان مثال <P> با <p> هیچ فرقی نداره ولی سازمان استانداردهای نرم افزاری W3C توصیه میکنه که همیشه از حروف کوچک استفاده کنید.
همچنین در جدول زیر که در مقاله مفاهیم پایه HTML هم آوردیمش، میتونید لیست برخی از رایج ترین تگ های HTML و کاربرد اونهارو ببینید:
| تگ باز | تگ بسته | کاربرد |
|---|---|---|
| <h1> | </h1> | نمایش یک عنوان برجسته و بزرگ |
| <p> | </p> | نمایش یک متن معمولی |
| <strong> | </strong> | نمایش یک متن در حالت برجسته و پررنگ |
| <a> | </a> | ایجاد یک لینک به صفحه ای دیگر |
| <button> | </button> | ایجاد یک دکمه |
| <div> | </div> | ایجاد یک بخش/فضا/section |
| <input> | ندارد | ایجاد یک فیلد برای وارد کردن اطلاعات |
| <img> | ندارد | افزودن یک تصویر در صفحه وب |
| <span> | </span> | ایجاد یک عنصر متنی معمولی |
| <blockquote> | </blockquote> | نمایش یک متن در حالت نقل قول |
HTML Attributes چیست ؟
HTML Attribute ها اطلاعات اضافی و گاها کنترل بیشتری را برروی تگ های HTML ما فراهم میکنند.
- تمامی تگ ها در HTML میتونن Attribute داشته باشن.
- کاربرد Attribute ها گاهی اوقات اینه که اطلاعات اضافه ای را برای ما فراهم میکنند، گاهی کنترل بیشتری برروی اون تگ به ما میدن و گاهی اوقات هم عملکرد اون تگ را تکمیل میکنند.
- Attribute ها همیشه در تگ آغازین نوشته میشن.
- Attribute ها معمولا به شکل "نام/مقدار" میان، مثل
src="/images/cat.jpg"که عملکرد تگimgرا تکمیل میکنه و بوسیلش آدرس عکس مدنظر را به تگimgمیدیم.
بریم در ادامه با چندتا از پر استفاده ترین HTML Attribute ها آشنا بشیم:
href Attribute
اتریبیوت href برای تگ a بکار میره، کاربرد تگ a ایجاد یک متن لینک دار هست و بوسیله اتریبیوت href هم میتونیم آدرس لینک مدنظر را تعیین کنیم:
<a href="https://vaspar.io">vaspar</a> src Attribute
از تگ img استفاده میکنیم تا یک عنصر تصویری را به صفحه وب خودمون اضافه کنیم. بوسیله اتریبیوت src به تگ img میفهمونیم که چه عکسی را باید بارگذاری کنه:
<img src="cat.jpg">ما به 2 شکل میتونیم آدرس عکس مدنظر را به تگ img از طریق اتریبیوت src بدیم:
- Absolute URL: استفاده از آدرس یک عکسی که در یک سرور دیگه میزبانی میشه. مثل: src="https://vaspar.io/images/cat.jpg"
- Relative URL: استفاده از آدرس عکسی که در همان سروری که هستیم ( یا همان پروژه و فایلی که درش قرار داریم). مثل: src="/images/cat.png"
Attribute های width و height
برخی از تگ ها مثل تگ img اتریبیوت های width و height هم از ما میگیرن و بوسیله این اتریبیوت ها میتونیم ابعاد اون تگ را تعیین کنیم. اتریبیوت width برای طول و اتریبیوت height برای عرض اون تگ هست.
<img src="cat.jpg" width="500" height="600"> alt Attribute
اتریبیوت alt برای تگ img کاربرد داره و بوسیله این اتریبیوت میتونیم یک متن جایگزین برای عکس تنظیم کنیم که هم به بهبود SEO سایت ما کمک میکنه و هم درصورت بارگذاری نشدن اون عکس برای کاربر، این متن را به کاربر نشون میده:
<img src="/images/cat.jpg" alt="گربه پرشین">style Attribute
از اتریبیوت style میتونیم جهت استایل دادن به تگ هامون استفاده کنیم، میتونیم ابعاد اونهارو تعیین کنیم، رنگشون را تعیین کنیم و خیلی چیزهای دیگه:
<p style="color: red;">متن قرمز رنگ</p>در مقالات بعدی و همچنین در دوره آموزش HTML و CSS بطور تخصصی تر و کامل تر با تگ ها و اتریبیوت های HTML آشنا خواهیم شد.