<div class="container hyphenation text-justified" lang="es">
<p>Por ejemplo, el elemento de HTML h1 indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como h2. Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta h1 debía disponer de la información si se deseaba un diseño consistente para una página y, además, una persona que leía esa página con un navegador perdía totalmente el control sobre la visualización del texto.</p>
<p>Cuando se utiliza CSS, la etiqueta h1 no debería proporcionar información sobre cómo será visualizado, solamente marca la estructura del documento. La información de estilo, separada en una hoja de estilo, especifica cómo se ha de mostrar h1: color, fuente, alineación del texto, tamaño y otras características no visuales, como definir el volumen de un sintetizador de voz, por ejemplo.</p>
<p>Por otro lado, antes de que estuviera disponible CSS, la única forma de componer espacialmente una página era el uso de tablas. Aunque esta era una técnica cómoda y versátil, ello conllevaba el uso de un elemento con una semántica particular, y en el que la distribución de los datos no se ajustaban al flujo de la información que se obtenía en la vista desde los navegadores habituales, lo que redundaba en una merma en la accesibilidad a la página por parte de otros navegadores (orientados a personas con alguna deficiencia sensorial, o a ciertos dispositivos electrónicos).</p>
<p>Mediante el uso de CSS, se ha permitido eliminar el uso de tablas para el diseño, usándolas solamente para la muestra de datos tabulados, si bien es cierto que obtener la versatilidad que ofrecía el diseño con tablas, es algo más complicado si no se usan.</p>
</div>
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #eee;
}

.container {
  width: 80%;
  margin: 1em auto;
  padding: 1em 5%;
  background: #fff;
}
h1, h2 {
  margin-bottom: .5em;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.6em;
}

p {
  margin-bottom: 1em;
}
.hyphenation {
-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
}
.text-justified {
    text-align: justify;
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.