¿Te interesa aprender sobre desarrollo web y quieres comenzar a usar HTML5 y otras herramientas? En este post te daremos una introducción sobre cuáles son las principales etiquetas de HTML5. Comenzarás a dominarlo poco a poco y, así, te conviertas en todo un desarrollador web.
¿Qué es una etiqueta en HTML?
Primero debemos aclarar qué es una etiqueta y cómo funciona. HTML es un markup language, esto significa que está escrito con códigos que puedes leer sin que sea necesario compilarlo primero. Es decir, el texto en una página web está «marcado» con estos códigos para dar indicaciones al navegador web, que estés usando, sobre cómo mostrar el texto. Estas etiquetas de marcado son las propias etiquetas HTML.
Cuando escribes código en HTML, estás escribiendo etiquetas HTML. Todas las etiquetas HTML están hechas con unas características específicas, incluyendo:
- El carácter “menor que” <
- Una palabra o carácter que determina qué etiqueta se está escribiendo
- Cualquier número de atributos HTML que se quiera usar, escritos de la forma nombre =”valor”
- El carácter “mayor que” >
HTML es un lenguaje que hace parte de la mayoría de las páginas web y plataformas online, cabe aclarar que no se considera un lenguaje de programación, ya que este no puede crear una funcionalidad dinámica. Por otro lado, los usuarios web pueden crear y estructurar secciones, párrafos y enlaces usando elementos, etiquetas y atributos.
En la actualidad existen al rededor de 142 etiquetas HTML disponibles, las cuales permiten la creación de diferentes elementos. Pese a que algunos ordenadores ya no admiten varias de estas etiquetas, es fundamental tener en cuenta la existencia de ellas.
Cabe aclarar que HTML ha ido evolucionando en los últimos años. Para que te hagas una idea, solo existían 18 etiquetas en la primera versión. Desde entonces, cada actualización ha traído nuevas etiquetas y atributos. La versión más importante fue la introducción del HTML5 incluyendo diversas etiquetas semánticas que describían mejor el contenido, como <article>, <headers> y <footer>.
¿Cómo funcionan las etiquetas de HTML5?
Todos los sitios web contienen página diferentes páginas internas HTML, las cuales pueden constar de una página de inicio, otra de producto, otra de contacto, entre otras. Normalmente los documentos HTML son archivos que acaban con .html o .htm. Tu navegador lee el archivo y muestra su contenido para que lo puedas ver.
Como te hemos comentado previamente, todas las páginas contienen una serie de elementos HTML que a la vez poseen diferentes etiquetas y atributos. En otras palabras, los elementos HTML son los componentes más básicos de una página web, así mismo, una etiqueta contiene mucha información. Le indica a tu navegador dónde empieza y dónde termina cada elemento, mientras que un atributo describe las características de toda la página.
Los elementos HTML suelen dividirse en tres partes.
- Etiqueta de apertura: Se usa para indicar dónde empieza un elemento. Está envuelta en corchete de apertura y cierre. Por ejemplo puedes usar la etiqueta de inicio <p> para crear un párrafo.
- Contenido: El contenido es el resultado que ve la audiencia.
- Etiqueta de cierre: Es lo mismo que la etiqueta de apertura pero con una barra inclinada delante del nombre del elemento. Es decir, </p> para finalizar un párrafo.
Como en HTML, también existen varios tipos de etiquetas en HTML5. ¡Estas son las más importantes!
Principales etiquetas de HTML5
Te preguntarás, ¿cuántas etiquetas tiene HTML5? Este lenguaje de programación tiene una gran variedad. Si bien es difícil memorizar todas las etiquetas de HTML5, te enseñaremos cuáles son las etiquetas más usadas e imprescindibles en tu día a día:
<body>
Esta etiqueta indica la parte del cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica dónde empieza el contenido visible del documento.
<head>
La parte superior de tu documento HTML, es donde podremos indicar los metadatos: título del documento, hojas de estilos, JavaScript, CSS y demás aspectos.
<div>
Un elemento que es usado usualmente para agrupar otros elementos y actuar como plantilla de otros controles. La etiqueta <div> nos ayuda a estructurar el documento en modo de secciones.
<a>
Es una etiqueta de HTML5 que te ayuda crear un enlace a una página web. El atributo principal de la etiqueta HTML es href, donde pondremos el enlace al que queremos conectar.
<IMG>
Usa la etiqueta IMG para mostrar imágenes dentro del contenido. Necesitas el atributo src para que funcione, ya que será donde indicaras desde donde se tiene que mostrar la imagen.
<SPAN>
Con esta etiqueta puedes personalizar el estilo de solamente una parte del texto exclusivamente.
<strong>
Si tienes mucho texto, es importante poder dar énfasis a una parte en concreto, con la etiqueta strong lo podemos hacer dicho énfasis deseado.
<H1>, <H2>, <H3>…
Hay diferentes niveles de títulos, del 1 al 6. Las etiquetas <H + número> te permiten indicar la importancia o relevancia del título y para estructurar el contenido. De esta forma ayudas a los bots a entender la importancia del contenido que se está escribiendo.
En conclusión, estos son las principales etiquetas de HTML5 que puedes comenzar a implementar en tus proyectos de programación y desarrollo web.
¿Por dónde seguir?
Ahora que sabes cuáles son las principales etiquetas de HTML5 y su funcionamiento, ¿quieres seguir adquiriendo conocimientos en el área? Con nuestro Bootcamp en Desarrollo Web podrás dominar esta y otras herramientas y tecnologías como JavaScript, React, Microservicios y hasta despliegue de servidores en menos de 7 meses. ¡Apúntate ahora!
