HTML: از چه مواردی استفاده می شود و برچسب های شما چیست؟

ek3nk4r 2025-02-23

0 4 خواندن این مطلب 3 دقیقه زمان میبرد

HTML: از چه مواردی استفاده می شود و برچسب های شما چیست؟

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

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

در این مقاله ، ما عملکردهای اصلی HTML و چگونگی برچسب های شما به شما در طراحی موثر محتوا کمک می کنیم.

فهرست مطالب

HTML چیست؟

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

اگرچه خود یک زبان برنامه نویسی نیست ، اما HTML است اساسی برای توسعه وب، از آنجا که پایه ای را ایجاد می کند که سبک های آن با CSS اعمال می شود و تعامل با JavaScript اضافه می شود.

HTML برای چیست؟

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

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

علاوه بر این ، HTML با CSS برای بهبود طراحی و با JavaScript یکپارچه شده است تا عملکردهای پویا را اضافه کند.

برچسب HTML چیست؟

برچسب های HTML قطعات کد هستند که برای ساخت و تعریف محتوا در یک سند وب استفاده می شوند. این برچسب ها ، همچنین به عنوان شناخته می شوند “برچسب ها”، دستورالعمل های مرورگر را در مورد نحوه نمایش متن و سایر عناصر در یک صفحه وب ارائه دهید ، امکان قالب بندی ، عملکرد و ساختار به محتوای بصری را فراهم می کند

آناتومی یک عنصر HTML

یک عنصر HTML از چندین بخش مهم تشکیل شده است:

برچسب باز: این نام عنصر است که در براکت های مربع زاویه ای قفل شده است < > (به عنوان مثال ، para un párrafo).


Contenido: El texto o los datos que aparecerán en la página.
Etiqueta de cierre: Indica el final del elemento y se parece a la etiqueta de apertura, pero con una barra / (به عنوان مثال ، 

).
Atributos (opcional): Proporcionan información adicional sobre el elemento y se colocan dentro de la etiqueta de apertura, como class o id.
Ejemplo con un atributo:

 class="important">Este es un párrafo importante.



    
    



در این حالت ، class="important" این ویژگی است که می تواند برای استفاده از سبک های خاص در این پاراگراف استفاده شود.

  برچسب های اصلی HTML


: Declara el tipo de documento y es indispensable en HTML5, garantizando que el navegador interprete correctamente el código.

: Elemento raíz que contiene todo el contenido de la página web.

: Sección que incluye metadatos, como el conjunto de caracteres y el título de la página.

: کدگذاری شخصیت های مورد استفاده در سند را ایجاد می کند. UTF-8 متداول ترین گزینه برای پشتیبانی از طیف گسترده ای از کاراکترها.
</code>: عنوانی را که در برگه مرورگر ظاهر می شود ، تعریف کنید و مرجع روشنی در مورد محتوای صفحه ارائه دهید.</p>
<p><code/>: Contiene todos los elementos y contenido visible que se presentará al usuario en la página web.</p>
<h2><span class="ez-toc-section" id="Estructura_basica_de_un_documento_HTML"></span>
<p>  Estructura básica de un documento HTML<br />
<span class="ez-toc-section-end"></span></h2>
<p>Un documento HTML sigue una estructura jerárquica que facilita su interpretación por parte de los navegadores web. A continuación, se presenta un ejemplo básico:</p>
<div class="highlight js-code-highlight">
<pre class="highlight html"><code><span class="cp"/>
<span class="nt"/>
  <span class="nt"/>
    <span class="nt"><meta/> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span>
    <span class="nt"><title/></span>Mi Primera Página Web<span class="nt"/>
  <span class="nt"/>
  <span class="nt"/>
    <span class="nt"/>¡Bienvenido a mi sitio web!<span class="nt"/>
    <span class="nt"/>Este es un párrafo de ejemplo.<span class="nt"/>
  <span class="nt"/>
<span class="nt"/>
</span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>حالت تمام صفحه را وارد کنید



  بیشترین برچسب ها و عناصر HTML چیست؟


چندین برچسب HTML وجود دارد ، اما برخی از بیشترین استفاده ها شامل:
 a 

: هدرها.

  Título Principal
  Subtítulo



    
    



: Párrafos.


  Este es un párrafo de ejemplo.



    
    



: پیوندها.

: تصاویر ، آنها با برچسب درج شده اند ، با استفاده از ویژگی src برای مشخص کردن مسیر تصویر و alt برای ارائه یک متن جایگزین.

   src="ruta/imagen.jpg" alt="Descripción de la imagen">



    
    



, 

با 
: لیست هایی که سفارش داده نشده و سفارش داده نشده است.
سفارش داده نشده است: آنها از <ul> برای لیست و 

 برای هر عنصر


  Elemento 1
  
Elemento 2
  Elemento 3




    
    



سفارش داده شده: آنها استفاده می کنند 

 برای لیست و 
 برای هر عنصر


  Primer elemento
  
Segundo elemento
  Tercer elemento




    
    




, 
, 
: Tablas.

 y : ظروف عمومی.
, با 



این برچسب ها اطمینان می دهند که انتشارات شما ظاهری حرفه ای و قابل مشاهده تر دارند.
در نظر گرفتن:


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


برای سازماندهی محتوا به خوبی از هدرهای سلسله مراتبی (H1-H6) استفاده کنید.


توضیحات باید مختصر اما توصیفی باشد.


تمام تصاویر را با ویژگی های جایگزین بهینه کنید.


مثال:


  
  </span>Tu Sitio Web - Palabras Clave<span class="nt"/>

  <span class="c"><!-- Meta descripción --></span>
  <span class="nt"><meta/> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Breve resumen del sitio"</span><span class="nt">></span>

  <span class="c"><!-- Open Graph Tags (para redes sociales) --></span>
  <span class="nt"><meta/> <span class="na">property=</span><span class="s">'og:title'</span> <span class="na">content=</span><span class="s">'Título Personalizado'</span><span class="nt">></span>
  <span class="nt"><meta/> <span class="na">property=</span><span class="s">'og:description'</span> <span class="na">content=</span><span class="s">'Descripción Breve'</span><span class="nt">></span>
  <span class="nt"><meta/> <span class="na">property=</span><span class="s">'og:image'</span> <span class="na">content=</span><span class="s">'/path/to/image.jpg'</span><span class="nt">></span>

  <span class="c"><!-- Imagen alternativa --></span>
  <span class="nt"><img/> <span class="na">src=</span><span class="s">"/path/to/image.jpg"</span> <span class="na">alt=</span><span class="s">"Imagen relevante"</span><span class="nt">></span>

  <span class="c"><!-- Enlace canónico --></span>
  <span class="nt"><link/> <span class="na">rel=</span><span class="s">"canonical"</span> <span class="na">href=</span><span class="s">"/url-canonical/"</span><span class="nt">></span>
<span class="nt"/>
<span class="nt"/>
  <span class="c"><!-- Estructura jerárquica --></span>
  <span class="nt"/>Título Principal H1<span class="nt"/>
  <span class="nt"><h2/></span>Título Secundario H2<span class="nt"/>
  <span class="nt"><h3/></span>Título Terciario H3<span class="nt"/>
<span class="nt"/>
</span></span></span></span></span></span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>حالت تمام صفحه را وارد کنید
    

    




  Favicons و نظرات در HTML


عذاب:
Favicon یک است تصویر کوچکی که در برگه مرورگر ظاهر می شود در کنار عنوان وب سایت خود. اگرچه ممکن است جزئیات ناچیز به نظر برسد ، اما نقش مهمی در برندسازی و سئو دارد.
برای گنجاندن یک Favicon در وب سایت خود ، باید کد زیر را در داخل برچسب قرار دهید 
 از سند HTML:


   rel="icon" type="image/png" href="https://dev.to/johnserranodev/images/myicon.png">




    
    



در این مثال:
rel="icon"  نشان می دهد که پرونده پیوند یافته مورد علاقه سایت است.
type="image/png"  مشخص می کند که پرونده یک تصویر PNG است. شما می توانید این کار را با توجه به قالب Favicon خود تغییر دهید (به عنوان مثال ، Image/X-ICON برای پرونده های .ico).
href="https://dev.to/johnserranodev/images/myicon.png"  محل پرونده Favicon را مشخص می کند. حتماً جایگزین کنید "https://dev.to/johnserranodev/images/myicon.png" با مسیر صحیح و نام پرونده ای که Favicon شما ذخیره می شود.
اندازه های توصیه شده
متداول ترین اندازه های مورد علاقه آنهاست 16x16 پیکسل حرف 32x32 پیکسلبشر برخی از مرورگرها همچنین از اندازه های بزرگتر مانند 48x48 پیکسل پشتیبانی می کنند. 
نظرات HTML
نظرات قطعات کد هستند که آنها توسط مرورگرها اجرا یا نشان داده نمی شوندبشر آنها برای توضیح یا مستند سازی بخش هایی از کد خدمت می کنند.
مثال:





    
    



این عناصر می توانند با بهبود تجربه کاربر و حفظ یک کد سازمان یافته ، موقعیت سئو شما را به طور غیرمستقیم بهبود بخشند.

  خطاهای مشترک


هنگام نوشتن HTML ، مهم است که از اشتباهات رایج مانند:
برچسب های بسته شدن را فراموش کنید: برخی از برچسب ها نیاز به بسته شدن اجباری دارند ، مانند , 

, 
بشر
نادرست لانه کنید: به عنوان مثال ، یک برچسب قرار دهید 

 dentro de un .
No utilizar HTML semántico: Sufrir de divitis, usar demasiados 

 en lugar de etiquetas específicas.
No incluir atributos esenciales: Como alt در تصاویر برای دسترسی.

  ترکیب HTML با CSS


برای بهبود ارائه یک وب سایت ، HTML با CSS ترکیب شده است. در حالی که HTML محتوا را ساختار می دهد ، CSS به شما امکان می دهد سبک کنید. مثال اساسی:




  
    p {
      color: blue;
      font-size: 20px;
    }
  


  Este es un párrafo estilizado con CSS.





    
    




  نتیجه گیری


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

        


بعدی را بخوانید

          

              

          

ابزار اشکال زدایی 5 ⃣ برتر 🧐

              کیران نارراگوند - 19 فوریه
            



          

              

          

استفاده از جداول جهانی DynamoDB برای برنامه های چند منطقه ای

              Sushant Gaurav - 31 ژانویه
            



          

              

          

راه اندازی Supabase CLI و محیط محلی

              یو حمادا - 2 فوریه
            



          

              

          

Shawarma Clicker

              ابراهیم - 31 ژانویه
            



    






      

    


          ما مکانی هستیم که رمزگذارها به اشتراک می گذارند ، به روز می شوند و شغل خود را رشد می دهند.