Manos a la obra con ...

por ...

Lección n:

Los elementos tienen dos variantes: elementos de bloque, que marcan secciones más grandes, o bloques, dentro del documento, y elementos en línea, que son para trozos más pequeños, normalmente contenidos dentro de una línea.

El navegador web coloca nuevas líneas (piense en la tecla Enter del teclado) alrededor de los elementos de bloque para que aparezcan en su propia línea.

El siguiente código fuente:

<p>elemento p</p><div>elemento div</div>
<section>elemento section</section>
<b>elemento b</b>
<i>elemento i</i>
<span>elemento span</span>
<code>elemento code</code>
<p>elemento p</p><p>elemento p</p><p>elemento p</p>

Se representa como algo parecido a lo siguiente:

elemento p

elemento div
elemento section
elemento b elemento i elemento span elemento code

elemento p

elemento p

elemento p

Observe que los elementos de bloque se representan en su propia línea (con espacio adicional debajo del elemento p), mientras que los elementos inline están todos en la misma línea.

En las versiones antiguas de html, la distinción entre elementos de bloque y en línea era una parte firme del lenguaje html, junto con una regla que establecía que los elementos en línea debían estar encerrados dentro de un elemento de bloque para ser válidos sintácticamente.

Con html 5 esta distinción se ha relajado mucho, y es posible usar CSS para convertir un elemento dado en bloque o en línea.

Elementos de bloque

Aquí hay algunos de los elementos más comunes, y más útiles, con comportamiento predeterminado de bloque:

<p></p>
Párrafo. Probablemente la etiqueta que usted usará más a menudo, marca el principio y el fin de un párrafo de texto.
<pre></pre>
Texto preformateado. Esta es una buena etiqueta para representar ejemplos de código fuente.
<div></div>
División lógica de elementos de bloque. No tiene atributos predeterminados.
<h1></h1>...<h6></h6>
Todas las cabeceras son elementos de bloque.

Los siguientes elementos son nuevos en HTML 5:

<header></header>
Marca la sección superior, o cabecera, de una página web.
<footer></footer>
Marca la sección inferior, o pie, de una página web.
<nav></nav>
Se usa para marcar una sección de navegación.
<main></main>
Marca el área con el contenido principal del cuerpo de una página web.
<section></section>
Se usa para encerrar otros elementos que forman una sección en una página web.
<article></article>
Se usa para encerrar contenido específico, y que por si solo tiene sentido, dentro de una página web.

Elementos en línea

Aquí hay algunos de los elementos en línea más comunes juntamente con sus usos y atributos predeterminados:

<strong></strong>
Se usa para el texto que se quiere destacar, como esto.
<b></b>
Texto en negrita, como esto.
<em></em>
Aporta énfasis al texto codificado, como esto.
<i></i>
Texto en itálica, como esto.
<q></q>
Marca el incio y el fin de un texto citado, como esto.
<code></code>
Indica que el texto encerrado es código fuente, como esto.
<kbd></kbd>
Indica que el texto encerrado es una entrada del usuario desde el teclado, como esto.
<sup></sup>
Encierra un texto en superíndice, como esto.
<sub></sub>
Encierra un texto en subíndice, como esto.
<a></a>
Establece un hipervínculo a otro documento o a una localización dentro del mismo documento.
(ver Lección 6).
<span></span>
División lógica en línea. Sin atributos predeterminados.

Elementos de objetos

Estos tres elementos son especiales, porque en lugar que encerrar texto insertan objetos. Como no hay nada que contener, no tienen etiqueta de cierre:

<br>
División de línea. Esta etiqueta fuerza un retorno de carro.
<img>
Etiqueta de imagen. Se usa para mostrar una imagen. (ver Lección 7).
<hr>
Separador horizontal. Coloca una línea de separación a través de la página.

Caracteres especiales

Los elementos <, >, y & tienen significados especiales en HTML, y no pueden usarse para representarse a si mismos en un documento HTML. Cuando quiera usarlos literalmente (como en ejemplos de código HTML), necesitará marcarlos con códigos especiales:

MARCADO REPRESENTACIÓN
&lt; <
&gt; >
&amp; &
&nbsp; espacio en blanco

El marcado para un ejemplo como este:

<h2>Usando Caracteres Especiales para marcar código fuente HTML</h2>
<p>
Marcar código HTML requiere caracteres especiales para reemplazar a <, >, y &.
</p>

Se ve como esto:

&lt;h2&gt;Usando Caracteres Especiales para marcar código fuente HTML&lt;/h2&gt;
&lt;p&gt;
Marcar código HTML requiere caracteres especiales para reemplazar a &lt;, &gt;, and &amp;.
&lt;/p&gt;

No es bonito, pero funciona.

Ejercicios:

  1. Copie pagina_minima.html a una página llamada bloque.html y haga lo siguiente en el nuevo documento:
    • Establezca el título y la cabecera de primer nivel (<h1></h1>) a Elementos de bloque.
    • Cree una subsección (con un elemento <h2></h2>) etiquetada como Texto en un elemento Preformateado. Copie y pegue el siguiente texto entre las etiquetas <pre></pre>:
      Este             texto
      
              se      extiende              en        varias
      
         líneas
      
                           y             tiene             muchos
      
        espacios         en blanco              
      
      adicionales.
    • Añada un elemento de párrafo (entre etiquetas <p></p>) con texto que describa lo que ve encima.
    • Cree una subsección debajo del párrafo que ha creado en el ejercicio previo etiquetada como El Mismo Texto en un Elemento de Párrafo. Copie y pegue el mismo texto del ejercicio previo, pero póngalo dentro de un elemento de párrafo (<p></p>) en vez de en un elemento preformateado (<pre></pre>).
    • Visualice su página en su navegador. Añada un nuevo elemento de párrafo con texto que describa lo que ve.
    • Añada dos párrafos más con cualquier texto que le guste (este sería un gran momento para aprender sobre texto lorem ipsum y usarlo aquí). Ponga estos dos párrafos dentro de un elemento de división lógica (<div></div>). Mire de nuevo la página en el navegador. ¿Ha cambiado algo? Añada uno o más párrafos describiendo el efecto del div.
    Su página bloque.html completada debería verse así.
  2. Copie minimal_page.html a una página llamada inline.html y haga lo siguiente:
  3. Su página inline.html completada debería verse así.
  4. Copie minimal_page.html a una página llamada object.html. Establezca el título y la cabecera de primer nivel a Elementos Object. Experimente con los elementos <br> y <hr>. Añada un párrafo a este documento describiendo qué hacen. Utilice algunos párrafos más con la letra de una de sus canciones favoritas, usando elementos <br> para insertar nuevas líneas en los lugares adecuados.

    Su página object.html completada podría verse como algo parecido a esto.

  5. Copie minimal_page.html a una página llamada special.html. Establezca el título y la cabecera de primer nivel a Caracteres Especiales. Añada los párrafos siguientes a su documento:

    Imagen de un párrafo con caracteres especiales

    Para hacerlo necesitará utilizar caracteres especiales.

  6. Compruebe su página con el Servicio de validación del W3C. Si su página tiene errores sintácticos, corríjalos.