Clase 1

Introducción a HTML
Concepto de etiqueta
¿Qué es una etiqueta?
Etiquetas en HTML:
Cosas importantes a tener en cuenta:
● Una etiqueta en HTML es una porción pequeña
de código que genera un elemento visual
● Por lo general, las etiquetas tienen: apertura y
cierre
● Para definir una etiqueta dentro del código
usamos los símbolos: < y >
● Dependiendo del tipo de elemento visual que
deseemos vamos a elegir una determinada
etiqueta
● Para hacer configuraciones adicionales sobre
una etiqueta usamos los atributos
3
Etiquetas en HTML:
Son palabras clave escritas entre < y >.
Se abren y cierran (en su gran mayoría)

<etiqueta></etiqueta>

Opcionalmente, pueden tener contenido y atributos.

<etiqueta atributo="valor">contenido</etiqueta>

4
¿Cómo funcionan las etiquetas HTML?
Las etiquetas HTML suelen dividirse en tres partes. Esta
combinación de las tres crea un elemento HTML.

Veamos un poco más en detalle este concepto.

 Elemento HTML

Etiqueta de Contenido Etiqueta de

apertura cierre
 Elemento HTML

Se utiliza para indicar dónde empieza un elemento.

Está envuelta en < y >. Entre estos dos símbolos va el
nombre de la etiqueta.

Etiqueta de Contenido Etiqueta de

apertura cierre
 El contenido es el texto o información que
esperamos se muestre en pantalla para
Elemento HTML
todas las personas que visitan el sitio web

Etiqueta de Contenido Etiqueta de

apertura cierre
 Elemento HTML

Es lo mismo que la etiqueta de apertura pero con una

barra inclinada delante del nombre del elemento. Es
decir, </h1> para finalizar un títular.

Etiqueta de Contenido Etiqueta de

apertura cierre
 ¡Conceptos Claves!
Etiquetas en HTML
● Las etiquetas en HTML se separan en varios grupos:

○ Etiquetas estructurales (básicas)

○ Etiquetas de texto (títulos, parrafos, listas, enlaces)

○ Etiquetas de multimedia (imágen, video, audio)

○ Etiquetas semánticas (header, footer, nav)

○ Etiquetas para formularios (form, input, textarea)

○ Otras etiquetas (div, span, hr)

● Cada etiqueta tiene una finalidad única y exclusiva, por lo tanto debemos respetar su
finalidad puntual y no usarla para otra tarea

● Por defecto, el navegador aplicará un estilo visual a cada etiqueta, pero esto lo podremos
modificar con un poco de CSS
“En conclusión, debemos recordar que las etiquetas son fragmentos de
código que permiten crear elementos y estructuras dentro de un
documento HTML para que éstos puedan ser visualizados e
interpretados por los navegadores web. ”

¡Basta de teoría, veamos esto en la práctica!