آموزش تگ b در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ b در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ b در HTML
تگ b
که از کلمه Bold گرفته شده است ، تگی است که با استفاده از آن میتوان یک متن را بصورت برجسته یا ضخیم یا در واقع همون bold ( کلفت ) شده ایجاد و به نمایش گذاشت.
تگ b در دسته ی تگ های فرمت بندی یا قالب بندی متن ها در HTML می باشد، فرمت بندی یا قالب بندی یعنی اینکه ما با استفاده از این تگ ها میتونیم با متن ها کار کنیم. (مثلا یک متن را کج کنیم یا مثلا یک متن را زیرش خط بکشیم و..)
تگ b که گفتیم میاد و هرچیزی (متن) که بینش قرار بگیرد را بصورت پررنگ یا بولد شده نمایش میدهد ولی ما یک تگ دیگه هم داریم به اسم Strong که اونم دقیقا میاد و متن درونش رو پررنگ و بولد شده به نمایش میگذارد؟!
خب حالا سوال اینه !؟ که فرق این دوتا تگ یعنی تگ b با تگ Strong در چیه؟ آیا اصلا فرقی دارند؟
پاسخ : بله که فرق دارند، تگ b میاد و یک متن را بصورت بولد شده نمایش میدهد فقط همین و تمام شد رفت ولی تگ strong متنی که درش قرار میگیرد را بصورت بولد شده نمایش میدهد (دقیقا مثه تگ b) ولی در معنا برای مرورگر فرق میکنه.
ادامه پاسخ : از این بابت فرق میکنه که، متنی که درون تگ strong قرار میگیرد برای مرورگر یه متن مهم و با ارزش محتوایی حساب می شود ولی متنی که درون تگ b قرار میگیرد برای مرورگر فقط یه متن ساده هست که بولد شده یا پررنگ شده است فقط همین.
Free-Learn
مثال از تگ b در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
1 2 3 4 5 |
<body> <p>Hi, My Name Is <b>Sadegh Asadi</b> What's Your Name? </p> </body> |
مثال شماره ۲ : سفارشی سازی تگ b با استفاده از دستورات CSS – بدون کلاس
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <style> b{ background-color:#f2f2f2; padding:5px; border-bottom:2px solid #2196F3; color:#2196F3; } </style> </head> <body> <p>Hi, My Name Is <b>Sadegh Asadi</b> What's Your Name? </p> </body> </html> |
مثال شماره ۳ : سفارشی سازی تگ b با استفاده از دستورات CSS – باکلاس
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> b.my_b{ background-color:#f2f2f2; padding:5px; border:2px solid #607D8B; color:#2196F3; box-shadow: 0 2px 1px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3); } b.my_b:hover{ color:black; border:2px solid #F44336; } </style> </head> <body> <p>Hi, My Name Is <b class="my_b">Sadegh Asadi</b> What's Your Name? </p> </body> </html> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ b
در HTML پشتیبانی میکنند یا خیر.
نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ b
از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
برای بهنیه بودن محتوا و مطالب تان سعی کنید الکی همینجور بی هدف از تگ b استفاده نکنید، همونطور که گفتم این تگ میاد و یک متن رو بصورت پررنگ یا بولد شده نمایش میدهد بدون هیچ گونه ارزش محتوایی.
حال HTML5 میگه اگر میخواهید در محتواتون از تگ های تیتر یا هدینگ استفاده نمایید باید از تگ های تیتر (H1-H6) استفاده نماید و اگر میخواهید متنی را بصورت بولد شده و با ارزش محتوایی بالا ایجاد کنید باید از تگ strong استفاده نمایید.
یا مثلا اگر میخواهید یک متن را بصورت هایلایت یا مارک شده ایجاد نمایید باید از تگ mark استفاده نمایید و دیگر تگ های قالب بندی متن ها که در اینجا آنها را آموزش دادم.
پس در کل داره میگه که شما باید از تگ های قالب بندی متناسب با اون کاری که میخواهید استفاده نمایید و استفاده نامناسب از آنها میتونه به سئوی سایت شما ضربه بزنه.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ b
را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
1 2 3 |
b { font-weight: bold; } |