Web.HTML.Otras Etiquetas.

Published in

Enredando con la WEB.

4 min readSep 6, 2016

Estructura de una página web.

En HTML4 existían formas para poder estructurar la página web, es decir, se usaban estructuras para definir, un pie de página por ejemplo con la etiqueta <div>:

<div id="menu">
<div id="encabezado">
<div id="pie">

De esta forma se le dividía la página en partes y a primera vista se entendía mejor el código y la estructura de la página. En la actualidad, HTML5 lo hace de otra forma más sencilla con etiquetas nuevas:

Section.

Esta etiqueta sirve para dividir en secciones una página web. Una página web normalmente podría ser dividido en introducción, contenido, e información de contacto.

<!DOCTYPE html>
<html>
<body><section>
  <h1>Solo.</h1>
  <p>Desde el tiempo de mi infancia no he sido como otros eran, no he visto como otros veían, no pude traer mis pasiones de una simple primavera. De la misma fuente no he tomado mi pesar, no podría despertar mi corazón al júbilo con el mismo tono; Y todo lo que amé, lo amé Solo.</p>
</section><section>
  <h1>Sueños.>
  <p>¡Ojalá mi joven vida fuese un sueño duradero! Y mi espíritu yaciera hasta que el rayo certero De la eternidad presagiara el nuevo día. ¡Sí! Aunque el largo sueño fuese de agonía Siempre sería mejor que estar despierto Para quien tuvo, desde su nacimiento
En la frágil tierra, el corazón Prisionero del caos de la pasión.</p>
</section></body>
</html>

Article.

Esta etiqueta sirve para especificar un contenido que se pueda leer de forma independiente de una página web, como puede ser la entrada de un blog, el recorte de un periódico, el post de un foro..etc.

<article>
  <h1>Edgar Allan Poe</h1>
  <p>Boston, Estados Unidos, 19 de enero de 1809-Baltimore, Estados Unidos, 7 de octubre de 1849. Fue un escritor ,poeta, crítico y periodista romántico estadounidense, generalmente reconocido como uno de los maestros universales del relato corto, del cual fue uno de los primeros practicantes en su país...</p>
</article>

Header.

Define el encabezado de una página o un documento. Sirve para la presentación del contenido de la página. Se puede tener en una misma página varios encabezados.

<article>
  <header>
    <h1>Edgar Allan Poe.</h1>
    <p>El Cuervo:</p>
  </header>
  <p> Una vez, al filo de una lúgubre media noche, mientras débil y cansado, en tristes reflexiones embebido, inclinado sobre un viejo y raro libro de olvidada ciencia, cabeceando, casi dormido, oyóse de súbito un leve golpe, como si suavemente tocaran, tocaran a la puerta de mi cuarto. “Es —dije musitando— un visitante
tocando quedo a la puerta de mi cuarto. Eso es todo, y nada más.”.</p>
</article>

Footer.

Esta etiqueta se refiere un pie de página de un documento o sección. Contiene normalmente el autor del documento, la información de copyright, enlaces a términos de uso, información de contacto, acerca de…etc.

<footer>
  <p>Escrito por: BeneZor79</p>
  <p>Contacto: <a href="mailto:ismaelroyano79@outlook.com">
  ismaelroyano79@outlook.com</a>.</p>
</footer>

Nav.

Esta etiqueta se utiliza para hacer un menú de navegación mediante links o enlaces, es decir, un menú principal por ejemplo.

<nav>
  <a href="https://www.google.es">Google</a> |
  <a href="https://www.bing.com>Bing</a> |
  <a href="https://www.es.yahoo.com">Yahoo</a> |
  <a href="https://www.yandex.com">Yandex</a>
</nav>

Aside.

Esta etiqueta representa una sección de una página que tiene relación con el contenido que está mostrando la pagina web y que podría ser considerado por separado de ese contenido. Se suelen usar a menudo como barras laterales y también llamadas Sidebar.

<p>Mi familia visitó Isla mágica este verano..</p>

<aside>
  <h4>Isla Mágica.</h4>
  <p>Parque de atracciones Isla mágica, Sevilla, España.</p>
</aside>

Otras Etiquetas.

<figure> y <figcaption>.

Esta etiqueta sirve para dar un comentario que logre explicar el contenido visual que se exponga.

<figure>
  <img src="http://www.elresumen.com/biografias/fotos/edgar_allan_poe.jpg" alt="Edgar Allan Poe" width="150" height="180">
  <figcaption>Fig1. - Edgar Allan Poe (1809-1849).</figcaption>
</figure>

<details>.

Esta etiqueta sirve para ocultar o mostrar el texto en una página de forma, que al hace clic lo muestra o lo oculta.

<details>
  <summary>Edgar Allan Poe.</summary>
  <p> - Edgar Allan Poe (1809-1849) fue un escritor, poeta, crítico y periodista romántico estadounidense,generalmente reconocido como uno de los maestros universales del relato corto, del cual fue uno de los primeros practicantes en su país..</p>
</details>

sumary. Aquí se debe indicar el título del texto que se va a ocultar, es decir, cuando el texto está oculte y se quiera mostrar habrá que hacer clic en el texto que aparezca en esta etiqueta.

<progress>.

Permite crea una barra de progreso especificando datos mínimos, máximos y valor actual.

Estado: <progress min="0" max="100" value="35">
</progress>

Cursor.

Se puede establecer un estilo de cursor cuando se pasa el ratón sobre un elemento. Por ejemplo, se puede puede cambiar el cursor en forma de mano, icono, icono de ayuda, etc…, en lugar de utilizar el puntero por defecto. Un ejemplo:

<span style="cursor:help;">
   ¿Necesitas Ayuda?
</span>

En este ejemplo, se crea un texto dentro de la etiqueta <span>. En el estilo se usa la propiedad cursor y el icono que se vaya a utilizar, separándolo mediante dos puntos(:).

El efecto que resulta, es que al pasar el ratón por encima del texto que haya dentro de la etiqueta <span>, muestra el icono de la ayuda. Existen muchos otros tipos de iconos que se puede usar:

Romper Palabras.

La propiedad word-wrap permite que las palabras largas puedan ser rotas de forma que pase a la línea siguiente. Un ejemplo:

p {
   width: 210px; 
   height: 100px;
   border: 1px solid #000000;
   word-wrap: break-word;
}

En este ejemplo se envuelve el párrafo en un cuadrado de 210x100 píxeles. Lo que se consigue con la instrucción word-wrap: break-word es pasar una palabra larga que pueda salirse del recuadro, a la línea siguiente.

Si se elimina la última instrucción, observar el resultado y la diferencia que pueda haber.