Suena raro. Pero tener una leve idea de qué significa puede ayudar desde el inicio de un proyecto a evitar cometer errores que invalidan las páginas una vez que continuamos el desarrollo.
Hay 3 tipos de elementos más o menos claros en la estructura del HTML:
- Block Elements (elementos de bloque).
- Inline Elements (elementos en línea).
- Paragraphs (párrafos).
Los “Block Elements” se caracterizan porque ocupan todo el espacio horizontal disponible al ser usados (y no declarar su ancho) y, aunque tengan una sola letra en su interior, producen que cualquier elemento puesto a su lado, quede en la línea siguiente, aún cuando el elemento puesto sea un “Inline Element”. En resumen, es como agregar un “break” antes y después del elemento.
Los “Block Elements” característicos en HTML + HTML5* son:
| Selector | Uso en HTML |
|---|---|
| <article>* | Contenido Artículo |
| <aside>* | Contenido Aparte |
| <blockquote> | Cita Larga |
| <body> | Cuerpo de Página |
| <br> | Salto de Línea |
| <button> | Botón |
| <canvas>* | Área de Dibujo |
| <caption> | Table Caption |
| <col> | Columna de Tabla |
| <colgroup> | Grupo de Columnas de Tabla |
| <dd> | Descripción de Definición |
| <div> | División |
| <dl> | Lista de Definiciones |
| <dt> | Término de Definición |
| <embed> | Contenido Externo |
| <fieldset> | Etiqueta de Set de Campos |
| <figcaption>* | Figure Caption |
| <figure>* | Groups Media Content and Caption |
| <footer>* | Sección o Pie de Página |
| <form> | Formulario de Entrada |
| <h1–6> | Niveles de Encabezado 1–6 |
| <header>* | Sección o Encabezado de Página |
| <hgroup>* | Grupos de Encabezados de Información |
| <hr> | Regla Horizontal |
| <li> | Ítem de Lista |
| <map> | Mapa de Imagen |
| <object> | Objeto Embebido |
| <ol> | Lista Ordenada |
| <output>* | Formulario de Salida |
| <p> | Párrafo |
| <pre> | Texto Preformateado |
| <progress>* | Muestra de Progreso de una tarea que consume tiempo |
| <section>* | Sección en una Página Web |
| <table> | Tabla |
| <tbody> | Cuerpo de Tabla |
| <textarea> | Área de Entrada de Texto de Formulario |
| <tfoot> | Pie de Tabla |
| <th> | Encabezado de Tabla |
| <thead> | Encabezado de Tabla |
| <tr> | Fila de Tabla |
| <ul> | Lista Desordenada |
| <video>* | Reproductor de Video |
Luego, están los “Inline Elements” (no se si elementos en línea me suena bien), que no tienen saltos de línea antes ni después, es decir, no tienen “breaks” asociados al elemento y se pueden poner de forma adyacente (además no ocupan todo el ancho de lugar donde se encuentran). Son:
| Selector | Uso en HTML |
|---|---|
| <a> | Enlace Anclado |
| <abbr> | Abreviación |
| <address> | Dirección Física |
| <area> | Área en un Mapa de Imagen |
| <audio>* | Contenido de Sonido |
| <bm> | Texto en Negrita |
| <cite> | Cita Corta |
| <code> | Texto de Código |
| <del> | Texto Borrado |
| <details>* | Detalles de un Elemento |
| <dfn> | Termino Definido |
| <command>* | Botón de Comando |
| <datalist>* | Lista Drop-Down |
| <em> | Énfasis |
| <font> | Apariencia de la Fuente |
| <i> | Itálica |
| <iframe> | Sub-Ventana en Línea |
| <img> | Imagen Embebida |
| <input> | Campo de Ingreso de Datos |
| <ins> | Texto Inserto |
| <kbd> | Texto de Teclado |
| <label> | Etiqueta para un Elemento de Formulario |
| <legend> | Título en un Set de Campo |
| <link> | Referencia a un Recurso |
| <mark>* | Texto Marcado |
| <meter>* | Rango de Medida |
| <nav>* | Enlaces de Navegación |
| <optgroup> | Grupo de Opciones de Formulario |
| <option> | Una Opción de un Drop-Down |
| <q> | Cita Textual Corta |
| <small> | Impresión Pequeña |
| <select> | Lista Seleccionable |
| <source>* | Recurso de Medios |
| <span> | Formato de Estilo Localizado |
| <strong> | Énfasis Fuerte |
| <sub> | Subtexto |
| <summary>* | Encabezado de Detalles |
| <sup> | Supertexto |
| <tbody> | Cuerpo de Tabla |
| <td> | Dato de Tabla |
| <time>* | Fecha/Tiempo |
| <var> | Variable |
Ahora, las reglas de contención.
- Block Elements, pueden contener otros Block Elements e Inline Elements.
- Block Elements, sólo pueden estar contenidos por otros Block Elements.
- Inline Elements, sólo pueden contener Inline Elements.
- Inline Elements, pueden ser contenidos tanto en Block como en Inline Elements.
- Párrafos, son Block Elements, pero no pueden contener otros Block Elements.
Estas 5 reglas (y un buen editor WYSIWYG, con CODESENSE) evitarán errores que terminan transformando la página completa en un documento ilegal, claro, a menos que uses HTML5 que prácticamente se las arregla solo.
Happy Design & Code!!
