{"id":1437,"date":"2024-05-22T17:56:05","date_gmt":"2024-05-22T17:56:05","guid":{"rendered":"https:\/\/orpot.com\/blog\/?p=1437"},"modified":"2024-05-22T17:56:05","modified_gmt":"2024-05-22T17:56:05","slug":"html-etiquetas-de-contenedor","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/html-etiquetas-de-contenedor\/","title":{"rendered":"HTML : Etiquetas de Contenedor"},"content":{"rendered":"
\n

HTML nos proporciona algunas etiquetas que podemos usar para agrupar otras etiquetas juntas.<\/span><\/p>\n<\/header>\n

Supongamos que quieres agrupar un <p><\/p> y un <img \/> juntos.<\/p>\n

Puedes usar <div><\/div>.<\/p>\n

<div><p>\u00a1Hola!<\/p> <img src=\"test.jpg\" alt=\"una imagen\" \/><\/div><\/pre>\n
 <\/p>\n
Esta es probablemente la etiqueta m\u00e1s utilizada.<\/p>\n
div es el elemento contenedor gen\u00e9rico:<\/p>\n
<div> ...<\/div><\/pre>\n
Es el que usamos cuando no tenemos otra etiqueta contenedora dedicada como article.<\/p>\n
A menudo agregas un atributo class o id a este elemento, para permitir que se le aplique estilo usando CSS.<\/p>\n
Existen otras etiquetas contenedoras.<\/p>\n
Tenemos section, article, header, aside, main, footer, nav.<\/p>\n
Estas se llaman elementos sem\u00e1nticos.<\/p>\n
No tienen ning\u00fan estilo especial aplicado, todos funcionan como div pero su nombre tiene un significado espec\u00edfico adjunto.
\nImagina que tienes una p\u00e1gina con una parte de encabezado con el t\u00edtulo del art\u00edculo, el contenido del art\u00edculo y, finalmente, un pie de p\u00e1gina.<\/p>\n
Podr\u00edas escribir el HTML as\u00ed:<\/p>\n
<div>\r\n<div class=\"header\">\r\n<h1>T\u00edtulo<\/h1>\r\n<\/div>\r\n<div class=\"article\">\r\n<p>Contenido del art\u00edculo<\/p>\r\n<\/div>\r\n<div class=\"footer\">\r\n<p>Alguna informaci\u00f3n de pie de p\u00e1gina<\/p>\r\n<\/div>\r\n<\/div><\/pre>\n
O puedes darle a esas secciones m\u00e1s significado de esta manera, sin usar atributos de clase:<\/p>\n
<section>\r\n\u00a0 <header>\r\n\u00a0 \u00a0 <h1>T\u00edtulo<\/h1>\r\n\u00a0 <\/header>\r\n\u00a0 <article>\r\n\u00a0 \u00a0 <p>Contenido del art\u00edculo<\/p>\r\n\u00a0 <\/article>\r\n\u00a0 <footer>\r\n\u00a0 \u00a0 <p>Alguna informaci\u00f3n de pie de p\u00e1gina<\/p>\r\n\u00a0 <\/footer>\r\n<\/section><\/pre>\n
 <\/p>\n
No hay nada\u00a0 incorrecto en usar <div>. Nada cambia desde el punto de vista visual. Pero esas etiquetas tienen m\u00e1s significado, y las herramientas como lectores de pantalla pueden inferir informaci\u00f3n a partir de este significado.
\nVeamos cu\u00e1ndo usarlos.<\/p>\n
Veamos cu\u00e1ndo usarlos.<\/p>\n
<article>
\n<\/strong><\/h3>\n
Identifica un elemento que puede ser independiente de otros en una p\u00e1gina, como una entrada de blog en la p\u00e1gina de inicio de un blog.<\/p>\n
<article>\r\n\u00a0 <h2>Una entrada de blog<\/h2>\r\n\u00a0 <a href=\"\/1\">Leer m\u00e1s<\/a>\r\n<\/article>\r\n<article>\r\n\u00a0 <h2>Otra entrada de blog<\/h2>\r\n\u00a0 <a href=\"\/2\">Leer m\u00e1s<\/a>\r\n<\/article><\/pre>\n
Un art\u00edculo tambi\u00e9n puede ser el elemento principal en una p\u00e1gina.<\/p>\n
<article>\r\n\u00a0 <h2>Una entrada de blog<\/h2>\r\n\u00a0 <p>Aqu\u00ed est\u00e1 el contenido...<\/p>\r\n<\/article><\/pre>\n
 <\/p>\n
<section><\/h3>\n
Representa una secci\u00f3n de un art\u00edculo largo. Cada secci\u00f3n tiene una etiqueta de encabezado (h1-h6), seguida del contenido de la secci\u00f3n.<\/p>\n
<article>\r\n\u00a0 <section>\r\n\u00a0 \u00a0 <h2>Una secci\u00f3n de la p\u00e1gina<\/h2>\r\n\u00a0 \u00a0 <p>...<\/p>\r\n\u00a0 \u00a0 <img ...>\r\n\u00a0 <\/section>\r\n\u00a0 <section>\r\n\u00a0 \u00a0 <h2>Otra secci\u00f3n de la p\u00e1gina<\/h2>\r\n\u00a0 \u00a0 <p>...<\/p>\r\n\u00a0 <\/section>\r\n<\/article><\/pre>\n
Esta etiqueta es \u00fatil para dividir un art\u00edculo largo en diferentes secciones.<\/p>\n
<nav><\/h3>\n
Se utiliza para crear el marcado que define la navegaci\u00f3n de la p\u00e1gina.<\/p>\n
<nav>\r\n\u00a0 <ol>\r\n\u00a0 \u00a0 <li><a href=\"\/\">Inicio<\/a><\/li>\r\n\u00a0 \u00a0 <li><a href=\"\/blog\">Blog<\/a><\/li>\r\n\u00a0 <\/ol>\r\n<\/nav><\/pre>\n
 <\/p>\n
<aside><\/h3>\n
Se utiliza para agregar un fragmento de contenido relacionado con el contenido principal, como una cita o una barra lateral.<\/p>\n
<div>\r\n\u00a0 <p>algo de texto..<\/p>\r\n\u00a0 <aside>\r\n\u00a0 \u00a0 <p>Una cita..<\/p>\r\n\u00a0 <\/aside>\r\n\u00a0 <p>otro texto...<\/p>\r\n<\/div><\/pre>\n
 <\/p>\n
El uso de aside es una se\u00f1al de que las cosas que contiene no forman parte del flujo regular de la secci\u00f3n en la que se encuentra.<\/p>\n
<header><\/h3>\n
Representa una parte de la p\u00e1gina que es la introducci\u00f3n, puede contener uno o m\u00e1s encabezados (h1-h6), el eslogan del art\u00edculo, una imagen, etc.<\/p>\n
<article>\r\n\u00a0 <header>\r\n\u00a0 \u00a0 <h1>T\u00edtulo del art\u00edculo<\/h1>\r\n\u00a0 <\/header>\r\n\u00a0 ...\r\n<\/article><\/pre>\n
<main><\/h3>\n
Representa la parte principal de una p\u00e1gina.<\/p>\n
<body>\r\n\u00a0 ....\r\n\u00a0 <main>\r\n\u00a0 \u00a0 <p>....<\/p>\r\n\u00a0 <\/main>\r\n<\/body><\/pre>\n
<footer><\/h3>\n
<footer>\r\n       <p>&copy; 2024 Juan P\u00e9rez. Todos los derechos reservados.<\/p>\r\n   <\/footer><\/pre>\n
Se utiliza para determinar el pie de p\u00e1gina de un art\u00edculo o de la p\u00e1gina en general.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"
HTML nos proporciona algunas etiquetas que podemos usar para agrupar otras etiquetas juntas. Supongamos que…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[178,180],"tags":[],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1437"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1437"}],"version-history":[{"count":1,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1437\/revisions"}],"predecessor-version":[{"id":1438,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1437\/revisions\/1438"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}