خانه آموزش HTML آموزش تگ های HTML آموزش تگ b در HTML

آموزش تگ b در HTML

توسط

۱۳۹۷-۱۱-۲۹

آموزش تگ b در HTML

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

آموزش تگ b در HTML

Free-Learn

آنچه در این جلسه میخوانید :

1 تگ b در HTML
2 مثال از تگ b در HTML
3 پشتیبانی مرورگرها
4 پشتیبانی از صفات و رویدادهای عمومی
5 نکات و توضیحات
6 دستورات CSS پیش فرض

تگ b در HTML

تگ b که از کلمه Bold گرفته شده است ، تگی است که با استفاده از آن میتوان یک متن را بصورت برجسته یا ضخیم یا در واقع همون bold ( کلفت ) شده ایجاد و به نمایش گذاشت.

تگ b در دسته ی تگ های فرمت بندی یا قالب بندی متن ها در HTML می باشد، فرمت بندی یا قالب بندی یعنی اینکه ما با استفاده از این تگ ها میتونیم با متن ها کار کنیم. (مثلا یک متن را کج کنیم یا مثلا یک متن را زیرش خط بکشیم و..)

تگ <strong> در ظاهر همانند تگ <b> می باشد ولی در معنا برای مرورگر کاملا باهمدیگر فرق میکنند.

تگ b که گفتیم میاد و هرچیزی (متن) که بینش قرار بگیرد را بصورت پررنگ یا بولد شده نمایش میدهد ولی ما یک تگ دیگه هم داریم به اسم Strong که اونم دقیقا میاد و متن درونش رو پررنگ و بولد شده به نمایش میگذارد؟!

خب حالا سوال اینه !؟ که فرق این دوتا تگ یعنی تگ b با تگ Strong در چیه؟ آیا اصلا فرقی دارند؟

پاسخ : بله که فرق دارند، تگ b میاد و یک متن را بصورت بولد شده نمایش میدهد فقط همین و تمام شد رفت ولی تگ strong متنی که درش قرار میگیرد را بصورت بولد شده نمایش میدهد (دقیقا مثه تگ b) ولی در معنا برای مرورگر فرق میکنه.

ادامه پاسخ : از این بابت فرق میکنه که، متنی که درون تگ strong قرار میگیرد برای مرورگر یه متن مهم و با ارزش محتوایی حساب می شود ولی متنی که درون تگ b قرار میگیرد برای مرورگر فقط یه متن ساده هست که بولد شده یا پررنگ شده است فقط همین.

ارسالی کاربر محترم سایت، آقای صمد صفرپور :

تگ b و تگ strong از نظر معنایی با هم متفاوت ھستند ، یعنی زمانی که محتوای مهمی داریم و میخواھیم به موتورھای جستجوگر مثله ( گوگل ) اعلام کنیم که به این محتوا اھمیت ویژه ای بدھد از تگ strong استفاده میکنیم و زمانی که محتوای ما محتوای مهمی نیست ( یا ارزش محتوایی ندارد ) و تنها میخواھیم آن را ضخیم ( کلفت ) کنیم از تگ b استفاده میکنیم.

Free-Learn

مثال از تگ b در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

<body>

<p>Hi, My Name Is <b>Sadegh Asadi</b> What's Your Name? </p> 

</body>

<body>

<p>Hi, My Name Is <b>Sadegh Asadi</b> What's Your Name? </p>

</body>

امتحان کنید

مثال شماره ۲ : سفارشی سازی تگ b با استفاده از دستورات CSS – بدون کلاس

<!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>

<!DOCTYPE html>

<html>

<head>

<style>

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 – باکلاس

<!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>

<!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 استفاده نمایید و دیگر تگ های قالب بندی متن ها که در اینجا آنها را آموزش دادم.

پس در کل داره میگه که شما باید از تگ های قالب بندی متناسب با اون کاری که میخواهید استفاده نمایید و استفاده نامناسب از آنها میتونه به سئوی سایت شما ضربه بزنه.

پیشنهاد میکنم آموزش ویژگی font-weight در CSS را مشاهده نمایید.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ b را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

b {
  font-weight: bold;
}

b {

font-weight: bold;

}

Free-Learn

دریافت PDF یا پرینت این مطلب