Etiquetas HTML esenciales: head, body, form, párrafo y más
Clase 5 de 27 • Curso de Google Tag Manager para Marketing
Resumen
¿Cómo estructuramos correctamente un documento HTML?
El HTML se asemeja a un esqueleto que define no sólo la disposición estructural de una página web, sino también la ubicación de sus elementos. Es esencial comprender de qué está compuesto el HTML para posteriormente explorar cómo los usuarios interactúan con un sitio. En términos de estructura, debemos familiarizarnos con las etiquetas básicas: head
y body
.
¿Qué papel juegan las etiquetas head y body?
El HTML está generalmente dividido en dos partes principales: head
y body
. El head
contiene todos los elementos que importamos al sitio, como los estilos y archivos CSS, mientras que el body
se encarga de exhibir todo lo visible para el usuario. Por ejemplo, el tamaño y la disposición visual de un sitio dependen del body
, mientras que los recursos estéticos como colores y tipografías vienen del head
.
Dentro del head
existe una etiqueta crucial: title
, que define el título que aparece en las pestañas del navegador. A diferencia de los headings
que se encuentran en el body
, title
nunca debe colocarse en el body
.
¿Cómo funcionan las etiquetas form y paragraph?
Las etiquetas form
y paragraph
cumplen funciones distintas pero complementarias:
- Form: Actúa como un contenedor de campos que capturan información del usuario. Aquí podemos incluir etiquetas como
input
ytextarea
para recoger datos. - Paragraph (p): Se utiliza para introducir texto en áreas específicas del sitio. No es sólo un bloque de texto, sino un elemento de gran importancia para la interpretación de contenido por parte del navegador.
¿Cuál es la función de las etiquetas input y button?
En HTML, input
es una etiqueta versátil ya que puede ser un campo de texto, un botón de radio, un checkbox, o más. Por otro lado, button
es específicamente un botón que envía información a una base de datos. La distinción radica en su utilidad y función dentro de un formulario.
¿Cómo podemos explorar y modificar HTML en tiempo real?
Usar las herramientas de inspección de un navegador como Google Chrome, te permite modificar y explorar el HTML de una página en tiempo real. Puedes ajustar elementos como tamaños de títulos (h1
, h2
, h3
), o incluso cambiar el texto que aparece en la pestaña del navegador, aunque estos cambios sólo afectan la versión local hasta que recargues la página.
¿Qué aprendimos sobre los headings y su importancia en el diseño web?
Los headings
son fundamentales para la estructura jerárquica del contenido en HTML. Un h1
es siempre el título principal, mientras que h2
, h3
y así sucesivamente, se utilizan para subtítulos o secciones menores. La clave está en usar correctamente estos elementos para mejorar la comprensión del contenido por parte de los motores de búsqueda y también de los usuarios.
Por último, te animo a que participes activamente en foros de discusión sobre HTML. Si encuentras algún comportamiento inesperado o si deseas saber más sobre alguna etiqueta específica, no dudes en buscarnos allí para obtener ayuda y consejos valiosos de la comunidad de Platzi. Continúa explorando, creando y compartiendo tus conocimientos para perfeccionar tus habilidades de desarrollo con HTML.