Actualizado el 14-01-2007
versión para imprimir
anidando etiquetas
Hasta ahora hemos visto que las etiquetas html suelen ir en parejas. Tambien es posible incluir unas etiquetas dentro de otras. A esto se llama anidamiento:
<b>negrita</b> <i>cursiva</i> <b><i>cursiva y negrita</i></b> <b><i>cursiva, negrita <small>y pequeña</small></i></b>
El anidamiento puede ser poniendo las etiquetas en cualquier orden, pero
siempre se ha de guardar simetría.
Esto es incorrecto:
<b><i>...</b></i>
Y esto es la forma correcta:
<b><i>...</i></b>
Finalmente hay que tener en cuenta al anidar etiquetas que un elemento in-line no puede contener un elemento block-level.
Los elementos in-line son aquellos que no interrumpen el flujo del documento, mientras que los elementos block level interrumpen el flujo del documento formando nuevos bloques. Para que te hagas una idea gráfica, por formar un nuevo bloque queremos decir que el navegador insertará siempre un salto de linea antes y despues. Por ejemplo el elemento span es un elemento inline porque puede ir dentro de un texto, sin forzar un nuevo párrafo. Por el contrario las cabeceras h1 ...6 son definidoras de bloques en cuanto siempre se insertaran en una nueva linea.
| Elementos Inline | ||||
| a | br | span | bdo | object |
| applet | img | map | iframe | tt |
| i | b | big | small | u |
| s | strike | font | basefont | em |
| strong | dfn | code | q | sub |
| sup | samp | kbd | var | cite |
| abbr | acronym | input | select | textarea |
| label | button | |||
Y los elementos block-level:
| Block Tags | ||||
| p | h1-h6 | div | ul | ol |
| dl | menu | dir | pre | hr |
| blockquote | address | center | noframes | isindex |
| fieldset | table | |||
Recuerda la regla general: un elemento block-level puede contener otros elementos block-level o elementos inline, pero un elemento inline no debe contener elementos block-level.
Ejemplo incorrecto:
<small<p>Hello!</p></small>
La etiqueta small es un elemento in-line, no puede contener un elemento p. La forma correcta es al reves, especificando el tipo de fuente dentro de cada párrafo:
<p><small>Hello !</small></p>