Etiquetas HTML: aprende los primeros pasos para comenzar a desarrollar webs
Hans Baumann - 04 Nov 21
Articulo
7 min.
¿Qué son las etiquetas HTML? Si apenas entras al mundo del desarrollo web y quieres saber qué es el HTML (y cómo empezar a aprenderlo), hemos elaborado una guía que desmitifica esta habilidad tecnológica fundamental y te muestra lo fácil que es empezar.
El HTML describe cómo debe mostrar el navegador el texto y las imágenes de una página web. Por ejemplo, un simple párrafo, un encabezado, un listado, un enlace o una foto, por lo que te podrás dar cuenta de la importancia de este lenguaje de programación.
¿Preparado para empezar tu carrera tecnológica como desarrollador web? Entonces guarda esta página entre tus favoritos porque a continuación te enseñaremos qué es una etiqueta HTML y los aspectos básicos de este lenguaje de programación. Además, obtendrás un listado de las 100 etiquetas HTML más comunes. ¡Comenzamos!
¿Qué es una etiqueta HTML?
En primer lugar, la sigla HTML significa Hyper Text Markup Language en inglés, lo que en español traducimos como Lenguaje De Marcas de Hipertexto.
Según Investopedia, el Lenguaje de Marcas de Hipertexto (HTML) es el conjunto de símbolos o códigos que se insertan en un archivo destinado a ser mostrado en Internet. También conocidas como etiquetas de marca, estas indican a los navegadores cómo mostrar las palabras e imágenes de una página web.
¿Te parece básico? ¡Eso es porque lo es! HTML es probablemente el bloque de construcción más elemental en el proceso de desarrollo web, y eso es lo que hace que sea tan importante de aprender.
¿Cuáles son las partes de una etiqueta de HTML?
Antes de conocer cuáles son las etiquetas básicas de HTML, debes comprender cuáles son las partes de estos códigos de hipertexto.
Las etiquetas HTML tienen 4 componentes:
1. Elemento
Este es el nombre de la etiqueta, se debe hacer uno de apertura y cierre. De esta manera:
- (apertura) <elemento> … </elemento> (cierre).
La palabra “elemento” puede reemplazarse según lo que quieras incorporar a tu página con el código de HTML, por ejemplo: “title” para título, “body” para insertar un texto, “p” para iniciar un párrafo.
- No olvides lo siguiente: en la etiqueta de cierre siempre debes incluir el símbolo “/” después de este “<”.
2. Atributo
Este componente de las etiquetas HTML diferencia al “elemento” y le otorga características para hacerlo destacar como tamaño, color y tipografías. Si estás buscando códigos HTML para decorar tu web, lo más probable es que estos tengan atributos.
Deben escribirse siempre antes del signo “=”, al costado del elemento de la etiqueta de apertura. Por ejemplo, para cambiar el tipo de letra debes ingresar el comando de esta manera:
- <font face=“times new roman”> texto con tipografía Times New Roman </font>
Aquí el atributo sería la palabra “face”.
3. Contenido
Este es el texto que se encuentra entre los elementos y atributos de las etiquetas HTML.
4. Variable
También conocida como la característica del atributo de las etiquetas HTML. Puede ser el color, tamaño y tipo de letra escogido por el programador.
Se escribe siempre entre comillas después del signo “=” que indica un atributo. Por ejemplo, en nuestro ejemplo anterior:
- <font face=”times new roman”> la variable sería Times New Roman.
¿Cuáles son las etiquetas en HTML?
Llegado a este punto conoces qué es una etiqueta y cuáles son sus partes. Por lo tanto, es momento de que conozcas cuales son los códigos básicos de HTML.
Para empezar, existen dos tipos de etiquetas: de bloque y en línea.
Etiquetas de bloque
Ocupan todo el espacio disponible y comienzan desde una línea nueva en el documento.
Algunos ejemplos, además de los tan conocidos <html>, <head> y <body>:
- <p> </p> para limitar párrafos.
- <h1> </h1> para señalar el encabezado de nivel más alto.
- <h6> </h6> para señalar el encabezado de nivel más bajo.
Etiquetas en línea
Solo ocupan el espacio necesario y no comienzan una línea en el documento. Se utilizan comúnmente para dar formato a los niveles de cada bloque.
Algunos ejemplos son los siguientes:
- Para lograr negrita en HTML: <strong> </strong> o <b> </b>
- Para lograr cursiva en HTML: <em> </em> o <i> </i>
Principales etiquetas de HTML
Ahora que sabes las etiquetas básicas en HTML, llegó el momento de compartir contigo cuáles son los códigos HTML más importantes.
¡Toma nota! De esto dependerá tu página web.
Para los aspectos básicos de tu documento en HTML debes considerar algunas que ya te mencionamos a lo largo del artículo, pero también lo haremos ahora por si ya lo has olvidado. ¿Adivinas cuáles son esas etiquetas HTML?
<!doctype>
Se escribe solo al inicio y hace referencia al lenguaje en el que está configurado el texto, si será en HTML sería: <!doctype html>
<html> … </html>
Define todo el documento de una página se abre al inicio y se cierra en la última línea.
<head> … </head>
Comprende toda la información del documento que no puede ver el usuario final. Por ejemplo, el nombre de la pestaña de la página web, información legal, etc.
<p> … </p>
Determina el inicio y fin de cada párrafo para que en tu página web el texto no aparezca en solo un bloque.
Siguiendo con la lista de códigos HTML, para dar formato a los caracteres debes tener en cuenta las siguientes:
<font> … </font>
Con esta etiqueta el programador puede indicar la fuente en la que se proyectará el texto. Es importante mencionar que, este código no funciona por sí solo, siempre necesitará atributos y variables.
<u> … </u>
Con esta etiqueta de hipertexto podrás subrayar las palabras que desees dentro de tus párrafos.
Si te interesa conocer cómo cortar líneas de texto, el comando en HTML que debes saber es el siguiente:
<br>
Solo se inserta la apertura y es ideal para indicar un salto de párrafo más amplio.
Otros de los códigos básicos de HTML son los utilizados para insertar imágenes:
<img>
Este debe incluir siempre el atributo “src” que significa “source” u “origen” seguido por la ruta en donde se encuentra la imagen. Solo se utiliza la apertura, es decir, no necesitas incluir </img>.
- Por ejemplo: <img src=“nombredelaimagen.jpg”>
Imagen: skillcrush.com
Pro TIP: procura siempre tener la imagen dentro del directorio en HTML para que el servidor no tenga problemas en encontrarla y la UX sea favorable.
Con estos códigos HTML para páginas web ya tienes las nociones básicas para comenzar. Sin embargo, existen muchos más que, sin duda, deberías conocer. ¿Ves cómo no son tan difíciles de comprender y memorizar?
Estamos seguros que por lo menos alguno de los ejemplos de código HTML que te compartimos se quedó en tu mente.
Imagen: Unsplash
Descarga gratis 100 etiquetas HTML
Para ayudarte a profundizar en el tema de los códigos de hipertexto, hemos elaborado esta lista con 100 etiquetas HTML para ti. Al familiarizarte con ella, estarás dando tus primeros pasos para saber cómo programar en HTML como un profesional.
Además, conocerás algunas propiedades CSS para que amplíes tus conocimientos en la programación web y puedas complementar las funciones del HTML. Así, podrás realizar proyectos más competentes.
Recuerda que el lenguaje HTML, por recomendación de los expertos, debe estar acompañado por otros lenguajes de programación.
Ventajas y desventajas de HTML
A continuación, conocerás los puntos por los cuáles conviene trabajar con HTML y las razones por las que podría no ser la mejor opción en algunas ocasiones.
Ventajas:
- El formato HTML es ampliamente utilizado por una gran comunidad de programadores.
- La estructura HTML se ejecuta de forma automática en todos los navegadores web.
- La programación HTML es de código abierto, por lo tanto, totalmente gratis.
- Se integra fácilmente con lenguajes Back end (acceso a los datos).
Desventajas:
- El lenguaje de hipertexto solo permite diseñar páginas web estáticas. Si quieres agregar funciones dinámicas debes recurrir a otros lenguajes de programación.
- Toda página web que esté elaborada bajo la estructura básica de HTML debe crearse por separado.
- Algunos navegadores implementan lentamente los nuevos códigos HTML en páginas web.
- Existe cierta incertidumbre en el procesamiento en navegadores muy antiguos: algunas de las etiquetas HTML más recientes no se muestran.
¿Cómo puedo aprender HTML?
Puedes aprender ahora mismo. Si sabes inglés, empieza con guías online gratuitas como este tutorial de la Red de Desarrolladores de Mozilla (la gente detrás del navegador web Firefox).
Luego, cuando estés listo para dar el siguiente paso (y añadir habilidades complementarias como CSS y JavaScript), considera una clase de pago, dirigida por un instructor, como nuestro curso de Introducción al Desarrollo Web front end: HTML y CSS desde cero.
Familiarízate con el HTML
Si eres nuevo en el mundo de la tecnología, aprender HTML puede parecer un gran reto, pero no te asustes. Aprender HTML es mucho más factible de lo que crees. Puedes aprender HTML y familiarizarte con sus códigos en cuestión de semanas.
Una vez te pongas al día con HTML y CSS, su lenguaje hermano que sirve para definir las fuentes, los colores de fondo y los estilos de diseño de la página, estarás en condiciones de empezar tus proyectos.
Aunque no te des cuenta, es muy probable que ya hayas estado expuesto a HTML. Si utilizaste los primeros sitios web personales, donde podías personalizar tu página con comandos dentro de < >, en realidad estabas utilizando código HTML.
Esos comandos entre los símbolos “menor que” (<) y “mayor que” (>) se llaman etiquetas HTML, y son un componente básico de HTML.
Por ejemplo, ¿sabes cuando visitas un sitio web y ves un titular de texto seguido de muchos párrafos? El navegador que utilizas puede distinguir entre un párrafo y un titular porque cada uno tiene su propia etiqueta HTML. Las etiquetas HTML tienen este aspecto:
- <h1>esto es un titular</h1>
- <p>esto es un párrafo.</p>
Cuando usas etiquetas HTML para crear algo como un titular o un párrafo, estás creando "elementos". Los elementos son los componentes individuales de HTML que conforman un documento HTML o una página web, definidos por esas etiquetas de apertura (<p>) y de cierre (</p>), así como la información entre ellas (esto es un párrafo).
Los elementos HTML de una página web pueden consistir en diferentes tipos de contenido y medios, entre ellos:
Para colocar cualquier tipo de medio en tu página web, tienes que utilizar su etiqueta HTML particular. Por ejemplo, las imágenes tienen etiquetas <img>, los videos tienen etiquetas <video>, etc. Los elementos también pueden incluir:
Metaetiquetas, etiquetas meta o elementos meta.
Las metaetiquetas son elementos de HTML que los usuarios no ven cuando visitan una página web, pero que proporcionan a los navegadores información adicional sobre la página, como palabras clave, el autor del documento, la fecha y hora de la última modificación, etc.
Se utilizan principalmente para mantener un registro por parte del desarrollador web o para optimizar el sitio web para los resultados de los motores de búsqueda, haciendo que el sitio tenga más probabilidades de aparecer cuando la gente busca en Google las palabras clave del sitio.
Elementos estructurales
Los elementos estructurales son los elementos HTML utilizados para organizar el contenido de una página web.
Los elementos estructurales como <div> y <span> se utilizan para denotar el contenido a nivel de “bloque” (contenido que ocupa todo el ancho de su "contenedor" o página) frente al contenido “en línea” (contenido que sólo ocupa el espacio entre sus etiquetas), mientras que elementos como <header> contienen el contenido de cabecera de una página, <footer> contiene el contenido de pie de página, etc.
Por último, los atributos son instrucciones que pueden añadirse a las etiquetas HTML para proporcionar información adicional sobre los elementos. Por ejemplo, un elemento HTML como un párrafo puede tener un atributo para saber cómo está alineado (izquierda, centro o derecha).
Los atributos se incluyen en la etiqueta de apertura y están formados por el nombre del atributo, un signo igual y un valor entre comillas dobles. Por ejemplo: <p = align="right">¡Este es mi párrafo!</p>
Conoce las características del lenguaje HTML
Para ampliar la definición anterior, debes saber que las etiquetas HTML reúnen las siguientes características:
- Indican a los navegadores qué parte de una página web es un encabezado, cuál es un pie de página, dónde van los párrafos, dónde se colocan las imágenes, los gráficos, los videos, etc. Los navegadores toman ese código HTML y lo traducen a lo que ves en la pantalla de tu dispositivo.
- HTML es un lenguaje de codificación estándar que está garantizado para ser entendido por todos los navegadores web (aplicaciones como Safari, Firefox y Google Chrome).
- HTML es también el estándar universalmente aceptado para hacer que los sitios web sean "encontrables" por los motores de búsqueda como Google, Yahoo y Bing, basándose en términos de búsqueda relevantes (es decir, usando las palabras clave que se escriben en la barra de Google).
Por todo lo anterior, HTML es uno de los primeros lenguajes que debes aprender si te interesa la codificación.
Imagen: Unsplash
Identifica la estructura de una web HTML
Para identificar si el documento que estás visualizando sigue una estructura HTML, deberás conocer cuál es la estructura básica de una página elaborada con este lenguaje de programación.
Tranquilo que, de hecho, es muy sencillo. La estructura es la siguiente:
- <html>
- <head>
- </head>
- <body>
- </body>
- </html>
Toda página web HTML empieza con la etiqueta <html> y termina con </html>. Esta es la manera más rápida de identificar.
El comando <head> … </head>, también conocido como cabecera en html o header, comprende todo lo relacionado al título, scripts y estilos vinculados.
El comando <body> … </body> reúne todo el contenido general, es decir, todos los párrafos que quieras incluir como información.
Las etiquetas HTML más elaboradas que irán dándole forma a tu sitio web te las describiremos en breves instantes.
Imagen: Unsplash
En pocas palabras: para hacerle la vida más fácil a los programadores web. Con las etiquetas HTML, la construcción de una página web puede entenderse casi de inmediato.
Los códigos HTML están compuestos por la descripción de los elementos que la componen, por ejemplo, si quieres insertar un título a la página que estás elaborando bastará con digitar:
- <title> el texto que quieres resaltar </title>
Así con el resto de componentes de una página web, por ejemplo: <body>, <head>, entre otros. Como puedes ver, no son palabras complejas. Por ello, algunos creen que el lenguaje HTML, para principiantes, es la opción ideal.
Con un poco de práctica y memoria, pues son muchos códigos HTML los que intervienen en una página, podrás dominar este lenguaje de programación. Te será muy sencillo insertar imágenes, videos, enlaces, documentos y hasta crear formato para tus contenidos.
¿Cómo se convierte el HTML en una página web?
Imagina poder realizar la construcción de un sitio web, crear una plantilla de correo electrónico personalizada o trabajar como gestor de redes sociales. De esta manera podrás empezar a crear tu propio portafolio y conseguir un trabajo remunerado.
Y si quieres ser un desarrollador web de servicio completo, eventualmente necesitarás agregar habilidades como JavaScript a tu repertorio, pero HTML es tu primera entrada hacia una base sólida de codificación.
Ahora bien, ¿cómo pasan las etiquetas HTML a convertirse en una página web? Es un proceso sorprendentemente sencillo: el código HTML puede escribirse como un documento HTML de puro texto o texto plano en cualquier editor de texto básico o programa de procesamiento de textos, tras lo cual se guarda como un archivo HTML con .html al final.
No necesitas hacer uso de ningún hardware sofisticado, aparte de una computadora estándar. Esos archivos .html se convierten en la base de las páginas individuales de un sitio web y se ponen en línea como un sitio web vivo a través de un proceso llamado alojamiento web.
Los navegadores web que visitan y visualizan las páginas HTML son capaces de traducir las etiquetas de marca y el texto y procesarlos para obtener el producto final en las pantallas de los visitantes.
Para conseguir resultados que vayan más allá de las páginas web estáticas (características como gráficos animados, formularios interactivos y presentaciones de fotos) se necesitan otros lenguajes y técnicas de programación, pero, sea como sea, el HTML es un paso fundamental en el desarrollo web.
Ahora que ya sabes qué es un código de hipertexto o HTML. ¡Felicidades! El mundo de la programación web sigue evolucionando y cada vez se necesitan más profesionales que estén especializados en el tema.
Si te ha interesado el tema y quieres ampliar tus conocimientos, no dudes en revisar nuestros cursos de Desarrollo Web y Tecnología. ¿Estás listo para crear las mejores páginas web HTML? ¡Mucha suerte!