¿Qué es HTML y sus tags? Elementos inline
Este artículo es parte de una serie, con cinco artículos, que hablan sobre HTML y sus tags:
Confiera en este artículo:
- Elementos
<inline> - Etiqueta
<span> - Etiqueta
<br> - Etiqueta
<a> - Etiqueta
<img> - Etiqueta
<audio> - Continua...
- ¿Que és HTML y sus tags? Estructura básica
- ¿Que és HTML y sus tags? Elementos inline
- ¿Que és HTML y sus tags? Block-level
- ¿Que és HTML y sus tags? Elementos de un formulario
- ¿Que és HTML y sus tags? Atributos de los elementos
En el artículo anterior vimos qué es HTML y su estructura básica, ahora vamos a entender cuáles son los tipos de elementos que existen, en este artículo comenzaremos con elementos en línea.
Elementos inline
"Inline" es una categorización de los elementos HTML, los elementos inline se pueden mostrar a nive de bloque u otros elementos inline y solo ocupanel ancho de su proprio contenido.
Veamos un ejemplo:
Como puedes ver arriba, la etiqueta a es un elemento inline, o sea, ocupa el ancho total del contenido, que en este caso es el texto.
A continuación puedes verificar algunos de estos elementos inline:
Muy similar a la etiqueta sin semántica <div>, sin embargo es un elemento inline que actúa como un container genérico para agrupar contenidos de texto.
<span>¡Hola, mundo!</span>
Veamos el resultado.
Esta etiqueta produce un salto de línea en un punto determinado del documento.
Ejemplo de utilización:
<span> Hola <br> mi nombre <br> es <br> Joana.
Veamos el resultado.
Es un elemento ancla que define un hiperlink, que vincula páginas web, archivos, direcciones de email y enlaces a la misma página. Esta etiqueta, con el atributo href, indica el destino del link. También es posible crear anclas para textos en la misma página con el href informando el id del elemento de destino.
Ejemplo de uso:
<span> Haz clic <a href="https://www.google.com" target="blank"> aquí </a> para ser direccionado a la página del Google.
Veamos el resultado.
Utilizada para poner imágenes en el sitio, debemos usarla con el atributo src, escribiendo el enlace o la ruta entre comillas.
Ejemplo:
<img src="https://cuponomia-a.akamaihd.net/img/stores/original/alura-637582521816079946.png"/>
Veamos el resultado.
Utilizada para insertar audios en la página, tiene como principales atributos: src, recibiendo como valor el enlace o directorio de audio; controls, en el caso de que quieras controlar el audio; autoplay, para definir que el audio pueda reproducirse automáticamente cuando se abre la página; type, recibiendo el tipo de audio como valor.
Ejemplo de utilización:
<audio src="" controls></audio>
Veamos el resultado.
Continua...
En este artículo vimos qué son elementos inline y cuáles son estos elementos, en el próximo capítulo veremos qué significa y qué son los elementos block level.
"Estudiante de Análisis y Desarrollo de Sistemas, cambié el área de la salud y me sumergí en programación. Apasionada por desarrollo Front-end y aficionada al UX/UI Design. Descubrí la pasión por enseñar al hacer mentorías durante otra graduación, donde fui presidenta de la Liga Académica y Directora de Medios en el Directorio Académico. Actualmente soy instructora y Desarrolladora de Software en Alura y ya hice parte del Scuba Team Front-end."
Adaptado para Alura Latam por Priscila Storck.