15 تا از پرکاربردترین تگ های HTML
امیرحسین ایواز
تاریخ انتشار : چهارشنبه 26 اردیبهشت 1403
در حوزه برنامه نویسی و طراحی وب، زبان ها، فریم ورک ها، کتابخانه های بسیار زیادی وجود دارند که ابزار های متنوعی را در این مسیر در اختیار ما قرار می دهند. یکی از پایه های مهم وب سایت ها، زبان نشانه گذاری HTML می باشد که به استخوان های یک وب سایت تشبیه شده است و وجود آن در وب سایت از ضرورت ها می باشد.
در زبان نشانه گذاری HTML ساختار بسیاری جذابی وجود دارد که مهمترین آن تگ ها می باشند و در این مقاله از آکادمی کدیاد، قصد داریم تا پرکاربرد ترین تگ های HTML را معرفی کنیم و به صورت تخصصی در مورد این زبان نشانه گذاری و ویژگی هایش صحبت کنیم.
توجه داشته باشید که همه این موارد به صورت تخصصی و به زبان ساده در دوره رایگان آموزش HTML و CSS آکادمی کدیاد توضیح داده شده اند.
زبان نشانه گذاری HTML چیست؟
کلمه HTML مخفف (Hyper Text Markup language) است که به زبان فارسی معنی آن زبان نشانه گذاری فرا ابر متن می باشد. HTML یک زبان نشانه گذاری برای طراحی مقدمات یک صفحه وب می باشد. این زبان نشانه گذاری در سال 1991 توسط پدر صفحات وب یعنی آقای Tim Berners-Lee طراحی شد که به ما این اجازه را می دهد که بتوانیم استخوان های یک صفحه وب را توسط تگ های موجود در این زبان بنویسیم.
از زمان انتشار اولین نسخه تا به امروز، زبان نشانه گذاری HTML به نسخه 5 خود رسیده است و در حال حاضر با دارا بودن ویژگی های و تگ های گسترده برای طراحی صفحات وب به ما این امکان را می دهد تا بتوانیم یک وب سایت حرفه ای را پایه گذاری کنیم.
با کنار هم قرار گرفتن این تگ های مهم در این زبان میتوان یک صفحه وب سایت را خلق کرد.
تگ HTML چیست؟
همه ی زبان های برنامه نویسی یا زبان های نشانه گذاری که در حال حاضر برای خلق برنامه های کاربردی وجود دارند، دارای یک سری دستورات می باشند که عمده ی آن زبان را تشکیل می دهند. زبان نشانه گذاری HTML از تعداد زیادی برچسب (TAG) به وجود آمده است. برخی از طراحان وب این تگ ها را المان های این زبان می گویند که با کنارهم قرار گرفتن آنها یک صفحه وب شکل می گیرد.
هر تگ در این زبان نشانه گذاری یک وظیفه ی خاصی دارد، برای مثال تگ <p> باعث ایجاد یک پاراگراف در سند HTML می شود.
انواع تگ های HTML:
تگ ها (المان ها) در زبان نشانه گذاری HTML از نظر ساختار به 2 نوع تقسیم می شوند:
- المان هایی که دارای تگ باز و بسته هستند:
برای تعریف این المان ها باید تگ ها باز و بسته شوند تا در صفحه به درستی عمل کنند و بستن این تگ ها یک امر ضروری است مانند مثال های زیر:
<h1>...</h1>
<video>...</video>
<p>...</p>
<head>...</head>
<body>...</body>
- المان هایی که فقط تگ باز دارند:
در این نوع المان ها ما نیازی به بستن تگ نداریم و ساختار آن ها با دسته ی قبلی متفاوت است مانند تگ های زیر:
<hr> - <br> - <link> - <img>
صفت در تگ های HTML
بیشتر تگ های موجود در زبان نشانه گذاری HTML دارای برخی صفت های مهم هستند. این صفت ها به صورت کلی به تگ های موجود در زبان کمک می کنند تا به صورت بهتری در سند ظاهر شوند و از قابلیت های خود استفاده کنند.
هر تگ در این زبان نشانه گذاری، دارای صفات مخصوص و خاصی می باشد. البته بیشتر این صفت ها در بیشتر تگ ها یکسان می باشد. برای مثال اگر بخواهیم که سند وب ما به صورت راست چین در بیاید، به سادگی با یک صفت در تگ body می توانیم این کار را انجام دهیم:
<body dir=”rtl”> ... </body>
برخی دیگر از صفت های موجود برای تگ ها:
<img src=”image location” alt=”smt” width=”250px” />
برای بررسی همه ی تگ ها و صفات موجود در زبان نشانه گذاری HTML می توانید به وب سایت W3schools مراجعه کنید.
15 نمونه تگ پرکاربرد HTML
حالا که با تگ ها و صفت ها آشنا شدید، وقت آن رسیده است تا برخی تگ های پرکاربرد و مهم را در این زبان نشانه گذاری بررسی کنیم و ببینیم که کاربرد آن ها در یک صفحه وب چیست؟
برخی از پرکاربرد ترین تگ های HTML عبارت اند از:
- تگ p: این تگ برای ساخت یک پاراگراف در وب سایت به کار میرود. "دارای تگ بسته می باشد"
مثال:
<p> Hello this is a Paragraph in HTML5</p>
- تگ a (لینک): با استفاده از این تگ به راحتی می توانید یک لینک بسازید. "دارای تگ بسته نمی باشد"
مثال:
<a href=”google.com” target=”_blank” ></a>
- تگ body: هر المانی که قصد دارید در صفحه وب نمایش داده شود باید در بین این تگ نوشته شود. این تگ بدنه صفحه یک وب سایت است. "دارای تگ بسته می باشد"
مثال:
<body>
<p>Hello World</p>
<a href=”ww.codeyad.com” target=”_blank” title=”آکادمی کدیاد” />
</body>
- تگ style: برای استایل داخلی درون فایل اصلی که تگ های HTML وجود دارند استفاده می شود. "دارای تگ بسته می باشد"
مثال:
<style> p {color: “Blue”; } </style>
- تگ br: با کمک این المان به خط پایین بروید… "دارای تگ بسته نمی باشد"
مثال:
<p> Hello World! </p>
<br />
<p> codeyad.com </p>
- تگ div: این تگ برای مشخص کردن یک ناحیه خاص در صفحه وب استفاده می شود و گاها قسمت ها را با این تگ تقسیم بندی می کنند. "دارای تگ بسته می باشد"
مثال:
<div> <img sr=”#” /> </div>
- تگ input: با استفاده از این تگ به آسانی می توانید یک فیلد برای دریافت اطلاعات خاص از کاربرد تعیین کنید. "دارای تگ بسته نمی باشد"
مثال:
<input type=”text” placeholder=”Enter Text…” id=”txtName” />
- تگ li: اگر در یک وب سایت بخواهید آیتم هایی به صورت لیست داشته باشید این تگ مناسب این کار است. "دارای تگ بسته می باشد"
مثال:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
- تگ های h1 تا h6: این 6 تگ برای تعریف Heading ها یا سرفصل ها در یک صفحه وب استفاده میشود. "دارای تگ بسته می باشند"
مثال:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
- تگ table: این تگ برای ایجاد یک جدول استفاده می شود و در صفحات بسیار پرکاربردیست. "دارای تگ بسته می باشد"
مثال:
<table>
<tr>
<td>H</td>
</tr>
</table>
- تگ link: با استفاده از این تگ شما می توانید فایل های دیگر را به سند HTML مرتبط کنید. برای مثال یک فایل CSS خارجی را با این تگ میتوانید به سند HTML خود اضافه کنید و ارتباط آن ها را برقرار سازید. "دارای تگ بسته نمی باشد"
مثال:
<link rel=”stylesheet” type=”text/css” href=”./style.css” />
- تگ های meta: این نوع تگ ها در یک سند وب بسیار کاربردی می باشد و باعث ثبت اطلاعات برای سئو و موتور جستجو می شوند. "دارای تگ بسته نمی باشند"
مثال:
<meta name=”robots” content=”index” />
- تگ nav: اگر به دنبال ساخت یک Navbar در صفحه وب سایت خود هستید این تگ برای این کار ساخته شده است. "دارای تگ بسته می باشد"
مثال:
<nav>
<a href=”#” title=”smt”></a>
</nav>
- تگ img: عکس ها یکی از مهمترین و اصلی ترین المان های موجود در یک وب سایت می باشند که برای ساخت و تعریف آن ها در یک صفحه وب شما می توانید از این تگ استفاده کنید. "دارای تگ بسته نمی باشد"
مثال:
<img src=”./codeyad.png” alt=”CodeYad Image” />
- تگ strong: گاهی اوقات قصد دارید که قسمتی از یک متن را در پاراگراف به صورت Bold و پر رنگ نمایش دهید تا بتوانید به کاربر مهم بودن آن را نمایش دهید. این تگ برای این کار می باشد. "دارای تگ بسته می باشد"
مثال:
<p> Hello, Carl, Im so <strongHappy</strong> to see you</p>
حالا که با پرکاربردترین تگ های این زبان نشانه گذاری آشنا شدید، وقت آن رسیده است تا از آن ها به ترتیب در سند وب سایت خود استفاده کنید و در نهایت یاد بگیرید که چگونه آن ها را با CSS زیبا تر طراحی کنیم…
بهترین راه یادگیری تگ‌های HTML
شاید یکی از چالش هایی که در حال حاضر به آن برخورده اید این باشد که چگونه می توانیم این همه تگ را در این زبان نشانه گذاری، به سادگی فرا گیریم؟
در این قسمت قصد داریم تا چندین روش که به شما در مبحث یادگیری تگ ها کمک می کند را معرفی کنیم…
- تمرین مداوم:
مسلما یکی از بهترین راه های یادگیری هر مهارتی، تمرین به صورت مداوم می باشد. برای یادگیری عمیق کاربرد این تگ ها باید هر مبحث را چندین بار تمرین کنید.
- دیدن دوره پروژه محور:
دوره های پروژه محور در مسیر یادگیری به ما کمک می کنند تا بتوانیم به صورت آزمایشی وارد پروژه های کوچک شویم تا بتوانیم با ایجاد پروژه ها و تعریف آن ها مهارت های خود را افزایش دهیم و به چالش های گسترده ای برخورد کنیم. این روش بهترین روش برای یادگیری تگ های HTML می باشد.
- طراحی صفحات دلخواه:
پیشنهاد ما به شما این است تا به صورت آزمایشی هر چیزی که در ذهن دارید را اول روی کاغذ پیاده سازی کنید و سعی کنید که با تگ های HTML صفحه وب دلخواه خودتان را بسازید.
- بررسی تگ های پروژه های دیگر:
یکی دیگر از روش های مهم و کارآمد برای یادگیری این تگ های گسترده، دیدن و بررسی کد های HTML پروژه های دیگر است که به شما قابلیت تست را می دهد.
حالا که با روش های یادگیری این تگ ها آشنا شدید، وقت آن رسیده است تا یک روش را به دلخواه خود انتخاب کنید و از همین امروز آموزش را شروع کنید.
معرفی دوره رایگان HTML و CSS کدیاد
زبان نشانه گذاری HTML دارای تعداد بسیار زیادی از تگ ها می باشد که شما باید بدانید که چه موقعی از این تگ ها استفاده کنید. ولی یادگیری این تگ ها به تنهایی کافی نیست و شما نیازمند یک دوره تخصصی و پروژه محور می باشید تا بتوانید ساختار دقیق یک وب سایت را درک کنید.
شاید در حال حاضر به این فکر کنید که چه دوره ای به صورت تخصصی و جدی برای من مناسب است؟ آکادمی برنامه نویسی کدیاد به شما این تضمین را می دهد که با دوره صفر تا صد آموزش رایگان HTML و CSS تا پایان مسیر همراه با پروژه های عملی در کنار شما باشد تا بتوانید این دو زبان نشانه گذاری را در کنار هم فرا گیرید.
در این دوره از آکادمی، تمامی سعی ما بر این باور بوده است که دوره به صورت پروژه محور باشد تا شما دست به کد شوید و یک وب سایت را به صورت دقیق درک کنید. ما به شما پیشنهاد می کنیم که تامل نکنید و همین حالا در این دوره رایگان شرکت کنید…
کلام آخر
همه ی سعی و تلاش ما در این مقاله بر این باور بوده است که بتوانیم ذهنیت درستی از این زبان نشانه گذاری در فکر شما ایجاد و به پرکاربرد ترین تگ های اصلی آن اشاره کنیم. همچنین در رابطه با بهترین مسیر یادگیری این تگ ها با هم صحبت کردیم و متوجه شدیم که بهترین راه تمرین مداوم می باشد و در کنار این تمرینات، شما نیازمند یک دوره پروژه محور هستید تا بتوانید این تگ ها و عناصر را در پروژه های مکرری استفاده کنید. دوره آموزشی رایگان HTML و CSS آکادمی آموزش برنامه نویسی کدیاد این مسیر را برای شما هموار تر می کند تا بتوانید ساختار یک وب سایت را عمیقا درک کنید.
اگر در رابطه با این زبان نشانه گذاری یا هر موضوعی در مورد HTML و تگ های آن سوالی داشتید، می توانید در قسمت کامنت ها از ما بپرسید و ما سریعا پاسخگوی شما عزیزان خواهیم بود.
سوالات متداول
- چرا برنامه نویسی وب گسترده ترین حوزه می باشد؟
دلیل این گستردگی بسیار ساده است و آن هم وجود ابزار ها، زبان ها، کتابخانه ها و فریم ورک های متعدد در فرانت اند و بک اند می باشد.
- دلیل تشبیه HTML به استخوان های وب سایت چیست؟
دلیل این تشبیه این است که ما با کمک زبان نشانه گذاری HTML ساختار اصلی و پایه یک وب سایت را طراحی می کنیم.
- صفت ها در تگ چه کاری را انجام می دهند؟
هر تگ می تواند دارای چندین صفت باشد که هر صفت کاربرد خاصی برای آن تگ بخصوص دارد. برای مثال صفت alt در تگ img به ما کمک میکند تا اگر به دلیل مشکل اینترنت عکس در صفحه وب به درستی بارگذاری نشد، این متن جایگزین عکس شود.
- بهترین راه برای یادگیری تگ ها کدام می باشد؟
همانطور که در این مقاله اشاره شد، بهترین راه برای یادگیری این تگ ها، استفاده از آن ها در پروژه می باشد. به دلیل اینکه به شما اجازه می دهد که ساختار و کاربرد آن ها را در طراحی صفحات وب به سلیقه خود درک کنید.
- در دوره رایگان HTML و CSS چه چیز هایی را فرا خواهید گرفت؟
در این دوره فوق العاده از آکادمی کدیاد شما در ابتدا کار با ابزار های طراحی صفحات وب را یاد خواهید گرفت و در ادامه به تگ های HTML و در کنار آن به زبان نشانه گذاری CSS خواهید پرداخت.
