17 تگ مهم HTML که برای شروع طراحی وب باید بدانید- سایت حسین باهنر

زبان طراحی HTML برای طراحی صفحات وب به کار می رود که در اینجا به 17 تگ مهم HTML اشاره شده است.

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

1- <!DOCTYPE html>

این تگ در تمامی صفحات باید قرار گیرد. درواقع اولین موردی که در صفحه قرار می گیرد DOCTYPE می باشد. این تگ (در برخی منابع از آن به عنوان تگ یاد نمی شود) انواع گوناگون برای نسخه های مختلف HTML دارد که این نوع در HTML5 معرفی شده است بنابراین می توانید از این نوع استفاده نمایید.

2- <html>

تمامی کدهای HTML در داخل این تگ قرار می گیرند. در واقع این تگ به مرورگر می فهماند که در حال خواندن صفحه HTML می باشد.

3- <head>

این تگ قسمت سربرگ فایل HTML را مشخص می کند اما برای کاربر نمایش داده نمی شود. داده های این قسمت شامل داده های متا می باشد که برای موتورهای جستجو مهم می باشد.

4- <title>

این تگ عنوان سایت را مشخص می کند و این عنوان در قسمت نمایش عنوان مرورگر نمایش داده می شود.

<head>
    <title>Honar Systems</title>
</head>

5- <meta>

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

<head> 
   <meta charset="UTF-8"> 
   <meta name="description" content="Free Web tutorials"> 
   <meta name="keywords" content="HTML,CSS,XML,JavaScript"> 
   <meta name="author" content="John Doe"> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>

کد زبانی: این کد زبان صفحه را مشخص می کند که برای فارسی باید از UTF-8 استفاده کرد.
توضیحات: توضیحاتی در مورد صفحه می باشد که برای سئو خیلی مهم است.
کلمات کلیدی: کلمات کلیدی ای که در صفحه استفاده شده است در این قسمت قرار می گیرد.
نویسنده: نام تولید کننده محتوای صفحه را مشخص می کند.
viewport: این قسمت برای رسپانسیو کردن صفحه به کار می رود و مقدار آن باید دقیقا مانند مثال بالا باشد.

6- <body>

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

7- <h1> تا <h6>

عنوان ها با تگ های h1 تا h6 مشخص می شوند. عنوان h1 شامل مهمترین عنوان که معمولا نام وبسایت می باشد. سپس h2 که معمولا شامل عنوان اصلی مطلب می باشد و به همین ترتیب تا کم اهمیت ترین عنوان که با h6 تعریف می شود.

8- <p>

تقریبا تمامی محتوای صفحات HTML شامل متن می شوند که برای تعریف متن از تگ p استفاده می شود.

<p>This is a paragraph.</p>

9- <br>

از این تگ برای رفتن به سر خط استفاده می شود. اگر در داخل تگ p متنی را بخواهید از سر سطر شروع کنید در قسمت مورد نظر این تگ را قرار می دهیم.

10- <strong>

برای bold کردن عبارت از تگ b یا تگ strong استفاده می شود و چون تگ b در HTML5 منسوخ شده است فقط از این تگ استفاده می شود.

11- <em>

برای مورب نویسی از تگ i و یا em استفاده می شود.

12- <a>

وظیفه لینک ها اتصال دو صفحه به یکدیگر می باشد. این دو صفحه می تواند کنار هم باشند یا بر روی سرور دیگر. لینک با تگ a تعریف می شود که خصیصه href آن شامل آدرس صفحه ای می باشد که می خواهیم به آن صفحه ارجاع دهیم. در داخل تگ هم نام صفحه مورد نظر آورده می شود.

13- <img>

برای درج تصویر در داخل صفحه از تگ img استفاده می شود.

<img src="html.jpg" alt="17 important tags in HTML" />

خاصیت alt یکی از مواردی هست که باید نوشته شود. اگر به هر دلیلی عکس قابل نمایش نباشد، متن داخل این خصیصه نمایش داده می شود.

14- <ol>

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

<ol> 
   <li>Coffee</li> 
   <li>Tea</li> 
   <li>Milk</li> 
</ol>

15- <ul>

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

<ul> 
   <li>Coffee</li> 
   <li>Tea</li> 
   <li>Milk</li> 
</ul>

16- <table>

جدول یکی از روشهای دسته بندی و نمایش اطلاعات می باشد که با استفاده از تگ table انجام می شود.

<table> 
   <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
      <th>Age</th> 
   </tr> 
   <tr> 
      <td>Jill</td> 
      <td>Smith</td> 
      <td>50</td> 
   </tr> 
   <tr> 
      <td>Eve</td> 
      <td>Jackson</td> 
      <td>94</td> 
   </tr> 
   <tr> 
      <td>John</td> 
      <td>Doe</td> 
      <td>80</td> 
   </tr> 
</table>

17- <blockquote>

برای درج نقل قول دو نوع تگ وجود دارد. برای نقل قول یک سطری از تگ q و برای نقل قول چند سطری از تگ blockquote استفاده می شود.

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>

کلام آخر

در این مقاله سعی شد 17 تگ مهم و کاربری HTML با توضیح مختصر ارائه شود که به طور حتم برای طراحی صفحات حرفه ای نیاز به دیگر تگها می باشد. برای اطلاعات بیشتر در این مورد می توانید از مقاله خود آموز سریع HTML استفاده نمایید.

مطالب مرتبط

نصب وردپرس در سی پنل

سایت حسین باهنر

17 تگ مهم HTML که برای شروع طراحی وب باید بدانید