Etiquetas HTML: Contenedoras y de Contenido

Contenido del curso

Web Developer Fundamentals

HTML

Etiquetas multimedia

Formularios

CSS

Responsive Design

Accesibilidad

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:40

Etiquetas HTML: Contenedoras y de Contenido

Curso Definitivo de HTML y CSS

Clase 9 de 56

Clase 9 / 56

Recursos

body es la etiqueta que identifica la parte visible de nuestro sitio web. Dentro del body, se añadirán las etiquetas para marcar los elementos visuales del sitio web, como logotipo, menús de navegación, contenido principal, entre otrs. Es muy importante usar HTML semántico y no llenar todo de <div> para que nuestro sitio sea mejor interpretado por el navegador y, por lo tanto, más accesible.

Etiquetas del cuerpo del documento (body):

article: diferencia partes del contenido que pueden vivir por sí mismas.
nav: para hacer menús de navegación.
aside: contenido menos relevante, como publicidad, etc.
section: sirve para diferenciar las secciones principales del contenido.
header: cabecera del documento.
footer: pie de página del documento.
h1 - h6: títulos de nuestro sitio web.
table: tablas de contenidos, similar a la estructura de las hojas de calculo.
ul y ol: listas de items.
div: cualquier división para organizar el contenido.
h1 a h6: son etiquetas para indicar títulos con un estilo que destaca del resto.
article: es la parte de nuestro contenido que puede vivir por sí mismo. Pueden haber tantos artícle como proyectos o eventos tenga nuestro portafolio.
p: define el texto de un párrafo.
small: aplica una apariencia de texto reducido en tamaño.
strong: aplica al texto un formato de negritas.
a: corresponde a un ancla o enlace a una url interna o externa del documento.
img: con esta etiqueta podemos enlazar imágenes en el documento.
figure: le da un contexto semántico a las imágenes.

Ejemplo de un body con etiquetas semánticas HTML.

  <body>

    <header> <!--Sección superior de nuestro website--> 

      <nav></nav> <!--Sección de navegación de nuestro website, siempre dentro del header-->

    </header>

    <main> <!--Main es el contenido central de nuestro website, "la parte del medio"-->

      <section> 
        <!--Nuestro website puede estar divido por secciones, por ejemplo platzi tiene 3: El navegador de cursos y rutas, el feed y nuestras rutas de aprendizaje-->

        <article>
          <!--Contenido independiente de la página. Es reutilizable-->
        </article>

      </section>

      <ul> <!--Lista desordenada: Sin numerar-->

        <li><!--Item List. Elementos de la lista--></li>

      </ul>

      <ol></ol> <!--Lista ordenada: Numerada-->
      
    </main>

    <footer> <!--Sección final de nuestro website-->

    </footer>

    <p>Soy un texto</p> <!--Párrafo, texto-->

    <h1>Soy un titulo</h1> 
    <!--Títulos, muestran el texto más grande y con negrilla. Existen desde el h1 al h6-->

    <a href="#">Soy un link</a>
    <!--Enlaces/links que nos permitirán movernos entre páginas.-->

  </body>

Aporte creado por: John Cárdenas, Fabián Ardilla.

Carlos Ramos

Hace 4 años

Clase 8 - Indes y su estructura básica: body

¿Cuáles son los tipos de etiquetas que podemos agregar a la etiqueta <body>?

De contenido
Contenedoras.

¿Para qué nos sirven las etiquetas contenedoras?

Estas nos permiten encerrar las etiquetas de contenido y crear la estructura o anatomía de una página web.

¿Para qué nos sirven las etiquetas de contenido?

Estas nos permiten agregar el contenido que vamos a renderizar en nuestra página web, por ejemplo:
- Textos.
- Imágenes.
- Videos.

¿Qué etiquetas contenedoras existen?

 <header> </header>
 <nav> </nav>
 <main> </main>
 <section> </section>
 <ul> </ul>
 <ol> </ol>
 <footer> </footer>
 <div> </div>

¿Para qué nos sirve la etiqueta <header>?

Esta nos permite crear el encabezado en nuestra página web.

¿Para qué nos sirve la etiqueta <nav>?

Esta nos permite crear un menú de navegación.

¿Para qué nos sirve la etiqueta <main>?

Para crear el crear nuestro contenido principal de nuestra página web.

¿Para qué nos sirve la etiqueta <section>?

Esta nos permite crear una sección de nuestra página web.

¿Para qué nos sirve la etiqueta <article>?

Para crear articulos de nuestra página web.

¿Qué tipos de listas podemos crear en HTML?

Ordenadas
Desordenadas.

¿Para qué nos sirve la etiqueta <ul>?

Para crear una lista desordenada.

¿Para qué nos sirve la etiqueta <ol>?

Para crear listas ordenadas.

¿Cómo podemos diferenciar las listas ordenadas y desordenadas en HTML?

Las listas ordenadas van a venir con numeración, mientras que las listas desordenadas van a venir con viñetas o bullets.

¿Para qué nos sirve la etiqueta <footer>?

Para crear el pie de página de nuestra página web.

¿Para qué nos sirve la etiqueta <div>?

Esta etiqueta nos permite crear secciones sin un peso semántico

¿Qué etiquetas de contenido de texto existen?

 <p> </p>
 <li> </li>
 <h2> </h2>
 <h3> </h3>
 <h4> </h4>
 <h5> </h5>
<h6> </h6>
 <h6> </h6>
 <a href="#"> </a>

¿Para qué nos sirve la etiqueta <li>?

Para crear los ítems de las listas ordenadas y/o desordenadas.

¿Para qué nos sirve la etiqueta <p>?

Para crear párrafos.

¿Para qué nos sirven las etiquetas <h2>, <h3>, <h4>, <h5>, <h6> y <h6>?

Para crear títulos o encabezados de texto.

¿Cómo funcionan las etiquetas h?

Debido a que hay 6 etiquetas h’s y todas sirven para lo mismo, lo que se debe de tener en cuenta es el número que tengan y con esto sabremos su peso semántico. Entre menor sea el número, mayor será su peso semántico. Además visualmente se verán diferentes dependiendo su peso semántico, entre menor sea su número más grande será la letra que veremos en el navegador.

¿Para qué nos sirve la etiqueta <a>?

Esta nos permite crear los link o hipervínculos que nos llevaran de página en página dentro de nuestra página web.

¿Qué pasa si el atributo href de la etiqueta <a> está vació?

La página en la que estamos se recargará cada vez que demos clic sobre el elemento.

¿Por qué debemos de trabajar con HTML semántico?

Porque es una mala práctica no hacerlo, por ello debemos de usar las etiquetas correspondientes al tipo de contenido que queremos hacer.

¿Es buena práctica que usemos la etiqueta <div> para crear secciones?

Todo depende del caso, si lo que queremos es crear una sección o contenedor que queramos manipular lo podemos hacer, pero si lo que queremos es crear secciones que son importantes para nuestra página web NO SE DEBE HACER.

Pablo Alejandro Figueroa

Hace 3 años

Genial..!

Comentarios (534)534 comentarios

John Cardenas

Hace 6 años

Joel Dominguez Merino

Enrique Rabell Talamantes

Yajayra Arauco Flores

Edgar Ramón González Contreras

Jimmy Buriticá Londoño

Daniela Wario

Dario Paladines

Hace 5 años

Anggi Vanesa Pallares Solis

Ikal Esteban Fernández Galván

Marko Antonio Hidalgo Romero

LESTHER XITUMUL MANUEL

Jorge Antonio Gómez García

Mabel Echeverri Vélez

Andrés Gutiérrez Arcia

Ulises Alejandro Mánica Caricio

Joshua Ortiz Rosales

Hernan Cañete

Pedro Fernando Villalobos Bermudez

Luis Sepulveda

Héctor Eduardo López Carballo

Valentina Giraldo Ospina

Jorge Luis Pulido Urbina

Daniel Omar Hernández Muñoz

Edwin Jose Florez Peralta

Daniel Felipe Lozano Naranjo

Giuseppe Ramirez

Marco Antonio Mejía López

Alvaro Ruiz

Andres Condezo Monge

William Schnaider Torres Bermon

David Castro

Harold Andrés Burbano Acuña

Fernando Labastida Vázquez

Yorfrank Bastidas

Abigail Perez

Ansony Banda

Peter Quiñones Guerrero

Juan Felipe Torralba

Raúl Adolfo Sánchez Rodríguez

Luis David Morocho Peralta

ANDREA FERNANDA OTÁLORA FIGUEROA

mundial andrs

Daniel David Mármol Rivero

Hania Bagatella Maldonado

Web Developer Fundamentals

Este curso tiene una versión actualizada.

HTML y CSS: Fundamentos para Desarrolladores Web

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales

Fundamentos del Desarrollo Backend

Comprende el Rol y las Habilidades de un Desarrollador Full Stack

Diferencias entre Páginas Web Estáticas y Dinámicas

HTML

Anatomía de una Página Web: Estructura y Elementos HTML

Creación y Estructura de un Archivo index.html Básico

Etiquetas HTML: Contenedoras y de Contenido

Listas anidadas y enlaces en HTML para recetas

Anatomía de Etiquetas HTML: Apertura, Cierre y Atributos

Etiquetas multimedia

Formatos de Imágenes y su Uso en Desarrollo Web

Optimización de Imágenes para Web

Uso de etiquetas IMG y FIGURE en HTML

Uso de las etiquetas HTML figure y figcaption para imágenes

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Formularios

Creación de Formularios Web Efectivos con HTML

Creación de Formularios HTML con Campos de Fecha y Hora

Autocompletado y Requerimiento en Formularios HTML

Creación de Menús Desplegables con Select y Data List en HTML

Diferencias entre botones submit e input en formularios HTML

CSS

Introducción a CSS: Estilos y Aplicaciones Básicas

Implementación Básica de CSS en HTML

Pseudo Clases y Pseudo Elementos en CSS

Anatomía de una Regla CSS: Selectores y Declaraciones

Modelo de Caja en CSS: Margen, Relleno y Bordes

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Especificidad y Orden de Declaración en CSS

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores

Combinadores CSS: Hermanos Adyacentes y Especificidad

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Combinadores CSS: Hijos y Descendientes

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

Comprensión del uso de em en CSS: medidas relativas de fuente

Uso de REM en CSS para Fuentes y Dimensiones

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"

Posicionamiento en CSS: Static, Absolute y Relative

CSS: Display Block, Inline e Inline-Block

Posicionamiento de Layout Básico en CSS

Posicionamiento y Estilos con Display Flex en CSS

Posicionamiento Vertical con Flexbox en CSS

Uso de Variables Custom en CSS para Optimizar Estilos

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Responsive Design

Responsive Design: Estrategias Mobile First

Patrones de Diseño Responsive: Mobile First a Desktop

Media Queries para Diseño Responsive Mobile y Tablet

Patrón Layout Shifter en Diseño Mobile First

Patrón de Diseño Responsive: Column Drop en CSS

Diseño Responsive: Estrategias y Ejemplos Prácticos

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Accesibilidad

Accesibilidad Web: HTML Semántico para Proyectos Inclusivos

Uso de medidas relativas para accesibilidad en texto web

Atributos HTML para Mejorar la Accesibilidad Web

Próximos pasos

Próximos Pasos en Desarrollo Web: Mobile First y Más

Recursos Visuales para Desarrolladores Web

Etiquetas HTML: Contenedoras y de Contenido