Fue allí que el elemento <div> comenzó a dominar la escena. Con el surgimiento de webs más interactivas y la integración de HTML, CSS y Javascript, utilizar el elemento <div> para estructurar el cuerpo de las páginas web, se volvió una practica común que incluso hoy día sigue siendo bastante utilizada. Pero este elemento, al igual que <table> no dan mucha información respecto a la parte del cuerpo que está representando. Practicamente cualquier cosa puede ir entre las etiquetas de un <div>, en pocas palabras, un <div> es una división en el cuerpo de una página, al igual que la celda de una tabla, pero no provee ninguna información concreta sobre que clase de división es o cual es su propósito, salvo los atributos de identificación (id) y clase (class) que estudiaremos más adelante.
Para el usuario corriente de un sitio, esta información no es importante, pero hoy día para la mayoría de los navegadores e incluso los motores de búsqueda y el posicionamiento SEO, vaya que lo es, además que de existir, a los programadores nos resultaría bastante útil pues facilitaría bastante el diseño y el mantenimiento de los sitios.
Para nuestra suerte, HTML5 incorpora nuevos elementos que ayudan a identificar cada sección del documento y organizar el cuerpo del mismo. En HTML5 las secciones más importantes son diferenciadas y la estructura principal ya no depende más de los elementos <table> o <div>, válgame la cuña.
Como usemos estos elementos depende completamente de nosotros, pero las palabras clave otorgadas nos ayudan a entender sus funciones. Normalmente una página o aplicación web, está dividida en diferentes secciones visuales para ayudar a la interactividad y mejorar la experiencia del usuario. Las palabras claves asignadas a los nuevos elementos de HTML5 estan íntimamente relacionadas con esas áreas como ya veremos, pero primero observa la siguiente imagen:
Para el usuario corriente de un sitio, esta información no es importante, pero hoy día para la mayoría de los navegadores e incluso los motores de búsqueda y el posicionamiento SEO, vaya que lo es, además que de existir, a los programadores nos resultaría bastante útil pues facilitaría bastante el diseño y el mantenimiento de los sitios.
Para nuestra suerte, HTML5 incorpora nuevos elementos que ayudan a identificar cada sección del documento y organizar el cuerpo del mismo. En HTML5 las secciones más importantes son diferenciadas y la estructura principal ya no depende más de los elementos <table> o <div>, válgame la cuña.
Como usemos estos elementos depende completamente de nosotros, pero las palabras clave otorgadas nos ayudan a entender sus funciones. Normalmente una página o aplicación web, está dividida en diferentes secciones visuales para ayudar a la interactividad y mejorar la experiencia del usuario. Las palabras claves asignadas a los nuevos elementos de HTML5 estan íntimamente relacionadas con esas áreas como ya veremos, pero primero observa la siguiente imagen:
Cabecera o Header: es el lugar en el que usualmente se colocan el logo, titulo, alguna pequeña descripción de la página, y en otros casos también enlaces para ingresar al sitio o buscadores.
Barra de navegación o Nav: Es donde se colocan los enlaces más importantes para facilitar la navegación por todo el sitio.
Principal o Main: Es donde se centra el contenido de la página.
Barra lateral o Aside: su uso es bastante flexible y varía según el sitio web. También es importante tener en cuenta que su uso no es obligatorio.
Pie de página o Footer: contiene información sobre los derechos de autor y el tipo de licencia además de contener enlaces de navegación por el sitio.
Para nuestro proyecto utilizaremos en principio esa estructura para nuestra página y en este capítulo veremos cómo llevar esa estructura al navegador utilizando el elemento div y los nuevos elementos de HTML5.
<!DOCTYPE html>
<html lang=”es-ES”>
<head>
<meta charset=”utf-8” />
<title>Proyecto</title>
</head>
<body>
<!—Cabecera-->
<div id=”header”>
</div>
<!—Menu-->
<div id=”nav”>
</div>
<!—Principal-->
<div id=”main”>
</div>
<!—Barra lateral-->
<div id=”aside”>
</div>
<!—Pie de página-->
<div id=”footer”>
</div>
</body>
</html>
<div>
Como ya sabemos, el elemento <div> sirve para dividir en secciones el cuerpo de la pagina, es el contenedor genérico: un elemento a nivel de bloque sin sentido adicional semántico.El atributo id es el que identifica a un elemento, esto significa que el valor de ese atributo no puede ser duplicado, lo que puede dificultar el mantenimiento en un sitio relativamente complejo pues estos identificadores, como veremos más adelante, se utilizan también para referenciar los elementos en CSS y Javascript. De momento omitamos lo de los identificadores y vayamos directamente a los nuevos elementos de HTML5 que utilizaremos para el mismo fin.
<!DOCTYPE html>
<html lang=”es-ES”>
<head>
<meta charset=”utf-8” />
<title>Proyecto</title>
</head>
<body>
<!—Cabecera-->
<header>
</header>
<!—Menu-->
<nav>
</nav>
<!—Principal-->
<main role="main">
</main>
<!—Barra lateral-->
<aside>
</aside>
<!—Pie de página-->
<footer>
</footer >
</body>
</html>
<header>
Contiene información introductoria sobre la página web o alguna sección específica y no debe ser confundido con el elemento <head>.<nav>
Como vengo diciendo desde el principio de este tutorial, las nuevas etiquetas de HTML5 tienen sentido semántico y por lo tanto no es necesario explicar a profundidad para que es cada elemento. Es obvio que el elemento <nav> hace referencia a la barra de navegación del sitio.<main>
Este elemento representa el contenido principal del cuerpo del documento o aplicación. El área principal del contenido consiste en el contenido que está directamente relacionado, o se expande sobre el tema central de un documento o la funcionalidad central de una aplicación. Este contenido debe ser único al documento, excluyendo cualquier contenido que se repita a través de un conjunto de documentos.Al ser un elemento recién prepuesto, su soporte es bastante escaso, sólo las últimas versiones de Chrome y Firefox, sin embargo puedes usar el atributo role para declarar que el propósito de este elemento es precisamente ese: main.
Aquí también podríamos utilizar el elemento <section>
<section role="main">
</section>
<section>
representa una sección genérica de un documento. Sirve para determinar qué contenido corresponde a qué parte de un esquema.<aside>
Representa una sección de la página que está relacionada con el contenido que le rodea pero que podría ser considerado independiente de ese contenido. Usualmente se utiliza para colocar barras laterales que contienen publicidad, widgets, información del autor, etc.<footer>
representa un pie de página para el contenido de sección más cercano. Un pie de página típicamente contiene información acerca de el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.En el próximo capítulo estaremos diseñando nuestra primera página e iremos viendo sección por sección, otros elementos de HTML y nos introduciremos en el mundo de css para estilizar nuestros sitios web.
Hasta la próxima.
No hay comentarios:
Publicar un comentario