Si desea convertirse en un desarrollador front-end, uno de los consejos más comunes que recibirá es aprender HTML. El lenguaje de marcado de hipertexto, abreviado como HTML, es la base de la mayoría de las páginas web.
HTML está hecho de diferentes cosas, como etiquetas, atributos y elementos. Nuestro enfoque serán las etiquetas HTML. Usamos etiquetas HTML para decirles a los navegadores cómo estructurar el contenido en encabezados, títulos, párrafos, imágenes y mucho más. Las etiquetas HTML son, por lo tanto, como palabras clave que definen cómo el navegador mostrará o formateará el contenido.
Los servidores leen las etiquetas HTML de arriba a abajo. No hay restricción en la cantidad de etiquetas HTML que debe tener una página web.
- Todas las etiquetas HTML están encerradas en
<> - Cada etiqueta HTML realiza una función diferente
- La mayoría de las etiquetas HTML tienen apertura
<tag>y cierre</tag>
Etiquetas HTML frente a elementos HTML frente a atributos HTML
La mayoría de la gente usa los términos etiquetas y elementos HTML indistintamente. ¿Pero son lo mismo? Técnicamente, los elementos HTML y las etiquetas HTML son diferentes.
Las etiquetas HTML definen elementos HTML. Para lograr esto, el contenido se envuelve usando un nombre de etiqueta de apertura y cierre que coincida con el contenido de la etiqueta con la que estamos trabajando.
Este es un ejemplo de un elemento HTML:
<p> This is a paragraph </p> es un ejemplo de una etiqueta HTML
Los atributos HTML brindan información adicional sobre los elementos HTML en un documento. Los atributos se encuentran dentro de los elementos HTML.
Este es un ejemplo de un atributo HTML
<button id=" SubmitOrder" class="btn">Order</button> Etiquetas HTML que todos deberían saber
HTML como lenguaje de marcas ha evolucionado a lo largo de los años desde que Tim Berners-Lee lo introdujo en 1993. La primera versión de HTML tenía 18 etiquetas. Se agregan nuevas etiquetas con cada versión de HTML; la actualización más reciente fue HTML5 en 2014.
Una comparación cercana de HTML y HTML5 muestra que este último tiene etiquetas semánticas como , , y que describan claramente el contenido. Ahora tenemos más de 100 etiquetas HTML. Las siguientes son algunas de las etiquetas más populares que debe conocer:
<!DOCTYPE>
El DOCTYPE no es técnicamente una etiqueta, sino una declaración que le dice al navegador qué tipo de archivo se cargará. Esta etiqueta le dice al navegador el tipo de HTML que se cargará.
En HTML5, puede declarar su archivo como
<!DOCTYPE html>Or
<!doctype html> Nota: La declaración no tiene una etiqueta de cierre y no distingue entre mayúsculas y minúsculas.
<html> </html>
los ….. La etiqueta viene después de la etiqueta DOCTYPE. Esta etiqueta define el documento como una página web; todos los demás elementos estarán anidados dentro. La etiqueta HTML especifica el principio y el final de un documento HTML.
A la etiqueta se representa como;
<html>Content</html><head></head>
La sección de cabecera de un documento HTML está representada por un etiqueta. Esta etiqueta está encerrada dentro de la etiqueta y proporciona información general sobre la página web.
los La etiqueta contiene otras etiquetas que brindan detalles específicos de la página web, como el título y el autor de la página. El contenido de esta etiqueta no se muestra en la página web.
Esta es la sintaxis de un etiqueta;
<head> …….. </head><title></title>
los etiqueta declara el título de la página web. Esta etiqueta se incluye dentro de la etiqueta <head>. La etiqueta <title> aparecerá en la barra de título o en la pestaña de la ventana del navegador, pero no en la página web real.
Sintaxis para la etiqueta es;
<title>HTML Tags for Beginners</title>cuando dentro de un etiqueta, aparecerá como;
<head>
<title>HTML Tags for Beginners</title>
</head><body> </body>
los etiqueta muestra todo el contenido visible en una página web. Se pueden encontrar imágenes, enlaces, texto sin formato, videos y más dentro de las etiquetas y .
Algunas de las otras etiquetas que encontrará dentro del cuerpo incluyen etiqueta para párrafo, etiqueta para imágenes, etiqueta para texto en negrita y etiqueta para una lista ordenada, por mencionar algunos.
La sintaxis para la etiqueta es;
<body> Content </body><h1> to <h6> Tags
Puede haber hasta 6 etiquetas de encabezado en un documento HTML. Cada una de las etiquetas está representada por un número que va del 1 al 6 como , , , , , y .
H1 es la etiqueta de encabezado más grande, mientras que H6 es la más pequeña.
En un documento HTML, las etiquetas de encabezado se pueden representar de la siguiente manera:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>a Las etiquetas están encerradas dentro de la etiqueta.
Por ejemplo, un , la etiqueta se adjuntará como;
<body>
<h1> This is heading 1 >/h1>
</body><p> </p>
los o simplemente la etiqueta de párrafo se usa cuando desea estructurar el contenido en un párrafo. Presionar el botón 'ingresar' en un documento HTML en su editor de código no creará un nuevo párrafo.
Si quieres más de un párrafo, tienes que usar varios etiquetas en su documento. Las etiquetas de párrafo deben encerrarse dentro del etiqueta.
La sintaxis de una etiqueta de párrafo es;
<p> ….some content here….</p>Si desea tener cuatro párrafos, su código se estructurará como;
<body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body><b> </b>
los o simplemente La etiqueta formateará cualquier contenido entre la apertura y el cierre en negrita.
La etiqueta en negrita puede estar entre un encabezado como H1 o incluso dentro de una etiqueta de párrafo.
Estos son ejemplos de una etiqueta en negrita;
<b> Bold Tag </b>La frase 'Etiqueta en negrita' aparecerá en negrita.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1> Quinta edición estará en negrita.
<i> </i>
La etiqueta en cursiva, denotada por
Por ejemplo, si tenemos
<i> These are italics </i>Las palabras 'estas son cursivas' aparecerá en cursiva.
<u> </u>
La etiqueta de subrayado, o , se utiliza cuando desea subrayar una determinada parte del texto en un documento HTML.
Por ejemplo, si tenemos;
<u> underline these words </u>La frase entre las etiquetas estará subrayada.
<center> </center>
La etiqueta del centro, , se utiliza para centrar el contenido en un documento HTML.
Por ejemplo, si tenemos una etiqueta h2 escrita como <h2> Centering Content in HTML </h2>, podemos centrarlo de la siguiente manera;
<center>
<h2> Centering Content in HTML </h2>
</center><span></span>
La etiqueta Span, , es un contenedor en línea genérico que no viene con un estilo predeterminado. Puede usar la etiqueta span para agrupar textos que desea diseñar.
Puede expandir la etiqueta dentro de otras etiquetas, como encabezados y párrafos;
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2>
<p> Learn HTML <span> from experts </span> and be ready for the market </p><div></div>
Una etiqueta de división, abreviada como div, es una etiqueta que le permite agrupar diferentes etiquetas en un documento HTML.
A una etiqueta div se le puede dar una 'clase' para agregar un estilo externo usando CSS.
Así es como se representará un div que encierra una h1, h2 y una etiqueta de párrafo.
<div >
<h1> Learn HTML </h1>
<h2> HTML Tags </h2>
<p> HTML is a markup language……… </p>
</div><em></em>
El énfasis, o etiqueta, se usa para enfatizar ciertas palabras en un documento HTML.
El contenido entre etiquetas aparecerá inclinado o en cursiva.
El contenido enfatizado dentro de un párrafo puede aparecer en un editor de código como;
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p><sup></sup>
La etiqueta o el superíndice permite que el texto adjunto esté por encima del resto. Un ejemplo perfecto es cuando quieres cuadrado un número X y representarlo matemáticamente para darte X2
La sintaxis dentro de una etiqueta de párrafo será;
<H1> Harveys <sup>TM </sup> Company Limited </H1><sub></sub>
El subíndice o etiqueta es lo opuesto a la etiqueta de superíndice. El contenido encerrado en la etiqueta aparecerá debajo de la línea normal de texto. Un ejemplo perfecto es escribir la fórmula química del agua como H20.
La sintaxis de la etiqueta de subíndice será;
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
es una etiqueta de cierre automático que representa un descanso. Todo el contenido después comenzará en una nueva línea.
La sintaxis para dentro de un párrafo será;
<p> HTML is the abbreviation of Hypertext Markup Language <br>
There has been an ongoing debate as to whether it is a programming language or not <br>
However, we cannot downplay its importance <br>
HTML has been used in more than 95% of websites today </p><ol></ol> and <li> </li>
La etiqueta de lista ordenada o la debe usarse con otra etiqueta como la .
Los dos pueden aparecer en un editor de código como;
<ol>
<li> Asia </li>
<li> Africa </li>
<li> Europe </li>
</ol>Cuando se representan en el navegador, los contenidos aparecerán numerados.
<img src=””/>
Es posible que desee agregar una imagen para el atractivo visual o incluso un logotipo. La etiqueta de imagen de cierre automático, , es útil en tal caso.
La sintaxis de la etiqueta de la imagen será;
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>El contenido entre comillas representa la URL de origen.
Resumen
Existen más de 100 etiquetas HTML, pero las anteriores son las que debe conocer como principiante. HTML es compatible con la mayoría editores de código, y así tienes la seguridad de que nunca te equivocarás cuando empieces a aprender.
