En este artículo voy hablar acerca de la manera de escribir nuestros documentos XHTML semánticamente correctos, comentaré algunos beneficios y las principales etiquetas a utilizar.
Beneficios
Los beneficios de escribir documentos semánticamente correctos, es que podemos manipular el DOM de una manera sencilla, podemos aplicar los estilos correctamente, mas fácil y con mejores resultados, tus sitios serán mas accesibles, esto atrae mas trafico, y por supuesto, a los buscadores les agrada encontrarse con sitios estructurados correctamente.
Significado
Para esto, primeramente es necesario saber que significa la palabra semántica, Proviene del griego “semantikos”, que quería decir “significado relevante”, derivada de “sema”, lo que significaba “signo”, otra definición dice Rama de la lingüística que se ocupa de los cambios de significación que se han operado en las palabras.
Con esta definición en cuenta, notamos que la semántica es el significado relevante de las palabras, el sentido de estas, su significado.
Relacionando estos conceptos podemos decir que para crear un documento XHTML semánticamente correcto, es necesario escribir solo las sentencias necesarias, solo aquellas etiquetas que dan el significado que queremos dar a entender. Por ejemplo, para poner un texto en negrita, anteriormente lo hacíamos con el tag <b>, y ponía el texto en negrita, ahora bien, hazte esta pregunta ¿Por qué pusiste el texto en negrita? Seguramente para resaltar esas palabras, para que los lectores vean el énfasis de estas, bueno, si te das cuenta el significado es dar énfasis, entonces en lugar de utilizar la etiqueta <b> utilizaríamos ahora la etiqueta <strong> la cual significa que el texto seleccionado tiene mas énfasis, con CSS podemos modificar el aspecto de la etiqueta strong, por default los navegadores la ponen en negrita. Pero nosotros podemos modificar el estilo.
Bueno, existen seis diferentes tipos de títulos, por lógica nuestra página, sitio o portal debe tener un titulo principal, entonces es aquí donde se utilizará la etiqueta <H1>, con esta etiqueta estamos indicando que es el titulo principal, y no se recomienda utilizar otra vez esta etiqueta, para eso podemos utilizar h2, h3, h4, h5 o h6, las veces que queramos, por ende no utilizaríamos h4 si no hemos utilizado h3.
Es importante que cuando escribimos nuestros documentos utilizaremos la etiqueta <p> para nuestros párrafos, cuando queramos citar a un autor utilizaremos la etiqueta <q> que significa quote (En ingles cita).
Anteriormente para subrayar una palabra utilizábamos la etiqueta <s>, ahora esto esta totalmente descontinuado, esto lo podemos hacer con CSS, de la misma manera las letras en cursiva, todo esto lo haces mediante clases y selectores con CSS.
El propósito de crear un documento HTML es simplemente mostrar la información en texto plano, es decir sin ninguna alteración gráfica, únicamente lo que la gente busca, la información ordenada correctamente, esto hace nuestros sitios accesibles para cualquier persona.
Conclusión
He dicho entonces que nuestros documentos, no deben tener alteraciones graficas, entonces ¿cómo es que se hará agradable a la vista?, ¿cómo introducimos colores, imágenes, efectos? La respuesta es sencilla y ya he venido comentando al respecto, CSS es el encargado de modificar la apariencia de nuestros sitios.