antoiba86
/
html5
geforkt von jorgesumle/referencia-html


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
							.. 4.3

=======================
Secciones
=======================

El elemento ``body``
====================

Representa el contenido de un documento HTML. Sólo puede haber un elemento
``<body>`` en un documento.

El elemento ``<body>`` expone como atributos de contenidos del controlador
de eventos un número de manejadores de eventos del objeto Window.

Los controladores de eventos ``onblur``, ``onerror``, ``onfocus``, ``onload``,
``onresize`` y ``onscroll`` del objeto **Window**, expuestos en el elemento
``body``, reemplazan los manejadores de eventos genéricos por los mismos
nombres normalmente admitidos por los elementos HTML.

  .. code-block:: html

   <!DOCTYPE html>
   <html lang="en">
    <head>
    <title>Comprobar estado navegador</title>
    <script>
      function update(online) {
        document.getElementById('status').textContent = online ? 'Online' : 'Offline';
      }
    </script>
    </head>
     <body ononline="update(true)"
           onoffline="update(false)"
           onload="update(navigator.onLine)">
       <p>You are : <span id="status">(Unknown)</span></p>
     </body>
   </html>

En este ejemplo podemos ver como se le asocia a los distintos eventos
**ononline**, **onoffline** un metodo predefinido por el programador el cual
recibe por parametro un valor booleano y mediante la propiedad **onLine** del
objeto ``navigator`` muestra en la etiqueta ``<span>`` si el navegador
esta conectado a internet.

El elemento ``article``
=======================

El elemento de ``<article>`` representa una composición completa o autónoma
en un documento, una página, una aplicación o un sitio web. Esto podría ser una
revista, un periódico, un artículo técnico o académico, un ensayo o informe,
un blog u otro mensaje de medios sociales.

Cada ``<article>`` debe ser identificado, típicamente incluyendo un encabezado
elemento (``<h1>``, ``<h2>``...) como un elemento hijo del elemento del
``<article>``.

  .. code-block:: html

     <article>
       <header>
         <h2><a href="https://www.w3.org/TR/html51/">Indice de contenidos</a></h2>
         <p>Posteado el Domingo, 1 Enero 2017 por Raul Vela Salas.
         <a href="https://www.w3.org/TR/html51/sections.html#sections">Ejemplo de secciones</a></p>
       </header>
       <p>En esta parte podemos encontrar todo tipo de elementos y referencias relacionado con las secciones
          de la version mas reciente de HTML 5.1 , es por ello que es importante tenerla de referencia</p>
       <p><a href="https://www.w3.org/TR/html51/index.html#contents/">Continúa leyendo más sobre este tema</a></p>
     </article>

El elemento ``section``
=======================

.. image:: imagenes/bodyStructureSection.png

El elemento ``<section>`` representa una sección genérica de un documento o aplicación.
Una ``<section>`` en este contexto es una agrupación temática de contenido.
Cada ``<section>`` debe identificarse, típicamente incluyendo un encabezado del
elemento ``<h1>``-``<h6>`` como hijo del elemento de la sección.

  .. code-block:: html

     <article>
       <header>
         <h2>Manzanas</h2>
         <p>¡Sabrosa, deliciosa fruta!</p>
       </header>
       <p>La manzana es la fruta pomácea del manzano.</p>
       <section aria-label="Manzanas rojas.">
         <h3>Delicionas Rojas</h3>
         <p>Estas manzanas rojas brillantes son las más comunes que se encuentran en muchos supermercados.</p>
       </section>
       <section aria-label="Manzanas verdes.">
         <h3>Granny Smith</h3>
         <p>Estas jugosas manzanas verdes hacen un gran relleno para pasteles de manzana.</p>
       </section>
     </article>

El elemento ``nav``
===================

.. image:: imagenes/bodyStructureNav.png

El elemento ``<nav>`` representa una sección de una página que enlaza con otras
páginas o con partes de la página. Es una sección con vínculos de navegación.

  .. code-block:: html

     <body>
       <h1>Ejemplo de la etiqueta nav</h1>
         <nav>
           <ul>
             <li><a href="/">Principal</a></li>
             <li><a href="/events">Eventos Actuales</a></li>
           </ul>
         </nav>
       <article>
         <header>
           <h2>Ejemplo de nav</h2>
           <p>Creado por R.V.S.</p>
         </header>
           <nav>
           <ul>
             <li><a href="#publico">Demostracion Pública </a></li>
             <li><a href="#destruir">Destruir</a></li>
           </ul>
           </nav>
           <div>
             <section id="publico">
               <h2>Demostracion Pública</h2>
               <p>...mas contenido...</p>
              </section>
             <section id="destruir">
               <h2>Destruir</h2>
               <p>...mas contenido...</p>
             </section>
           </div>
         <footer>
           <p><a href="?editar">Editar</a> | <a href="?delete">Borrar</a> | <a href="?Rename">Renombrar</a></p>
         </footer>
       </article>
       <footer>
         <p><small>Ejemplo proporcionado por HTML 5.1</small></p>
       </footer>
     </body>

El elemento ``aside``
=======================

.. image:: imagenes/bodyStructureAside.png

El elemento ``<aside>`` representa una sección de una página que consiste en
contenido que está relacionado con el contenido principal de la sección del elemento
padre y que podría considerarse por separado de ese contenido principal.
Las secciones se representan a menudo como barras laterales.

El elemento se puede utilizar para efectos tipográficos como barras laterales,
para publicidad, para grupos de elementos de navegación y para otros contenidos
que se consideran separados del contenido principal.

  .. code-block:: html

     <body>
       <header>
         <h1>Mi maravilloso blog/h1>
         <p>Mi linea principal</p>
       </header>
       <aside>
       <!-- Este apartado contiene dos secciones que están tangencialmente relacionadas
            con la página, enlaces a otros blogs, y enlaces a posts
            de este blog -->
       <nav>
         <h2>Mi enlace a otros blogs</h2>
         <ul>
           <li><a href="https://www.example.com//">Ejemplo de Enlace a un Dominio</a>
         </ul>
       </nav>
       <nav>
         <h2>Archivos</h2>
         <ol reversed>
           <li><a href="/last-post">Mi ultima publicacion</a>
           <li><a href="/first-post">Mi primera publicacion</a>
         </ol>
       </nav>
       </aside>
       <aside>
         <!-- Este ``aside``  es tangencialmente relacionado con la página también,
            contiene mensajes de twitter desde el autor del blog -->
         <h2>Twitter</h2>
         <blockquote cite="https://twitter.example.net/t31351234">
         Estoy de vacaciones , escribiendo en mi blog
         </blockquote>
         <blockquote cite="https://twitter.example.net/t31219752">
         Me iré de vacaciones pronto..
         </blockquote>
       </aside>
       <article>
       <!-- Esto es una publicacion de blog -->
         <h2>Mi ultima publicacion</h2>
         <p>Este es mi ultima publicacion</p>
       <footer>
         <p><a href="/last-post" rel=bookmark>Permalink</a>
       </footer>
       </article>
       <article>
       <!-- Este tambien es mi ultima publicacion de blog -->
         <h2>Mi primera publicacion</h2>
         <p>Esta es mi primera publicacion.</p>
       <aside>
        <!-- Este aparte es sobre la publicación del blog, ya que es dentro del elemento
         <article>; sería erróneo, por ejemplo, poner el blogroll desde
         aquí, ya que el blogroll no es realmente relacionado con este post
         en concreto, sólo a la página como un todo -->
         <h1>Publicando</h1>
         <p>Mientras estoy pensando esto, quería decir algo sobre
           que publicar. ¡Publicar es divertido!</p>
       </aside>
       <footer>
         <p><a href="/first-post" rel=bookmark>Permalink</a>
       </footer>
       </article>
       <footer>
         <nav>
           <a href="/archives">Archivos</a>
           <a href="/about">Sobre mi</a>
           <a href="/copyright">Copyleft</a>
         </nav>
       </footer>
     </body>

Los elemento ``h1``, ``h2``, ``h3``, ``h4``, ``h5`` y ``h6``
============================================================

Estos elementos representan **encabezados** para sus secciones.

Estos elementos tienen un **rango** dado por el número que acompaña a su nombre.
El elemento ``<h1>`` tiene el rango **más alto**, el elemento ``<h6>`` tiene el rango
**más bajo**, y dos elementos con el mismo nombre tienen mismo rango.

  .. code-block:: html

     <body>
       <h1>Más alto nivel de rango del encabezado</h1>
       <section><h2>Segundo nivel de encabezado</h2>
       <section><h3>Tercer nivel de encabezado</h3>
       <section><h4>Cuarto nivel de encabezado</h4>
       <section><h5>Quinto nivel de encabezado</h5>
       <section><h6>Sexto nivel de encabezado</h6>
       </section>
       </section>
       </section>
       </section>
       </section>
     </body>

El elemento ``header``
======================

.. image:: imagenes/bodyStructureHeader.png

El elemento ``<header>`` representa un grupo de ayudas introductorias
o de navegación. Puede contener algunos elementos de encabezado, pero también
otros elementos como un logo, una sección que aglutine secciones de encabezados,
una formulario de búsqueda o cosas parecidas.

Cuando el ancestro más cercano como las secciones de contenido ``<article>``
``<aside>`` ``<nav>`` ``<sectiono>`` o de la secciones de raiz ``<blockquote>``
``<body>`` ``<details>`` ``<fieldset>`` ``<figure>`` ``<td>`` son un elemento
del ``<body>``, entonces es aplicado a toda la página.

  .. code-block:: html

   <!DOCTYPE html>
   <html>
     <head>
       <title></title>
     </head>
     <body>
       <header>
         <h1>Graficos Vectoriales Escalables (SVG) 1.2</h1>
         <p>W3C 2017</p>
         <dl>
           <dt>Actual versión:</dt>
           <dd><a href="https://www.w3.org/TR/2004/WD-SVG12-20041027/">https://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
           <dt>Anterior version:</dt>
           <dd><a href="https://www.w3.org/TR/2004/WD-SVG12-20040510/">https://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
           <dt>Anterior version de SVG 1.2:</dt>
           <dd><a href="https://www.w3.org/TR/SVG12/">https://www.w3.org/TR/SVG12/</a></dd>
           <dt>La última recomendación de SVG :</dt>
           <dd><a href="https://www.w3.org/TR/SVG/">https://www.w3.org/TR/SVG/</a></dd>
           <dt>Editor:</dt>
           <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
           <dt>Autor:</dt>
           <dd>Ver <a href="#authors">Lista de autores</a></dd>
         </dl>
         <p class="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notic"></a></p>
       </header>
     </body>
   </html>

El elemento de ``header`` no secciona el contenido: **no introduce una nueva sección**.

El elemento ``footer``
======================

.. image:: imagenes/bodyStructureFooter.png

El elemento ``<footer>`` de una página representa un pie de página para su seccion
de contenido del antepasado más cercano o del elemento raíz seccionado. Un pie de
página normalmente contiene información sobre su sección, como quién la
escribió, enlaces a documentos relacionados, datos de copyright y similares.

Cuando el elemento ``<footer>`` de la página contiene secciones enteras,
representan apéndices, índices, colofones largos, acuerdos de licencia detallados
y otros contenidos similares.

Los elementos ``<footer>`` no necesariamente tienen que aparecer al final de una
sección, aunque normalmente lo hacen.
El elemento ``<footer>`` no secciona el contenido: no introduce una nueva sección.

  .. code-block:: html

     <body>
       <footer><a href="../">Regresa al Indice...</a></footer>
       <div>
       <h1>Lorem ipsum</h1>
       <p>The ipsum of all lorems</p>
       </div>
       <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
        ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.</p>
       <footer><a href="../">Regresa al Indice..</a></footer>
     </body>

Algunos diseños de sitios web tienen lo que a veces se conoce como **fat footer**
, ``footer`` de página que contienen una gran cantidad de material, incluyendo
imágenes, enlaces a otros artículos, enlaces a páginas para enviar comentarios,
En algunos aspectos, una 'página de inicio' completa en el pie de página.

  .. code-block:: html

       <body>
         <!-- Contenido... -->
         <footer>
           <nav>
           <section>
           <h2>Articulos</h2>
           <p><img src="/https://images.template.net/wp-content/uploads/2014/09/Gym-Logo-E-G.jpg" alt="Elite Gym logo" width="50">
                        ¡Ir al gimnasio con nuestra clase de saltos mortales!<br> Nuestro maestro Jim <br>
                         te lleva a través de los pasos en este artículo en dos partes. <a href="articles/somersaults/1">Parte1</a>
                         · <a href="articles/somersaults/2">Parte 2</a></p>
           <p><img alt="Crossfit performance" src="https://image.freepik.com/free-vector/logo-for-a-gym_1195-54.jpg" width="50"> Cansado de caminar en el borde ?<br>
                        Nuestra escritora invitada Lara le enseña a caminar a través de las barras.. <a href="articles/kindplus/1">Leermas...</a></p>
           <p><img alt="chips" src="http://www.molomart.com/uploads/images/chips.png" width="120"> Abandona las patatas fritas , engordar una barbaridad  <a href="articles/crisps/1">Leer mas...</a></p>
           </section>
           <ul>
             <li> <a href="/about">Sobre nosotros...</a>
             <li> <a href="/feedback">Envia feedback!</a>
             <li> <a href="/sitemap">Sitemap</a>
           </ul>
           </nav>
           <p><small>Copyright © 2015 El Snacker —      <a href="/tos">Terminos del servicio</a></small></p>
         </footer>
       </body>

El elemento ``address``
=======================

El elemento de ``<address>`` representa la información de contacto de su antecesor
``<article>`` o elemento de ``<body>`` más próximo. Si ese es el elemento del
``<body>``, entonces la información de contacto se aplica al documento como un todo.

  .. code-block:: html

   <address>
     <a href="../gente/Raul/">Raul Vela Salas</a>,
     <a href="../gente/Jorge/">Jorge Maldonado Ventura </a>,
     Contactar con las personas <a href="activismo">W3C HTML activismo</a>
   </address>

``Encabezamientos`` y ``secciones``
===================================

Los elementos ``<h1>``-``<h6>`` son encabezados.

El primer elemento del contenido del encabezado en un elemento de seccion de
contenido que representa el encabezado para esa sección.

Los encabezamientos posteriores de rango son iguales o superiores y comienzan
nuevas secciones **implícitas**, los encabezamientos de menor rango comienzan
subsecciones que son parte de la anterior. En ambos casos, el elemento
representa el encabezado de la sección implícita.

Los elementos ``<h1>``-``<h6>`` no deben usarse para subrayar subtítulos, títulos
alternativos y etiquetas de linea a menos que se prevea que sean el encabezado
de una nueva sección o subsección. En su lugar utilice los patrones de marcado.
Lenguajes comunes sin elementos dedicados sección de la especificación.

Se dice que ciertos elementos están en las secciones de las raíces, incluyendo los
elementos ``<blockquote>`` y ``<td>``. Estos elementos pueden tener sus propios
contornos, pero las secciones y encabezamientos dentro de estos elementos no
contribuyen a los contornos de sus ancestros como son
``<blockquote>`` , ``<body>`` , ``<details>`` , ``<fieldset>`` , ``<figure>`` , ``<td>``

Las secciones de elementos de contenido siempre se consideran subsecciones de su
raíz ancestro más cercano o de su elemento ancestro más cercano al contenido de
sección, independientemente de qué secciones implícitas podrían haber creado otros títulos.

  .. code-block:: html

     <body>
       <h1>Foo</h1>
         <h2>Bar</h2>
       <blockquote>
         <h3>Bla</h3>
       </blockquote>
       <p>Baz</p>
         <h2>Quux</h2>
       <section>
         <h3>Thud</h3>
       </section>
         <p>Grunt</p>
     </body>

La estructura sería:

**Foo** (encabezamiento de la sección explícita del cuerpo, que contiene el párrafo 'Grunt')

**Bar** - Partida que comienza la sección implícita, que contiene una cita de bloque y el párrafo **Baz**
**Quux** - No hay contenido aparte del encabezado
**Thud** - Título de sección explícita
**Observe** - La sección termina en una sección implícita anterior de modo que un párrafo posterior **Grunt** vuelve al nivel superior.

Otro ejemplo muestra la forma correcta de editarlo

  .. code-block:: html

     <body>
       <h1>Apples</h1>
       <p>Apples are fruit.</p>
       <section>
         <h2>Taste</h2>
         <p>They taste lovely.</p>
       <section>
         <h3>Sweet</h3>
         <p>Red apples are sweeter than green ones.</p>
       </section>
       </section>
       <section>
         <h3>Color</h3>
         <p>Apples come in various colors.</p>
       </section>
     </body>