در مواقعی در صفحات وب ، ما بر یک قسمت از متن خودمان تاکید داریم و ان قسمت از متن برای ما اهمیت بالایی دارد. در نتیجه ما باید با استفاده از تگ های تاکیدی که جلوتر به شما معرفی میکنیم به ربات های موتورهای جستجو می فهمانیم که این قسمت از متن ما ، اهمیت بالایی دارد.چه تگ هایی در HTML تاکیدی هستند؟ اموزش گام به گام و بصری تگ strong و تگ em در ادامه مطلب …
با ما همراه شوید تا به طور کامل با تگ های تاکیدی آشنا شوید.
#1 : تگ تاکیدی strong
با تگ strong میتوانیم برای ربات های جستجوگرها مشخص کنیم که چه قسمتی از متن مهم است و یا ارزش محتوایی بالایی دارد. این تگ در همه مرورگرها از جمله Chrome ، Firefox ، Opera ، Safari ، Edge پشتیبانی می شود.
تگ b و تگ تاکیدی strong در ظاهر متن تغییر یکسانی ایجاد میکنند. یعنی هر دوی این تگ ها قسمتی از متن را که در بین تگ های باز و بسته این تگ ها قرار دهیم به صورت Bold نمایش می دهد.
ولی در نظر موتورهای جستجوگر متنی که ما بین تگ b قرار دارد از نظر محتوایی ارزش بالاتری ندارد. فقط ظاهر آن به صورت Bold است . و متنی که در بین تگ تاکیدی strong قرار دارد از نظر محتوایی نسبت به ما بقی متن ارزش بالاتری دارد.
همانطور که در جلسه قبل نکات استفاده از تگ p را مطرح کردیم ، با استفاده از تگ p یا پاراگراف میتوانیم در سند HTML خودمان متن را قرار دهیم .
بیشتر بخوانید
- ایجاد اولین سند html و آشنایی با ساختار صفحات آن
- آموزش تگ های تیتر یا heading – تاثیر تگ هدینگ html در سئو سایت
- آموزش تگ p یا پاراگراف در html و کاربردهای آن
حالا با یک مثال نحوه ی استفاده از تگ strong را بهتر متوجه می شوید.
<body> <h2> طراحی و سئو سایت متاوبز</h2> <p> لورم ایپسوم متن ساختگی با تولید سادگی<strong> صنعت چاپ </strong>طراحان گرافیک است </p> </body>
همانطور که در تصویر زیر قابل مشاهده هست متن صنعت چاپ که در بین تگ strong قرار دارد به صورت Bold نمایش داده شده است.
تفاوت تگ تاکیدی strong و تگ b
حالا یک مثال از تگ b می بینیم و نحوهی نمایش آن در صفحه وب و متوجه میشویم که در نمایش آن در صفحه وب شبیه هم هستند .
<body>
<h2> طراحی و سئو سایت متاوبز</h2>
<p> لورم ایپسوم متن ساختگی با تولید سادگی<b> صنعت چاپ </b>طراحان گرافیک است </p>
</body>
نتیجه این مثال در تصویر زیر قابل مشاهده است.
حالا در مثال زیر این دو را در زیر هم قرار میدهیم تا بهتر متوجه بشوید که در ظاهر این دو تگ شبیه هم هستند.
<body>
<h2> طراحی و سئو سایت متاوبز</h2>
<p> لورم ایپسوم متن ساختگی با تولید سادگی<strong> صنعت چاپ </strong>طراحان گرافیک است </p>
<p> لورم ایپسوم متن ساختگی با تولید سادگی<b> صنعت چاپ </b>طراحان گرافیک است </p>
</body>
همانطور که مشاهده کردین در ظاهر این دو تگ هیچ تفاوتی با هم ندارند و فقط تفاوت این دو تگ در اهمیت دادن به قسمتی از متن است.
تفاوت تگ <strong> در HTML4 و HTML5
در HTML4 ، تگ strong متن را به صورت قوی به موتورهای جستجو معرفی می دهد ، اما در HTML5 ، متن را مهم را به موتورهای جستجو معرفی می کند.
پشتبانی تگ strong در مرورگرها
در همه مرورگرهای تحت کامپیوتر از جمله Chrome ، Firefox ، Opera ، Safari ، Edge پشتیبانی می شود.
در همه مرور گرهای تحت موبایل از جمله Android ، Internet Explorer ، Firefox ، Safari ، Opera پشتیبانی می شود.
#2 : تگ تاکیدی em
تگ em که از کلمه Emphasized گرفته شده با این تگ میتوان بروی یک قسمتی از متن تاکید کرد. متنی که در بین تگ em قرار میگیرد به ربات های موتورهای جستجو می فهماند که ما به این قسمت از متن تاکید داریم. و این قسمت از متن داراری ارزش محتوایی بالاتری نسبت به مابقی متن است.
تگ i و تگ em در ظاهر متن تغییر یکسانی ایجاد میکنند یعنی هر دوی این تگ ها قسمتی از متن را که در بین تگ های باز و بسته این تگ ها قرار دهیم به صورت Italic نمایش می دهد.
ولی در نظر موتورهای جستجوگر متنی که ما بین تگ i قرار دارد از نظر محتوایی ارزش بالاتری ندارد. و فقط ظاهر آن به صورت Italic است. و متنی که در بین تگ تاکیدی em قرار دارد از نظر محتوایی نسبت به ما بقی متن ارزش بالاتری دارد.
حالا با یک مثال نحوه ی استفاده از تگ em را بهتر متوجه می شوید.
<body> <h2> طراحی و سئو سایت متاوبز</h2> <p> لورم ایپسوم متن ساختگی با تولید سادگی<em> صنعت چاپ </em>طراحان گرافیک است </p> </body>
همانطور که در تصویر زیر قابل مشاهده هست متن صنعت چاپ که در بین این تگ قرار دارد به صورت Italic نمایش داده شده است.
تفاوت تگ تاکیدی em و تگ i
حالا در مثال زیر این دو را در زیر هم قرار میدهیم تا بهتر متوجه بشوید که در ظاهر این دو تگ شبیه هم هستند.
<body> <h2> طراحی و سئو سایت متاوبز</h2> <p> لورم ایپسوم متن ساختگی با تولید سادگی<em> صنعت چاپ </em>طراحان گرافیک است </p> <p> لورم ایپسوم متن ساختگی با تولید سادگی<i> صنعت چاپ </i>طراحان گرافیک است </p> </body>
همانطور که مشاهده کردین در ظاهر این دو تگ هیچ تفاوتی با هم ندارند و فقط تفاوت این دو تگ در اهمیت دادن به قسمتی از متن است.
دقت داشته باشید از تگ i زمانی استفاده کنید که ان متن درون هیچ یک از تگهای em ، strong ، mark ، cite و dfn نباشد.
پشتبانی تگ em در مرورگرها
در همه مرورگرهای تحت کامپیوتر از جمله Chrome ، Firefox ، Opera ، Safari ، Edge پشتیبانی می شود.
در همه مرور گرهای تحت موبایل از جمله Android ، Internet Explorer ، Firefox ، Safari ، Opera پشتیبانی می شود.
نکات استفاده درست از تگ های تاکیدی
سعی کنید از تگ ها در مکان مناسب و برای هدف مناسب استفاده کنید. مثلا اگه میخواهید بر روی قسمتی از متنتان تاکید کنید و آن به صورت برجسته به مخاطبتان نمایش داده شود آن را داخل تگ strong قرار دهید . اگر میخواهید ان متن تاکیدی به صورت کج به کاربر نمایش داده شود آن را داخل تگ em قرار دهید . ولی اگه فقط میخواهید متن رو به صورت برجسته نمایش دهید و تاکیدی روی آن متن ندارید آن را داخل تگ b و یا فقط به صورت کج به کاربر نمایش دهید و تاکیدی نیست ان را داخل تگ i استفاده کنید.
هر تگی در HTML برای کار مخصوص به خود ایجاد شده است، و زمانی که ما از یه تگ استفاده میکنیم در واقع کاربرد محتوای داخل آن را به ربات های موتورهای جستجوگر معرفی می کنیم. استفاده بی جهت از تگ ها می تواند به سئو سایت ضربه بزند. پس در استفاده درست از تگ ها دقت داشته باشید . با تمرین و کمک گرفتن از کدهای داخل مقاله به HTML مسلط شوید.
اگر سوالی دارید ما اینجا هستیم تا به سوالات شما عزیزان پاسخ دهیم ، همراهتان هستیم.
