En tutoriales anteriores de Web Page Teaching Network, se ha enfatizado muchas veces en hacer que los archivos HTML de las páginas web sean semánticos. Deberíamos elegir las etiquetas HTML o XHTML más adecuadas en función de la estructura del documento HTML de la página web, en lugar de seleccionarlas en función de su apariencia. Utilice la etiqueta P para definir un párrafo en lugar de utilizarla para obtener un efecto de salto de línea. Usamos etiquetas h1-h6 para marcar títulos, en lugar de usarlas para lograr tamaño de texto y efectos de negrita.
Por ejemplo, para un título, podemos usar h1 para definirlo:
<h1>Escribe aquí el texto del título del artículo</h1>
En lugar de definirlo de cualquier otra manera:
<p style="font-size:16px; font-weight:bold;">Escribe aquí el texto del título del artículo</p>
En artículos anteriores de Web Teaching Network, enumeramos todas las etiquetas permitidas por XHTML1.0. También podemos encontrar que en realidad hay muy pocas etiquetas de elementos que podemos elegir. Pero también nos damos cuenta claramente de que estas marcas de elementos refinados también tienen significados más claros. Si realmente no puede encontrar el elemento correcto para etiquetar, puede usar las etiquetas genéricas div y span.
El uso de etiquetas div y span en las páginas es un tema nuevo y tendemos a usarlos demasiado. El uso necesario y razonable de divs puede mejorar significativamente la estructura del documento. Si observa su documento HTML y descubre que hay muchos divs y spans, entonces debe considerar el problema desde una perspectiva diferente. ¿Existen mejores marcadores para reemplazarlos? Si h1 puede representar mejor el contenido marcado, entonces debe renunciar a p o span para definirlo.
Quizás se trata de un par de contradicciones y nos resulta difícil comprender cómo utilizarlas correctamente, o quizás no podemos obtener una respuesta clara en absoluto. Pero es necesario aclarar una cosa: debemos hacer que el documento tenga una estructura lógica clara y facilitar la aplicación de estilos. Podemos pensar en div simplemente como un contenedor o una "parte" del documento. Usamos demasiados contenedores, lo cual no es un patrón inteligente. Y un contenedor que sea el adecuado y en una posición razonable puede hacer que todo el documento parezca organizado.
El siguiente código es más razonable y efectivo:
| El siguiente es el contenido citado: <div id="encabezado"> |