صفحه نخست » مقالات » برنامه نویسی » آموزش HTML » لیست تگ های HTML5: مفیدترین عناصر را بشناسید

لیست تگ های HTML5: مفیدترین عناصر را بشناسید

دسته بندی : آموزش HTML سطح مقاله : مقدماتی زمان مطالعه : 3 دقیقه 07 آبان 1399
لیست-تگ-های-HTML5

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

تفاوت عناصر و تگ های HTML5

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

یکی از رایج ترین مسائل مبتدیان، درک تفاوت بین عناصر HTML و تگ ها است. به این صورت که : عناصر HTML ساختار سند را نشان می دهد در حالی که تگ ها به سادگی بخشی از عملکرد HTML هستند.

عناصر تو در تو HTML

یک عنصر HTML ساده از یک تگ باز، یک تگ بسته و برخی از مطالب (متن، تصاویر و غیره) بین این دو ساخته شده است. در صورت لانه سازی عناصر، یک عنصر HTML می تواند شامل عناصر دیگری نیز باشد که سپس به آن ها عناصر تو در تو گفته می شود. تو در تو بودن در همه صفحات HTML رخ می دهد، که در واقع عملکرد بهتر و ظاهر دقیق تری را فراهم می کند.

<!DOCTYPE html>
<html>
  <body>
    <h1>Heading element</h1>
    <p>Paragraph element</p>
  </body>
</html>

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

عناصر خالی در HTML چیست؟

یک عنصر استاندارد درhtml دارای محتوایی است که در تگ باز و بسته قرار دارد، اما برخی از آن ها خالی (باطل) هستند، از این عناصر بیشتر برای افزودن یا جاسازی محتوا در اسناد استفاده می شود:

<img src="image.png" alt="Doggo" width="205" >

در مثال زیر عنصر استاندارد html را با عنصر خالی مقایسه کنید:

<!DOCTYPE html>
<html>
<body>

<p>Below me is an empty element tag.</p>
<br>
<p>Above me is an empty element tag.</p>

</body>
</html>

در بعضی موارد، تگ بسته اختیاری است. می توانید آن را اضافه یا آن را حذف کنید. اضافه کردن تگ های اختیاری بسته می تواند کد html را به راحتی قابل پیگیری و درک کند. با این حال ، گاهی اوقات استفاده از چنین برچسب هایی می تواند اضافی باشد.

در مثال زیر ، تگ بسته شدن عنصر <p> حذف شده است اما به هر حال مرورگر می تواند آن را به درستی نمایش دهد:

<html>
<body>

<p>Paragraph element without end tag

<p>Another one

</body>
</html>

لیستی از رایج ترین عناصر HTML

عنصر <html> یک سند HTML را توصیف می کند. تمام عناصر دیگر نیز باید درون این عنصر قرار بگیرند:

<h1>My Heading</h1>
<p>My paragraph.</p>

عنصر <header> شامل اطلاعات مقدماتی است:

<article>
  <header>
    <h1>JavaScript</h1>
    <h3>What is JavaScript?</h3>
    <p>Today we are going to talk about JavaScript</p>
  </header>
  <p>JavaScript is a client side scripting language used to provide extra functionalities to the user.</p>
</article>

عنصر <body> تمام محتوای قابل مشاهده صفحه را توصیف می کند:

<!DOCTYPE html>
<html>
<body>

<h1>My body Heading</h1>
<p>My body paragraph.</p>

</body>
</html>

عنصر <h1> عنوان مطلب را توصیف می کند:

<h1>A heading element</h1>

 عنصر <p>  یک عنصر متن HTML است که یک پاراگراف را توصیف می کند:

<p>A paragraph element</p>

<div> یک عنصر در سطح بلوکی HTML  است که برای گروه بندی و سازمان دهی صفحات وب استفاده می شود. پس از اعمال، عناصر به بخش هایی تقسیم می شوند که می توانید با استفاده از CSS قالب بندی کنید:

<div style="background-color: #333; color: white; padding: 10px;">
  <h3>This header has same color as a div</h3>
  <p>This paragraph should have same color as div</p>
</div>

توضیح تگ های HTML5

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

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

<input type="text" value=HTML5>
<input type="text" value="HTML5 New Elements">
<input type="text" value='HTML5 New Elements'>

تگ <article> قطعه ای ازاطلاعات مستقل را تعریف می کند که می تواند مورد استفاده مجدد قرار گیرد:

<article>
  <h1>Fun Fact</h1>
  <p>Fun fact: most of the fun facts on the Internet are not actually fun.</p>
</article>

تگ <aside> محتوایی را که باید تنظیم شود را توصیف میکند :

<aside>
  <h4>Lake</h4>
  <p>Oxford lake is a lake in the state.</p>
</aside>

تگ <details> جزئیات وب سایت یا محتوای شما را به طور کلی شرح می دهد. جزئیات یا برای همه قابل مشاهده و یا مخفی است. برای تهیه یک خلاصه کوتاه برای این عنصر ، از تگ <details> استفاده کنید:

<details> 
  <summary>Click to reveal fun facts!</summary> 
  <p>A banana is a berry, but a strawberry is not.</p>
  <p>The Amazon rainforest covers 40 percent of South America.</p> 
  <p>Elephants can’t jump.</p> 
</details>

<dialog> جعبه گفتگوی وب سایت شما را تعریف میکند:

<table>
  <tbody>
    <tr>
      <th>Morning<dialog open>This is an open dialog window</dialog></th>
      <th>Day</th>
      <th>Evening</th>
    </tr>
    <tr>
      <td>8:00</td>
      <td>12:00</td>
      <td>17:00</td>
    </tr>
  </tbody>
</table>

برچسب جدید <figure>  فضایی را برای محتوای جدا شدهمانند عکس ها، نمودارها و غیره تعیین می کند. برای تعیین عنوان برای عنصر <figure> از <figcaption> استفاده کنید:

<figure>
  <figcaption>Dog</figcaption>
  <img src="image.png" alt="The Bread Dog" width="300" height="300">
</figure>

یکی از ویژگی های جدید HTML5 که به شما در توصیف بهتر مطالب کمک می کند، عنصر <footer> است که فضای لازم را برای پاورقی ها تعیین می کند:

<footer>
  <address>
    Postal Address: Door No.00, Street, City, State, Country.
  </address>
  <p>Copyright © 2018 All rights reserved.</p>
</footer>

برچسب های <header> به شما این امکان را می دهد که عنوان وب سایت خود را تنظیم کنید. برخلاف عنصر <title> در وب سایت قابل مشاهده است:

<article>
  <header>
    <h1>JavaScript</h1>
    <h3>What is JavaScript?</h3>
    <p>Today we are going to talk about JavaScript</p>
  </header>
  <p>JavaScript is a client side scripting language used to provide extra functionalities to the user.</p>
</article>

<main> فضا را برای محتوای اصلی یک صفحه وب به تصویر می کشد:

<main id="content" class="group" role="main">

عنصر جدید <nav> فضای خاصی را برای پیوندها در وب سایت شما توصیف می کند:

<nav>
  <ul>
    <li><a href="https://www.bitdegree.org/tag/interactive-learning">Gamified Courses</a></li>
    <li><a href="https://www.bitdegree.org/tutorials">Tutorials</a></li>
    <li><a href="https://www.bitdegree.org/course/learn-solidity-space-doggos">Space doggo course</a></li>
    <li><a href="https://www.bitdegree.org/tag/game-dev">Game Dev Courses</a></li>
  </ul>
</nav>

<section> برای تنظیم بخشی از محتوا برای یک عنصر بخش استفاده می شود:

<section>
  <h1>Section Heading</h1>
  <p>The section tag can contain any elements.</p>
  <img src="image.png" alt="section example">
</section>

عناصر درون خطی در HTML

عنصر <mark> متن یا بخشی از آن را در سایت شما برجسته می کند:

<p>The mark tag is <mark>useful</mark> when you need to highlight important information.</p>

<progress> یک نوار پیشرفت برای یک کار مشخص می کند، که در صفحه وب شما گنجانده می شود:

<p>Donuts eaten:</p>
<progress value="60" max="100"></progress>

به طور مشابه ، عنصر <meter> اندازه گیری اسکالر را در یک محدوده مشخص شده در وب سایت شما نشان می دهد:

<p>Karma points: <meter optimum="30" high="80" max="100" value="85">85%</meter></p>
<p>Gas in Tanker: <meter low="20" max="100" value="11">11%</meter></p>
<p>Animals Petted: <meter low="10" high="60" min="0" max="50" value="43" title="Animals">Petting</meter></p>
<p>Satisfaction: <meter max="100" optimum="100" value="100">100%</meter></p>

<time> یکی از برچسب های جدید HTML5 است که برای تعیین زمان و تاریخ در وب سایت شما استفاده می شود:

<h2>The premiere show starts at <time>21:00</time> today.</h2>

کار با متن ها در HTML

<wbr> یکی از ویژگی های جدید HTML5 است. این امکان را برای وقفه احتمالی کلمه تعریف می کند:

<p>longlonglonglong<wbr>"ThisIsUnbreakable"<wbr>longlonglonglong</p>

<bdi> یکی از ویژگی های HTML5 است که  امکان متن آینه ای را فراهم میکند. این بدان معناست که متن از راست به چپ نوشته خواهد شد.این ویژگی هنگام نوشتن زبان هایی مانند عربی بسیار مفید است:

<h2><bdi>مرحبا بالعالم</bdi> That means Hello World in Arabic.</h2>

عناصر فرم در HTML

محتوای <datalist>  یک منوی کشویی را نشان  می دهد که به کاربران اجازه میدهد یک یا چند گزینه از پیش تعریف شده را انتخاب کنند:

<input list="books">
<datalist id="books">
  <option value="Fiction">
  <option value="Non-Fiction">
</datalist>

با استفاده از تگ <output> منطقه ای برای محاسبه نتایج ریاضی در صفحه ایجاد می شود:

<form oninput="result.value=parseInt(x.value)+parseInt(y.value)">
  0<input type="range" id="x" value="75">100
  +<input type="number" id="y" value="72">
  =<output name="result" for="x y"></output>
</form>

گرافیک و صداها در HTML

<convas>یکی از عناصر جدید HTML5 است. یک فضای خاص برای گرافیک Javascript اختصاص داده شده است که شما می خواهید در سایت قرار دهید:

<canvas id="canvas01" width="400" height="300" style="border: 1px solid #eee;"></canvas>

<svg> فضای خاصی را برای طراحی SVG در صفحه وب شما تعیین می کند:

<svg width="200" height="200">
  <rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)">
</svg>

احتمالا مهمترین عنصر HTML5 که به تازگی معرفی شده است <audio> و <video> نامیده می شود. با استفاده از آن ها می توانید به راحتی موارد صوتی یا تصویری را در وب سایت خود قرار دهید.

هر دوی این عناصر معمولا با عنصر <source> که منبع رسانه را برای قرار دادن تعریف می کند، استفاده می شود. مثال ها HTML5  را در زیر مشاهده کنید:

<audio controls>
<source src="bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3" type="audio/mpeg"">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

و

<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  <source src="video-tag-sample.webm" type="video/webm">
  <source src="video-tag-demo.ogg" type="video/ogg">
  Video tag is not supported in this browser.
</video>

با استفاده از برچسب <track> می توانید یک آهنگ صوتی برای هر دو عنصر <audio> یا <video> تهیه کنید.

<video src="video-tag-example.mp4" controls width="400" height="300">
  <track kind="subtitles" src="video-tag.en.vtt" srclang="en" label="English">
  Video tag is not supported in this browser.
</video>

برای پلاگین های خارجی در وب سایت، از<embed> استفاده کنید:

<embed src="doggo-beach.mp4">

نکات مفید تگ های HTML5

  • به یاد داشته باشید که هیچ تگ بسته اختیاری در XHTML وجود ندارد، این نسخه از HTML بسیار سختگیرانه تر است و باید همیشه عناصر حامل محتوا را ببندید.
  • اگر از مرتب بودن کد خود مطمئن نیستید از اعتبار سنج HTML استفاده کنید .

دوره رایگان html را در دویکس دنبال کنید.

چه امتیازی به این مقاله می دید؟

5 / 5.00
[ 1 رای ]
مطالب مشابه

Related Posts