هر سایتی نیاز به نمایش متن دارد. در این نوشته تگهای مربوط به متن را به شما آموزش میدهیم. در توضیحات هر تگ نمونه کد و خروجی هر کد نمایش داده شده است که با دقت در آن بهتر می‌توانید این آموزشها را دنبال کنید.

تگ عنوان (h1 - h6)

HTML شش سطح برای عناوین سایت در نظر گرفته است.:
<h1> , <h2> , <h3> , <h4> , <h5> , <h6>

با کلیک بر روی هر کدام از تبهای زیر توضیحات هر تگ را ببینید

نمونه کد:

				
					<h1> This is a Main Heading    </h1>
<h2> This is a level 2 Heading </h2> 
<h3> This is a level 3 Heading </h3>
<h4> This is a level 4 Heading </h4>
<h5> This is a level 5 Heading </h5>
<h6> This is a level 6 Heading </h6>


				
			

خروجی کد:

This is a Main Heading

This is a level 2 Heading

This is a level 3 Heading

This is a level 4 Heading

This is a level 5 Heading
This is a level 6 Heading

تگ پاراگراف (p)

برای ایجاد پاراگراف، کلمات تشکیل دهنده آن را بین تگ آغازین  <p> و تگ پایانی </p> قرار دهید.

نمونه کد:

				
					<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. 
</p>

				
			

خروجی کد:

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

تگ بولد و ایتالیک <b> <i>

برای نمایش محتوای به صورت Bold  (تو پر و برجسته) از تگ <b>  استفاده میکنیم  برای نمایش محتوای به صورت Italic (مورب) از تگ <i>  استفاده کنید.

نمونه کد:

				
					<p>
لورم ایپسوم متن <b>ساختگی با تولید سادگی نامفهوم</b> از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود <i>ابزارهای کاربردی</i> می باشد. 
</p>

				
			

خروجی کد:

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

تذکر: در خروجی بالا کلمه ابزارهای کاربردی باید به صورت مورب نمایش داده شود که به اشتباه به صورت معمولی نمایش داده می‌شود. چنانچه در vscode یا سایر ادیتورها این کد را امتحان کنید خروجی این کلمه به این صورت است:

ابزارهای کاربردی

تگ <sub> و <sup>

تگ   <sup> برای  عملیات ریاضی در به توان رساندن عددی استفاده می‌شود. در واقع کلمه مربوطه را کمی بالاتر از جمله می آورد .

تگ <sub>  برای عملیات ریاضی مثل اندیس یا پائین نویس استفاده می‌شود در واقع کلمه ی مربوطه را کمی پائین تر از جمله می آورد

نمونه کد:

				
					<p>
    a <sup> 2 </sup> + b <sup> 2</sup> = c <sup> 2 </sup>  + 1 
</p>

<p>
    f(x) = A<sub> 1 </sub> + A <sub> 2 </sub> + 1
</p>

				
			

خروجی کد:

a 2 + b 2 = c 2 + 1

f(x) = A 1 + A 2 + 1

با استفاده از این تگ ها در html  میتوان عملیات های ریاضی ، پاورقی و … را نوشت.

تگ <br> و <hr>

برای شروع پاراگراف یا عنوان جدید ، در یک سطر جدید ، از تگ <br> استفاده میکنیم و  برای جداسازی مطالب یا بخش های یک وبسایت با استفاده از یک خط افقی ، از تگ <hr> استفاده میکنیم

نمونه کد:

				
					<p>
    لورم ایپسوم<br> 
   متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ <br> 
و با استفاده از طراحان گرافیک است.  
</p>

<hr>

<p>
  حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد    
</p>

				
			

خروجی کد:

لورم ایپسوم
متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
و با استفاده از طراحان گرافیک است.


حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد

با استفاده از این تگ ها در html  میتوان عملیات های ریاضی ، پاورقی و … را نوشت.

تگ <em> و <strong>

دو تگ strong و b از نظر ظاهری هیچ تفاوتی با هم ندارند اما از نظر معنایی تگ strong نشان می‌دهد که محتوای این تگ از اهمیت بیشتری برخوردار است

به طور مشابه تگهای i و em از نظر ظاهری تفاوتی با هم ندارند اما از نظر معنایی تگ em تاکیدی بر محتوای درون تگ خود دارند.

نمونه کد:

				
					<strong>This text is important!</strong>
<br>
<b> This is a bold text </b>





				
			

خروجی کد:

This text is important!
This is a bold text

در واقع با قرار دادن محتوای با اهمیت در تگ  strong و em به رباتها و موتورهای جستجو کمک می‌کنید که موضوع و اهمیت کلیدواژه‌های سایت شما را بهتر ایندکس‌گذاری کنند و به این شکل سئوی سایت خود را بهبود ببخشید

برای مشاهده سایر تگهای مربوط به متن، کتاب زیر را به صورت رایگان دانلود کنید

مطالب این صفحه مفید بود؟

میتونی روی عکس کلیک کنی و کتاب آموزش HTML رو همین الان رایگان دانلود کنی

دوست داری طراحی سایت یاد بگیری؟

دوره های پیشنهادی دانشگاه برنامه نویسان:

73% -

آمورش طراحی وب‌سایت (front-end)

35
300,000 تومان 80,000 تومان
25% -

دوره آنلاین طراحی سایت بدون کدنویسی

21
200,000 تومان 150,000 تومان