Cerrar

Enviar mensaje

twitter FaceBook You Tube Git Hub Docs.com Enviar email

Manual de HTML5 y CSS3

[11]
Elementos estructurales

Publicidad

[11.1] elemento div

Se trata de un elemento clásico (presente en las primeras versiones de HTML) que permite agrupar contenido. Inicialmente se usaba para usar su atributo align para que todo un bloque de párrafos tuviera la misma alineación.

Desde hace años se ha convertido en el elemento utilizado, combinado con CSS, para crear capas. Las capas son elementos contenidos en otro elemento, el cual podemos colocar libremente en cualquier parte de la página. Dentro de div se pueden colocar todo tipo de etiquetas (tablas, párrafos, imágenes,…)

Por defecto, los navegadores no dan formato al contenido de un elemento div, con lo que visualmente no se diferencia del resto de elementos.

En el ejemplo siguiente se destaca el elemento div con de rojo gracias a CSS. Código:

<h1>Título principal</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 
   elit. Quos, architecto, sapiente corporis debitis 
   placeat libero ipsa labore molestias omnis facere  
   odit fugiat. Dolore, quam, tempore molestias 
   architecto veritatis magnam atque?
</p>
<div style=”background-color:red”;>
    <h2>Título secundario</h2>
    <p>Lorem ipsum dolor sit amet, consectetur 
       adipisicing elit. Odio, fugit, sint maxime unde 
       laudantium architecto asperiores libero sit 
       accusamus itaque doloribus quae error aliquam in 
       soluta commodi porro mollitia excepturi!
    </p>
    <p>Commodi, eaque, voluptate a culpa explicabo 
       deserunt sequi molestias nemo quibusdam   
       consequuntur architecto cum iste et nobis 
       praesentium minima illum. Ex laborum consectetur 
       voluptatem deleniti magnam iste tenetur est 
       facilis.
    </p>
</div>
<p>Velit, ex tenetur architecto culpa officia 
   soluta exercitationem recusandae aut ea 
   praesentium. Recusandae, qui, repudiandae, eaque 
   amet doloribus quod ad illum nihil pariatur iste 
   natus velit nostrum voluptatum nemo dicta.
</p>

El resultado en el navegador sería:

Elemento div

[11.1.1]elemento span

Es muy similar al anterior, pero como los navegadores no agregan nada (ni siquiera espacios) a esta etiqueta cuando se muestra por pantalla, en lugar de para definir capas (aunque se podría) se usa para marcar contenido dentro de un párrafo, a fin de que a ese contenido se le pueda dar un formato especial mediante CSS. Es decir, con div marcamos capas (contenedores grandes) y con span marcamos bloques pequeños de texto.

Ejemplo:

<p>Dentro de este texto <span style=”color:red”>esta frase sale de color rojo</span>. Esto vuelve a salir normal</p>

[11.2] elementos estructurales de HTML5

La idea en los nuevos estándares de HTML (especialmente en HTML5) es que los elementos HTML aporten valor semántico al contenido. Es decir, se trata de que el código HTML indique qué tipo de contenido tenemos en las páginas. Eso vale para casi todos los elementos ya conocidos como p (párrafo), abbr (abreviatura), strong (remarcado fuerte), etc.

La idea es marcar la semántica con HTML y el formato con las hojas de estilo. A este respecto hay una serie de elementos incluidos en HTML 5 que no dan ningún formato al texto, pero permiten darle un significado. Posteriormente, podemos hacer que ese contenido tenga un formato diferente mediante CSS.

Como el elemento clásico para crear capas es div, nos encontramos con el problema de que este elemento no indica un valor semántico, sino funcional. La idea actual es que estos elementos sustituyan el sobreuso que se hace de la etiqueta div.

No es fácil esta idea, puesto que existen numerosas plantillas y patrones de trabajo profesionales (como por ejemplo bootstrap) exigen el uso de div.

Las nuevas etiquetas semánticas no son soportadas por navegadores incompatibles con HTML 5. Ha sido especialmente problemático Internet Explorer, aunque ahora ya soporta sin reservas estos contenidos. Todos los navegadores actuales trabajan perfectamente con estos elementos.

[11.2.1]elemento header

Permite marcar una cabecera. Esto no tiene que ver con el elemento head, se trata de una serie párrafos que se marcan de esta forma para indicar que pertenecen a la cabecera de la página.

Realmente una página puede tener varios elementos header, al nivel de la etiqueta body indica que su contenido es la cabecera de la página completa (por ejemplo donde se muestra el título general, logotipo,…). Pero dentro de una etiqueta, por ejemplo, article indicaría que su contenido es la cabecera del artículo.

No se puede meter un header dentro de otro header ni dentro de un elemento foot o address.

[11.2.2]elemento footer

Similar al anterior, sirve para marcar el pie de una página, sección, artículo etc. Dependiendo del contexto en el que se coloque servirá para unas cosas u otras. En el caso de un elemento footer que se coloque al nivel del elemento body, servirá para agrupar los elementos de pie de página, que suelen ser información sobre el autor, copyright, términos de uso de la página, etc.

[11.2.3]elemento section

Es un elemento que permite dividir en diferentes partes o secciones un documento. Ejemplo de página dividida en secciones:

<!DOCTYPE html>
<html lang=”es-ES”>
<head>
<meta charset=”UTF-8”>
<title></title>
</head>
<body>
<header>
<h1>Historia de HTML</h1>
<p>Desde 1989 hasta nuestros días</p>
</header>
<section id=”inicio”>
<h2>Inicios en HTML. Tim Bernes Lee</h2>
<p>.....</p>
</section>
<section id=”creacion”>
<h2>Creación de la web. Primeros navegadores
</h2>
<p>.....</p>
</section>
<section id=”guerra”>
<h2>La guerra de los navegadores</h2>
<p>.....</p>
</section>
<section id=”versiones”>
<h2>De HTML 4 a HTML 5 pasando por XHTML</h2>
<p>...</p>
</section>
<footer>
<p>Realizado por Jorge Sánchez</p>
</footer>
</body>
</html>
El atributo id no es obligatorio, pero a veces se usa con la finalidad de identificar de modo único a cada sección (por ejemplo para darle un formato especial a una sección concreta)

[11.2.4]elemento nav

Se trata de un elemento que marca a su contenido como una sección de enlaces, es decir una barra de navegación. Más adelante con CSS se puede dar un formato especial a dichos enlaces. nav se puede escribir dentro de cualquier elemento HTML de sección (como section, article, header, footer,..).

Los elementos marcados por nav pueden ser omitidos por los lectores digitales de páginas web que utilizan, por ejemplo, las personas invidentes. Lo cual facilita la comprensión del texto) y así que dicho contenido quede marcado solo para utilizar los enlaces interiores a nav.

Lógicamente dentro de nav encontramos numerosos elementos de tipo a.

[11.2.5]elemento article

Si se observan los elementos descritos anteriormente parece claro que HTML 5 utiliza como metáfora la forma de distribuir contenidos de un periódico. Así hay cabeceras, pies, secciones y, con este elemento, artículos.

La idea es colocar dentro de este elemento (que tiene sentido dentro del elemento section, o incluso aparecer de forma independiente) contenido que pueda ser entendido como un todo que describa un tema de forma íntegra.

Nuevamente el formato mediante CSS permitiría que apareciera con el estilo que deseemos.

[11.2.6]elemento hgroup

Permite agrupar varios títulos (elementos h1 a h6) dentro de esta etiqueta para darles estilo común. Se utiliza dentro de article para marcar la zona de títulos del artículo.

[11.2.7]elemento figure

Sirve para agrupar los elementos relativos a una imagen como la propia imagen (elemento img), el título de la misma, el pie, los párrafos relativos, etc.

[11.2.8]elemento figcaption

Permite indicar el título de una imagen, dentro de un elemento figure haciendo el efecto de un pie de imagen. Por defecto la imagen y el texto quedarán alineados de la misma forma.

Ejemplo de uso:

<article>
<hgroup>
<h2>
Palencia</h2>
<h3>Paisajes</h3>
</hgroup>
<figure>
<img src=”montanaPalentina.jpg”
			alt=Vista de la Montaña Palentina” 
			width=”350” height=”400”/>
</figure>
		<figcaption>
			Vista de la Montaña Palentina desde 
			Camporredondo
		</figcaption>
    <p>
Los paisajes en la provincia de Palencia.......
</p>
....

</article>

[11.2.9]elemento aside

Permite marcar texto dentro de un artículo para que no se tenga en cuenta como parte del texto del artículo, sino como un texto aparte que permite realizar aclaraciones al artículo, referencias, resúmenes remarcados y sobre todo cuadros de texto de estilo periodístico para destacar partes del artículo. Para que este texto aparezca de manera especial, debe dársele formato con CSS.

La idea es simular el típico recuadro que aparece en los periódicos en los que se expresan ideas interesantes o que resumen el artículo.

[11.2.10]elemento main

Es incluso más moderno que los anteriores. Permite indicar una sección (que podrá incluir artículos, cabeceras, títulos, párrafos, secciones de imagen,…) de forma que se entenderá que esta es la sección principal del documento.

Solo puede haber un elemento main en una página web. Se usa para diferenciar de las secciones de menú, publicidad o cualquier tipo de información en la página considerada como secundaria.

main no puede colocarse dentro de secciones de tipo article, footer, header, aside o nav. Sí se admite dentro de section, para marcar elementos principales dentro de la sección.

[11.3] elementos para acciones interactivas

[11.3.1]elementos para crear menús de contexto

46introducción

Los menús son un elemento que aparece en la mayoría de páginas web y facilitan la navegación por la página al usuario, ya que es un elemento muy reconocible por casi cualquier persona.

La creación de menús implica utilizar al menos HTML y CSS, pero es habitual añadir JavaScript a los dos lenguajes anteriores. Es, por tanto, una técnica un poco compleja de realizar.

HTML 5 ha incorporado nuevos elementos y un nuevo atributo llamado menucontext, presente en todos los elementos de HTML, para crear menús de contexto (tiene también otras posibilidades, pero esta es la fundamental). Un menú de contexto aparece cuando hacemos clic con el botón secundario del ratón sobre un elemento de la página web.

Desgraciadamente, por ahora, solo funcionan estos elementos en las últimas versiones de Mozilla Firefox. Como es posible que poco a poco las incorporen los demás navegadores, aquí se describe su funcionamiento.

47funcionamiento

La idea es que al habitual menú de contexto, podamos añadir las opciones deseadas Los pasos para el menú de contexto son estos:

[1]Cada menú requiere el uso de un elemento menu y cada opción de ese menú estará dentro de un elemento menuitem.

[2]Al elemento menu le daremos un identificador (mediante el atributo id) e indicaremos en el atributo type el valor context (eso significa menú de contexto, también tiene disponibles los valores list y toolbar, que tienen otros fines)

[3]Cada entrada deseada dentro del menú se indica con un elemento menuitem, al que se le rellenarán los atributos deseados. Este elemento se deja vacío de contenido

[4]El elemento (por ejemplo una capa) en el que deseemos utilizar el menú, usará el atributo menucontext cuyo valor será el identificador del menú.

[5]Es posible dentro de un elemento menu añadir otro elemento menu, para diseñar menús de varios niveles.

48atributos de menuitem

El elemento menuitem dispone de los siguientes atributos:

En el siguiente ejemplo se configura una página con dos párrafos. El párrafo con identificador p1 se asociará al menú de contexto pintar, menú que contiene dos entradas: Pintar de rojo y pintar de verde. Para que realmente esas opciones pinten el párrafo con esos colores, hemos añadido el código JavaScript que lo permite asociado al evento de hacer clic con el ratón en la opción de menú. El código es:

<!doctype html>
<html lang=”es”>
<head>
    <meta charset=”UTF-8”>
    <title>Menús</title>
</head>
<body>
    <p contextmenu=”pintar” id=”p1”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, sequi, fugit, numquam, rerum animi accusantium quasi necessitatibus blanditiis sint molestias sit perspiciatis cupiditate neque iste architecto fugiat ipsa deserunt tenetur.</p>
    <p>Est, asperiores, rerum, fugiat, eius at ullam fugit id odit ducimus facere in dolorem nihil ut eveniet nemo perspiciatis nam enim laborum recusandae qui a fuga sunt et sit itaque.</p>
    <menu type=”context” id=”pintar”>
        <menuitem label=”Pintar de rojo”             onclick=”document.getElementById(‘p1’).style.backgroundColor=’red’”>            
        </menuitem>
        <menuitem label=”Pintar de verde”            
onclick=”document.getElementById(‘p1’).style.backgroundColor=’green’”>           
        </menuitem>
    </menu>
</body>

El resultado es una página web que muestra dos párrafos con fondo blanco (y el texto de prueba lorem ipsum), hacer clic con el botón secundario en el segundo párrafo, el menú de contexto es el habitual; pero si hacemos clic encima del primer párrafo con el botón secundario, el menú es distinto y aporta las dos opciones programadas en el código mediante el lenguaje JavaScript.

[11.3.3]elementos para indicar secciones de tipo mostrar/ocultar

Se trata de secciones que están dentro de un elemento llamado details. Dentro de ese elemento se puede poner una sección de tipo summary la cual muestra un texto de resumen de la sección. Al hacer clic en el apartado summary, se muestra todo el contenido de la sección.

Es decir en definitiva consigue crear en un documento HTML un apartado de tipo resumen/detalle. Ejemplo:

Ejemplo:

<body>
<details>
    <summary>
        La ciudad de Palencia
    </summary>
    <p>Localidad de 80.000 habitantes situada entre 
        los Valles de Cerrato y la Tierra de Campos 
        en plena meseta castellana</p>
    <p>Más información en
     <a href=”https://es.wikipedia.org/wiki/Palencia”>
        Wikipedia-Ciudad de Palencia
     </a>
    </p>
</details>
</body>

Al abrir esa página, se mostraría:

Como se observa, solo se muestra el contenido del apartado summary. Tras hacer clic en el triángulo o en el texto, se mostraría el contenido del elemento details:

Lo malo es que solo funciona solo en las últimas versiones de Chrome, Safari y Opera (no funciona en los navegadores de Microsoft).

49element summary

Se coloca dentro del anterior. Es un texto que se puede poner en los elementos de tipo detail. Ese texto aparece en lugar del texto Detalles que aparece por defecto en una sección de tipo detail.

[11.3.4]elementos de cuadro de diálogo

Se suelen llamar cuadros de diálogo a las ventanas que los sistemas muestran a los usuarios para darles mensajes, o para permitirles configurar una determinada respuesta u operación.

En HTML 5 se ha incorporado una nueva etiqueta llamada dialog, precisamente con esta finalidad. Todavía está en fase de pruebas. El contenido del elemento dialog se muestra en un recuadro. La gracia es que desde JavaScript tiene muchas opciones de manipulación.

Hay un atributo llamado open (no se le pone valor alguno cuando se usa) que hace que se muestre el cuadro de diálogo (sin ese atributo, el cuadro no se muestra).

Ejemplo:

<dialog id=”favDialog” open>
    <form method=”dialog”>
        <section>
            <fieldset>
                <legend>Sexo</legend>
                <input type=”radio” id=”hombre” 
name=”sexo”>
                <label for=”hombre”>Hombre</label><br>
                <input type=”radio” id=”mujer” 
name=”sexo”>
                <label for=”mujer”>Mujer</label>
            </fieldset>
            <br>
            <label for=”nombre”>Nombre</label>
            <input type=”text” name=”nombre” 
id=”hombre”>
        </section>
        <menu>
            <button id=”cancel” type=”reset”>Cancelar
            </button>
            <button type=”submit”>Aceptar</button>
        </menu>
    </form>
</dialog>

Resultado:

Realmente sus principales posibilidades se consiguen combinando su uso con el lenguaje JavaScript.