1.5. Semántica HTML5

Un sitio web es un conjunto de tecnologías que operan entre sí. HTM5 (por sus siglas en inglés Hyper Text Markup Languaje versión 5 es el principal lenhuaje para desarrrollar estos sitios, de la mano de lenguajes como hojas de estilo en cascada (CSS Cascading Style Sheets por sus siglas en inglés), JavaScript y XML (por sus siglas en inglés Extensible Markup Languaje).

Hasta el momento de escribir está página Enero 2016, HTML5 no es un estándar y cada navegador implementa partes de dicha propuesta, inclusive de diferente manera. Sin embargo es un estándar de facto. es decir, se trata de una norma generalmente aceptada y ampliamente utilizada por iniciativa propia de un gran número de interesados.

La idea de html5 es darle semántica a nuestro código, es decir, dar significado al mismo. Para lo cual introduce los siguientes elementos.


TagDescripción
<header> Define una región encabezado o header de una página o de una sección.
<footer>Define una región pie de página o footer de una página o de una sección.
<nav>Define una región de navegación de una página o de una sección.
<section>Define una región lógica de una página o un grupo de contenido.
<article>Define un artículo o una pieza completa de contenido.
<aside>Representa el contenido que es tangencialmente relacionado con el contenido le rodea. Por lo general contiene barras laterales , publicidad, enlaces relacionados, etc.

La siguiente imagen representa una maquetación en HTML6:


Ejemplo:Usaremos CSS para crear este posicionamiento.

<!doctype html>
<html lang='es-es'>
<head>
  <meta charset="utf-8">
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Bola</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Abril 26, 2016' /> 
  <link href='bola.css' rel="stylesheet">
</head>
<body>
<header><img alt='' class="izq" src="http://www.prograweb.com.mx/pweb/ejecutables/images/perro01i.jpg">
<h2>BOLA</h2>
</header>
<aside><ul>
    <li><a href="#">Arroz con Pollo</a></li>
    <li><a href="#">Coquetas</a></li>
    <li><a href="#">Pastel Bola</a></li>
    <li><a href="#">Aventura Vegetariana</a></li>
    <li><a href="#">Bocaditos del Mar</a></li>
</ul>
</nav></aside>
<section>
<p><b>Bola</b> destaca por muchas cosas: por sus productos 100% naturales, por la pasión que su creadora imprime a todos sus productos, y por atender a un público de diferente especie a la humana, así es <b>Bola</b> es la primera pastelería que piensa en el paladar canino y felino, también se preocupa por deleitar a nuestras mascotas con galletas y pastelería gourmet de alta calidad llena de sabor.</p>

<p><b>Bola</b> no es otra pastelería más, en esta pastelería especializada se preocupan tanto por los ingredientes como las formulas para que sean aptas y no dañen la salud de nuestras mascotas, es más hasta nosotros podríamos deleitarnos con el rico pastel o las diferentes galletas, el chiste esta en atreverse a probarlas y por supuesto consentir a nuestras mascotas en una ocasión especial como su cumpleaños, o porque no, por el simple hecho de agasajarlos.</p>
<p class='centrado'><img alt='' src='http://www.prograweb.com.mx/pweb/ejecutables/images/perroLogo.jpg'></p>
<p>Su creadora, ha desarrollado recetas especializadas para consentir a nuestros amigos con ayuda de expertos veterinarios que aprueban cantidades e ingredientes, asegurándonos siempre su bienestar.</p>

<p>Bola también tiene productos para la especie humana, ya sean cupcakes, gelatinas o manzanas cubiertas, ofrece una alternativa para todos. Con ingredientes naturales y de alta calidad ya sea para la línea de mascotas o los productos para personas, Bola busca satisfacer completamente a todos sus clientes.</p>
</section>
<footer>
  <p class='centrado'>© epacheco@hotmail.cpm</p>
</footer>
</body>
</html>
img {border: 0px;}
    img.izq { float:left;}
    img.der { float:right;}
    h2 { color: red; text-align:center}
    
body {
    font: 16pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
    margin: 0 auto;
  width: 80%;
}

header, section, article, aside, footer{
    display: block;}   
aside{
  float: left;
  margin: 0 0 20px 0;
  min-height: 480px;   
  width: 25%;
}
footer{   
  background:red;
  color: white;
  clear:both !important;
  font-size: 16px;
  font-weight:bold;
  height: 80px;
  margin: 0 auto;
  width:90%;
}
header {
    height: 60px;   
}
p { text-align: justify;}

p.centrado { margin: 0 auto;
text-align:center}
section {
  border-left: 2px dotted #b2a497;
  float: right;
  font-size: 16px;
  margin: 0 0 20px 0px;   
  text-align: justify;
  width: 70%;
}​

El código anterior fue probado en Internet Explorer 11, Opera 34, Safari 5.1.7 y Google Chrome Versión 47.0.2526.111 m (64-bit).

Observe el código CSS y note el elemento display es la propiedad más importante para controlar estructuras. Cada elemento tiene un valor de display por defecto dependiendo de que tipo de elemento sea. El valor por defecto para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea).

El div es el elemento block-level estándar. Un elemento block-level comienza en una nueva línea y se estira hasta la derecha e izquierda tan lejos como pueda. Otros elementos block-level muy comunes son p, form, header, footer y section.

Una de las mejores cosas de CSS es su capacidad de posicionar el contenido y los elementos de una página en casi cualquier forma imaginable, con lo que la estructura de nuestros diseños y contenidos son más digeribles.

Hay unos cuantos tipos diferentes de posicionamiento dentro de CSS, y cada uno tiene su propia aplicación.

Posicionamiento con float

float es una propiedad versatil que permite posicionar un elemento generalmente a la izquierda o a la derecha. Note que en el código anterior aside flota a la izquierda mientras que el elemento section flota a la derecha