پرکاربردترین تگ ها در زبان HTML

در زبان HTML تگ های زیادی وجود دارد اما تعدادی از آنها بسیار پرکاربرد هستند. ما در این مقاله به معرفی تعدادی از پرکاربردترین تگ ها در زبان HTML با ذکر مثال می پردازیم.

۱ـ تگ Title :

 

یکی از پرکاربردترین تگ ها در زبان HTML که هم برای کاربران و بازدید کننده های سایت و هم برای جستجوگرهای وب تگ عنوان ( تگ Title )  می باشد . متنی که داخل این تگ قرار میگیرد عنوان صفحه را مشخص میکند که در title bar مرورگر به کاربران نشان داده می شود. توجه داشته باشید متن داخل این تگ در صورت زیاد بودن ادامه ی آن توسط مرورگر حذف میشود پس از عناوین کوتاه استفاده کنید.

<title> متن عنوان صفحه </title>

توجه داشته باشید این تگ در قسمت <head>    </head> قرار می گیرد.

۲ـ تگ لینک ( Link ) :

 

این تگ حاوی خصیصه های مختلفی برای ارتباط با فایل های خارجی می باشد. توصیه می شود که تگ لینک ( تگ Link ) در بخش head سایت استفاده گردد. مهمترین استفاده های آن :

 تعریف استایل ( Style ) خارجی :

 

مهمترین کاربرد این تگ تعریف استایل (Style) خارجی حاوی کدهای Css می باشد. یکی از روش های دیگر تعریف Css برای ظاهر و Style صفحه Html استفاده از فایل خارجی حاوی کد Css و تعریف آن در تگ Link در بخش Head صفحه می باشد. برای تعریف Style خارجی فایل حاوی Css از کد زیر استفاده نمایید :

<link   rel=“Stylesheet”   type=“text/css”   href=“آدرس فایل سی اس اس”/>

<link   rel=“Stylesheet”   type=“text/css”    href=“../Css/theme1.css”/>

<link   rel=“Stylesheet”   type=“text/css”    href=“../Css/theme2.css”/>

تعریف آیکون صفحه :

 

– برای تعریف آیکون صفحه در بخش آدرس بار مرورگر وب نیز ، از تگ لینک استفاده میشود :

            <link   rel=“icon”   href=“./Design/ICON.ICO”   type=“image/x-icon”/>

             <link   rel=“shortcut icon”   href=“./Design/ICON.ICO”   type=“image/x-icon”/>

۳ـ تگ توضیحات <– … –!>:

 

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

مانند زیر :

< !– کد زیر یک پاراگراف ایجاد مینماید — >
< p > متن تست < /p >

که در کد بالا تنها متن “متن تست” نمایش داده میشود .

۴ـ تگ عنوان H1 – H6 :

تگ های هدر یا تگ های عنوان از جمله مهمترین تگ ها برای جستجوگر های وب می باشد که توجه ویژه ای به عناوین داخل آنها دارند. تگ های H1 تا H6 به ترتیب از H1 بزرگترین استایل تا آخر می باشد که درجه ی اهمیت آنها هم به همین میزان است.

نکته ی مهم : سعی کنید در صفحاتتون Title نوشته شده در بخش header سایت را در محلی مشخص در بالای صفحه بین تگ H1 قرار بدهید.

 

نحوه ی استفاده از آن بصورت زیر است :

<h1>عنوان شماره ۱</h1><h2>عنوان شماره ۲</h2>

<h3>عنوان شماره ۳</h3>

<h4>عنوان شماره ۴</h4>

<h5>عنوان شماره ۵</h5>

<h6>عنوان شماره ۶</h6>

 

خروجی قطعه کد زیر بصورت زیر می باشد :

 

عنوان شماره ۱

عنوان شماره ۲

عنوان شماره ۳

عنوان شماره ۴

عنوان شماره ۵
عنوان شماره ۶

 

نکته : اندازه و نوع فونت بصورت پیش فرض به صورت بالا قرار میگیرد ، اما در صورت دلخواه میتوانید نوع و اندازه و خصوصیات ظاهری دیگر تگ های عنوان (h1 – h2) را با استفاده از Css تغییر دهید.

۵ـ تگ P یا پاراگراف :

متن داخل این تگ بصورت یک پاراگراف در نظر گرفته می شود. در صورت ایجاد یک پاراگراف یا تگ P جدید ، پاراگراف بعدی به سطر بعد می رود.

بطور مثال :

<p> متن تست است. </p>

<p> متن تست شماره ۲٫ </p>

خروجی بصورت زیر می باشد :

 

متن تست است.

متن تست شماره ۲٫

۶ـ تگ Br :

تگ Br در نقش enter در ورد می باشد بدین صورت که خط جدیدی درون پاراگراف ایجاد میکند و نوشته ی بعد از آن را به سطر جدید می برد .

بطور مثال :

<p> این متن <br /> تست است. </p>

خروجی بصورت زیر می شود :

این متن
تست است.

نکته ۱ : استفاده ی زیاد از این تگ مناسب نیست و بهتر است با استفاده از تگ P عمل انتقال به خط جدید انجام گردد ، دلیل اصلی آن کند نمودن سایت در استفاده های زیاد از این تگ می باشد.

نکته ۲ : این تگ بصورت یکه استفاده میشود و تگ پایانی ندارد.

۷ـ تگ Center :

متن داخل تگ center بصورت تراز وسط نمایش داده می شود. توصیه میشود به جای استفاده از این تگ ، در صورت امکان از کدهای Css برای قالب دهی و تراز بندی متن ها استفاده شود.

دلیل این امر کم حجم نمودن کدها و در نتیجه سرعت بالاتر و نیز سهولت در تغییرات احتمالی قالب و فرمت سایت میباشد.

مثالی در استفاده از این تگ :

<p> متن تست با تراز پیش فرض </p><center> متن تست با تراز وسط چین </center>

خروجی این کد بصورت زیر می باشد :

متن تست با تراز پیش فرض

متن تست با تراز وسط چین

۸ـ تگ B :

متن داخل تگ B بصورت توپر شده نمایش داده می شود . این تگ نیز همانند تگ Center بهتر است از معادل های آن در Css استفاده شود.

مثالی در این زمینه ی تگ B :

<p> این متن <b> تست </b> می باشد. </p>

خروجی کد بالا بصورت زیر می باشد که کلمه ی تست بصورت بولد شده نمایش داده می شود :

این متن تست می باشد.

۹ـ تگ Hr :

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

مثالی در این زمینه :

<p> این متن <hr />  تست است </p>

خروجی به صورت زیر می باشد :

 

این متن


تست است

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *