Mundo de las etiquetas
HTML
EMPEZAR
By: Isabella Alcalá, Jesus Arevalo, Santiago Linero, Ana Martínez y Ana Villa.
Índice
Primeros pasos con HTML
Fundamentos de texto en HTML
¿Qué hay en la cabecera? Metadatos en HTML
Conceptos básicos: Encabezados y párrafos
¿Qué hay en lacabecera HTML?
¿Qué es HTML?
Anatomía de un elemento HTML
Uso y tipos de listas en HTML
Elementos comunes en la cabecera
Iconos personalizados para mejorar la experiencia del usuario
Anidando elementos
Elementos de énfasis e importancia
Aplicar CSS y JavaScript a HTML
atributos
Anatomía básica de un documento HTML
¿QUE ES HTML?
HyperText Markup Languaje
es un lenguaje de marcas que define la estructura de un sitio web. Todos los sitios web que conocemos han sido escritos con etiqueta.
Anatomía de un elemento HTML
Estructura
Un elemento HTML está formado por: Etiqueta de apertura: que puede incluir atributos para dar información adicional. Contenido: que es el texto o los elementos que se muestran en la página. Etiqueta de cierre: que indica el final del elemento. Esta estructura permite organizar y presentar la información correctamente en una página web.
<p>Hola mundo</p>
Etiqueta de apertura → <p> Indica el inicio del elemento. Contenido → Hola mundo Lo que se muestra en la página. Etiqueta de cierre → </p> Marca el final del elemento.
Anidando Elementos
Los elementos se pueden colocar dentro de otros elementos. Esto se llama anidamiento. Si quisiéramos decir que mi gato es muy gruñón, podríamos envolver la palabra "muy" en un elemento, lo que significa que la palabra debe tener un formato de texto fuerte:
Elementos Vacios
No todos los elementos siguen el patrón de una etiqueta de apertura, contenido y una etiqueta de cierre. Algunos elementos consisten en una sola etiqueta, que normalmente se utiliza para insertar/incrustar algo en el documento. ejemplo:
Ejemplo común: atributos en la etiqueta <img>
src (obligatorio): Especifica la URL o ruta de la imagen. alt: Texto alternativo que describe la imagen (importante para accesibilidad). width: Ancho de la imagen en píxeles. height: Altura de la imagen en píxeles.
Atributos
¿que son los atributos?
Los atributos son información adicional que se añade a un elemento HTML para darle características o comportamientos especiales. No se muestran directamente en la página, pero afectan cómo funciona o se presenta el elemento.
Un atributo debe tener: Un espacio después del nombre del elemento. El nombre del atributo. Un signo igual =. Un valor entre comillas (dobles o simples).
Comillas en los valores de los atributos
Atributos booleanos
Es recomendable siempre usar comillas para evitar errores y mejorar la legibilidad. Puedes usar comillas dobles " " o simples ' ' indistintamente, pero no mezcles ambas. Si necesitas incluir comillas dentro del valor, usa comillas diferentes para evitar conflictos o usa entidades HTML (" para comillas dobles).
Son atributos que no necesitan un valor explícito. Su sola presencia activa la característica. Por ejemplo: disabled para deshabilitar un input.dos formas validas:
Anatomía básica de un documento HTML
<html>
<head>
<body>
la parte visible que interactúas en la página (texto, imágenes, botones)
datos sobre la página (título, estilos)
todo el contenido del sitio
Contiene el contenido visible de la página, como texto, imágenes y enlaces.
Incluye metadatos como el título de la página, enlaces a hojas de estilo y scripts
Es la raíz del documento y contiene todo el contenido de la página.
¿Que hay en la cabecera?
La cabecera HTML es el contenido del elemento <head> — a diferencia del contenido del elemento <body> (que sí se muestra en la página cuando se carga en el navegador), el contenido de la cabecera no se muestra en la página. Por el contrario, la función de la cabecera es contener los metadatos del documento.
En páginas más grandes, sin embargo, la cabecera puede llegar a contener bastantes elementos. Prueba a ir a algunos de tus sitios web favoritos y comprueba el contenido de la cabecera usando las herramientas para el desarrollador.
ELEMENTOS COMUNES EN LA CABECERA
<link>
Definir mensajes secundarios Establece relaciones con otros recursos, como hojas de estilo externas
<meta>
Define metadatos como el juego de caracteres (<meta charset="UTF-8">) o palabras clave para motores de búsqueda.
<title>
Especifica el título de la página, que aparece en la pestaña del navegador.
Iconos personalizados
El favicon es un pequeño icono (generalmente de 16x16 px) que aparece en la pestaña del navegador y en los marcadores. Para añadirlo a tu sitio: Guarda el icono en el mismo directorio que tu página principal, preferiblemente en formato .ico (aunque también funcionan .png o .gif).
JavaScript
Aplicar CSS
CSS se añade al documento con el elemento <link> dentro del <head>. Este usa rel="stylesheet" para indicar que es una hoja de estilo y href para señalar la ruta del archivo CSS.
JavaScript se integra con el elemento <script>. Lo más recomendable es incluirlo en el <head> con el atributo defer, de modo que el navegador cargue el HTML primero y después ejecute el JavaScript, evitando errores.
Encabezado y Párrafos
Las secciones de un documento se marcan con encabezados, usando las etiquetas <h1> a <h6>. <h1> se utiliza para el título principal del documento. <h2> para los subtítulos. <h3> para subdivisiones dentro de un subtítulo. Y así sucesivamente hasta <h6>, que marca niveles cada vez más específicos.
Los párrafos siempre deben ir dentro del elemento <p>. Ejemplo:
Listas
Anidadas
No ordenadas
Ordenadas
Es posible poner listas dentro de otras para mostrar subelementos o instrucciones relacionadas.
Se emplean cuando el orden sí importa (por ejemplo, pasos de instrucciones). Funciona igual que una lista no ordenada, pero con <ol> en lugar de <ul>.
Se usan cuando el orden de los elementos no importa (por ejemplo, una lista de compras). La lista se abre y cierra con <ul>. Cada elemento se escribe dentro de <li>.
Enfasis e Importancia
ENFASIS resalta palabras como si fueran en cursiva, pero con un valor semántico (lectores de pantalla cambian el tono).
IMPORTANCIA FUERTE resalta en negrita, indicando mayor relevancia. También reconocido por lectores de pantalla con un tono más fuerte.
HTML
Fernando Alonso Mascarell
Created on October 24, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Momentum: Onboarding Presentation
View
Dynamic Visual Presentation
View
Corporate Christmas Presentation
View
Customer Service Manual
View
Business Results Presentation
View
Meeting Plan Presentation
View
Business vision deck
Explore all templates
Transcript
Mundo de las etiquetas
HTML
EMPEZAR
By: Isabella Alcalá, Jesus Arevalo, Santiago Linero, Ana Martínez y Ana Villa.
Índice
Primeros pasos con HTML
Fundamentos de texto en HTML
¿Qué hay en la cabecera? Metadatos en HTML
Conceptos básicos: Encabezados y párrafos
¿Qué hay en lacabecera HTML?
¿Qué es HTML?
Anatomía de un elemento HTML
Uso y tipos de listas en HTML
Elementos comunes en la cabecera
Iconos personalizados para mejorar la experiencia del usuario
Anidando elementos
Elementos de énfasis e importancia
Aplicar CSS y JavaScript a HTML
atributos
Anatomía básica de un documento HTML
¿QUE ES HTML?
HyperText Markup Languaje
es un lenguaje de marcas que define la estructura de un sitio web. Todos los sitios web que conocemos han sido escritos con etiqueta.
Anatomía de un elemento HTML
Estructura
Un elemento HTML está formado por: Etiqueta de apertura: que puede incluir atributos para dar información adicional. Contenido: que es el texto o los elementos que se muestran en la página. Etiqueta de cierre: que indica el final del elemento. Esta estructura permite organizar y presentar la información correctamente en una página web.
<p>Hola mundo</p>
Etiqueta de apertura → <p> Indica el inicio del elemento. Contenido → Hola mundo Lo que se muestra en la página. Etiqueta de cierre → </p> Marca el final del elemento.
Anidando Elementos
Los elementos se pueden colocar dentro de otros elementos. Esto se llama anidamiento. Si quisiéramos decir que mi gato es muy gruñón, podríamos envolver la palabra "muy" en un elemento, lo que significa que la palabra debe tener un formato de texto fuerte:
Elementos Vacios
No todos los elementos siguen el patrón de una etiqueta de apertura, contenido y una etiqueta de cierre. Algunos elementos consisten en una sola etiqueta, que normalmente se utiliza para insertar/incrustar algo en el documento. ejemplo:
Ejemplo común: atributos en la etiqueta <img>
src (obligatorio): Especifica la URL o ruta de la imagen. alt: Texto alternativo que describe la imagen (importante para accesibilidad). width: Ancho de la imagen en píxeles. height: Altura de la imagen en píxeles.
Atributos
¿que son los atributos?
Los atributos son información adicional que se añade a un elemento HTML para darle características o comportamientos especiales. No se muestran directamente en la página, pero afectan cómo funciona o se presenta el elemento.
Un atributo debe tener: Un espacio después del nombre del elemento. El nombre del atributo. Un signo igual =. Un valor entre comillas (dobles o simples).
Comillas en los valores de los atributos
Atributos booleanos
Es recomendable siempre usar comillas para evitar errores y mejorar la legibilidad. Puedes usar comillas dobles " " o simples ' ' indistintamente, pero no mezcles ambas. Si necesitas incluir comillas dentro del valor, usa comillas diferentes para evitar conflictos o usa entidades HTML (" para comillas dobles).
Son atributos que no necesitan un valor explícito. Su sola presencia activa la característica. Por ejemplo: disabled para deshabilitar un input.dos formas validas:
Anatomía básica de un documento HTML
<html>
<head>
<body>
la parte visible que interactúas en la página (texto, imágenes, botones)
datos sobre la página (título, estilos)
todo el contenido del sitio
Contiene el contenido visible de la página, como texto, imágenes y enlaces.
Incluye metadatos como el título de la página, enlaces a hojas de estilo y scripts
Es la raíz del documento y contiene todo el contenido de la página.
¿Que hay en la cabecera?
La cabecera HTML es el contenido del elemento <head> — a diferencia del contenido del elemento <body> (que sí se muestra en la página cuando se carga en el navegador), el contenido de la cabecera no se muestra en la página. Por el contrario, la función de la cabecera es contener los metadatos del documento.
En páginas más grandes, sin embargo, la cabecera puede llegar a contener bastantes elementos. Prueba a ir a algunos de tus sitios web favoritos y comprueba el contenido de la cabecera usando las herramientas para el desarrollador.
ELEMENTOS COMUNES EN LA CABECERA
<link>
Definir mensajes secundarios Establece relaciones con otros recursos, como hojas de estilo externas
<meta>
Define metadatos como el juego de caracteres (<meta charset="UTF-8">) o palabras clave para motores de búsqueda.
<title>
Especifica el título de la página, que aparece en la pestaña del navegador.
Iconos personalizados
El favicon es un pequeño icono (generalmente de 16x16 px) que aparece en la pestaña del navegador y en los marcadores. Para añadirlo a tu sitio: Guarda el icono en el mismo directorio que tu página principal, preferiblemente en formato .ico (aunque también funcionan .png o .gif).
JavaScript
Aplicar CSS
CSS se añade al documento con el elemento <link> dentro del <head>. Este usa rel="stylesheet" para indicar que es una hoja de estilo y href para señalar la ruta del archivo CSS.
JavaScript se integra con el elemento <script>. Lo más recomendable es incluirlo en el <head> con el atributo defer, de modo que el navegador cargue el HTML primero y después ejecute el JavaScript, evitando errores.
Encabezado y Párrafos
Las secciones de un documento se marcan con encabezados, usando las etiquetas <h1> a <h6>. <h1> se utiliza para el título principal del documento. <h2> para los subtítulos. <h3> para subdivisiones dentro de un subtítulo. Y así sucesivamente hasta <h6>, que marca niveles cada vez más específicos.
Los párrafos siempre deben ir dentro del elemento <p>. Ejemplo:
Listas
Anidadas
No ordenadas
Ordenadas
Es posible poner listas dentro de otras para mostrar subelementos o instrucciones relacionadas.
Se emplean cuando el orden sí importa (por ejemplo, pasos de instrucciones). Funciona igual que una lista no ordenada, pero con <ol> en lugar de <ul>.
Se usan cuando el orden de los elementos no importa (por ejemplo, una lista de compras). La lista se abre y cierra con <ul>. Cada elemento se escribe dentro de <li>.
Enfasis e Importancia
ENFASIS resalta palabras como si fueran en cursiva, pero con un valor semántico (lectores de pantalla cambian el tono).
IMPORTANCIA FUERTE resalta en negrita, indicando mayor relevancia. También reconocido por lectores de pantalla con un tono más fuerte.