19 etiquetas HTML de uso común para principiantes
Publicado: 2022-12-08Si 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 entre
<> - Cada etiqueta HTML realiza una función diferente
- La mayoría de las etiquetas HTML tienen
<tag>de apertura y</tag>de cierre
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><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 <article>, <header> y <footer> que describen 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>O
<!doctype html>Nota: La declaración no tiene una etiqueta de cierre y no distingue entre mayúsculas y minúsculas.
<html> </html>
La etiqueta <html> ….. </html> 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.
Una etiqueta <html> se representa como;
<html>Content</html><cabeza></cabeza>
La sección de encabezado de un documento HTML está representada por una etiqueta <head>. Esta etiqueta se incluye dentro de la etiqueta <html> y brinda información general sobre la página web.
La etiqueta <head> contiene otras etiquetas que brindan información específica 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 una etiqueta <head>;
<head> …….. </head><título></título>
La etiqueta <title> 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.
La sintaxis de la etiqueta <título> es;
<title>HTML Tags for Beginners</title>Cuando esté dentro de una etiqueta <head>, aparecerá como;
<head> <title>HTML Tags for Beginners</title> </head><cuerpo> </cuerpo>
La etiqueta <body> 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 <body> y </body>.
Algunas de las otras etiquetas que encontrará dentro del cuerpo incluyen la etiqueta <p> para el párrafo, la etiqueta <a> para las imágenes, la etiqueta <strong> para el texto en negrita y la etiqueta <ol> para una lista ordenada, por mencionar algunas.
La sintaxis de la etiqueta <body> es;
<body> Content </body>Etiquetas <h1> a <h6>
Puede haber hasta 6 etiquetas de encabezado en un documento HTML. Cada una de las etiquetas está representada por un número del 1 al 6 como <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
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>Las etiquetas <h1> a <h6> están encerradas dentro de la etiqueta <body>.
Por ejemplo, una etiqueta ,<H1> se incluirá como;
<body> <h1> This is heading 1 >/h1> </body><p> </p>
La etiqueta <p> </p> o simplemente la etiqueta de párrafo se utiliza 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 desea más de un párrafo, debe usar varias etiquetas <p> </p> en su documento. Las etiquetas de párrafo deben encerrarse dentro de la etiqueta <body>.
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>
La etiqueta <b> </b> o simplemente negrita formateará cualquier contenido entre la apertura <b> y el cierre </b> como 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>La quinta edición estará en negrita.
<i> </i>
La etiqueta en cursiva, denotada por <i>, pone en cursiva el texto dentro de las etiquetas.
Por ejemplo, si tenemos
<i> These are italics </i>Las palabras ' estos son cursivas ' aparecerán en cursiva.
<u> </u>
La etiqueta de subrayado, o <u>, 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.
<centro> </centro>
La etiqueta Centro, <center>, se utiliza para centrar contenido en un documento HTML.
Por ejemplo, si tenemos una etiqueta h2 escrita como <h2> Centering Content in HTML </h2> , podemos centrarla de la siguiente manera;
<center> <h2> Centering Content in HTML </h2> </center><span></span>
La etiqueta Span, <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>
La etiqueta de énfasis, o <em>, se usa para enfatizar ciertas palabras en un documento HTML.
El contenido entre las etiquetas <em> 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 <sup> o superíndice permite que el texto adjunto esté por encima del resto. Un ejemplo perfecto es cuando quieres elevar al cuadrado un número X y representarlo matemáticamente para darte X 2
La sintaxis para <sup> dentro de una etiqueta de párrafo será;
<H1> Harveys <sup>TM </sup> Company Limited </H1><sub></sub>
La etiqueta de subíndice o <sub> es lo opuesto a la etiqueta de superíndice. El contenido encerrado en la etiqueta <sub> aparecerá debajo de la línea normal de texto. Un ejemplo perfecto es cuando se escribe la fórmula química del agua como H 2 0.
La sintaxis de la etiqueta de subíndice será;
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
<br> es una etiqueta de cierre automático que representa un descanso. Todo el contenido después de <br> comenzará en una nueva línea.
La sintaxis de <br> 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> y <li> </li>
La etiqueta de lista ordenada o <ol> debe usarse con otra etiqueta como <li>.
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 origen=””/>
Es posible que desee agregar una imagen para el atractivo visual o incluso un logotipo. La etiqueta de imagen de cierre automático, <img src=””/>, resulta ú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.
Terminando
Existen más de 100 etiquetas HTML, pero las anteriores son las que debe conocer como principiante. HTML es compatible con la mayoría de los editores de código y, por lo tanto, tiene la seguridad de que nunca se equivocará cuando comience a aprender.