2.16. HTML: tres errores típicos
En realidad, los tres errores de los que te voy a hablar, más que errores son confusiones o malas costumbres, y hasta gente que lleva muchos años creando páginas web comete estos errores de vez en cuando.
Así que presta atención y evita cometer estos errores o malas prácticas que te voy a contar a continuación.
El primer error tiene que ver con los saltos de línea.
En el vídeo HTML: conceptos básicos (segunda parte) te expliqué que en HTML podemos escribir toda una página web en una sola línea porque los saltos de línea normales no son significativos.
Por ejemplo, yo podría escribir esta pequeña página web así o de esta otra forma y mi página se visualizaría exactamente igual. Lo que ocurre es que normalmente el código se separa, para que sea más fácil de leer. Pero no es obligatorio, es simplemente una cuestión de estilo.
Pero entonces, ¿cómo se introduce un salto de línea en un texto?
Para ello existe una etiqueta llamada <br>, que es una etiqueta vacía porque no puede tener contenido entre la etiqueta de inicio y de fin.
Como es una etiqueta vacía, normalmente nunca la verás escrita así<br>...</br> (yo nunca la he visto, aunque se puede), sino que según la versión de HTML la verás escrita así<br>, por ejemplo en HTML4, o de esta otra forma en XHTML<br />.
Por cierto, antes de que lo preguntes, te contesto: en HTML5 puedes emplear cualquiera de las dos posibilidades.
Pero yo te aconsejo que utilices la segunda<br />, por compatibilidad con XHTML y XML.
Antes de continuar, te quiero hacer una pregunta: cuando estás escribiendo en un editor de textos, ¿cuándo necesitas insertar un salto de línea en el texto? Venga, te dejo unos segundos para que lo pienses. ¿Ya? ¿Suficiente?
Si consultamos la especificación oficial del lenguaje HTML5, y buscamos la etiqueta <br>, podremos leer las siguientes advertencias.
El elemento <br> se debe usar únicamente para insertar saltos de línea que son realmente parte del contenido, como en un poema o en una dirección.
El elemento <br> no se debe utilizar para separar contenido en un párrafo que realmente es independiente. Por ejemplo, esto está mal, y es mejor escribirlo de esta forma, es decir, como dos párrafos independientes.
Lo mismo ocurre con este otro código, que es un fragmento de un formulario, mucha gente lo escribe así (ya lo verás, y tengo que reconocer que yo también lo he hecho más de una vez), separando los controles del formulario de forma artificial con saltos de línea.
Lo mejor, otra vez, es escribirlo de esta forma, es decir, como dos párrafos independientes, cada control con su etiqueta en su propio párrafo.
Y por supuesto, que no se te ocurra hacer barbaridades como esta, crear listas a mano con saltos de línea. Como te vea hacerlo, me enfadaré mucho. Una lista la tienes que etiquetar correctamente con las etiquetas correspondientes de lista.
El segundo error son los espacios en blanco. Este error es parecido al anterior, al de los saltos de línea.
Al igual que los saltos de línea, en HTML los espacios en blanco no son significativos: 1, 2, o 10 espacios en blanco, al final se visualizan de la misma forma. Lo importante es que al menos haya un espacio en blanco para separar.
Pero entonces, ¿cómo se introducen varios espacios en blanco entre, por ejemplo, dos palabras?
En HTML existe una forma especial de representar un espacio en blanco que es una referencia de carácter. A continuación, en el último error, veremos con detalle qué son las referencias de caracteres.
“nbsp” significa “no-break space”, es decir, espacio en blanco que no se puede romper, y no se debe emplear para introducir espacios en blanco simplemente por una cuestión de presentación visual.
Si se quieren separar las palabras en un texto, por ejemplo, en un título, introducir espacios en blanco artificiales es una muy mala solución. Esto es una cuestión de presentación, no de contenido, y por tanto se debe emplear CSS.
Lo último que te quiero comentar son las referencias de caracteres, también llamadas por algunos autores entidades de caracteres.
Las referencias de caracteres es un mecanismo que ofrece HTML para incluir en un texto caracteres que, de otra forma, no se podrían incluir, por ejemplo por usar un juego de caracteres que no admite ciertos caracteres.
Los caracteres que no se pueden incluir se tienen que escribir de una forma especial. A este proceso en informática se le suele llamar ”Escapar” los caracteres, palabra horrible que supongo que imaginarás que no existe en el diccionario español.
HTML permite tres tipos de referencias de caracteres, y todas ellas deben empezar con el carácter “ampersand” y deben terminar con el punto y coma.
Las primeras, las referencias de caracteres con nombre, emplean unos nombres que se han definido para los caracteres especiales.
En la especificación de HTML existe un apartado con las referencias de caracteres con nombre, que son unas miles.
Aquí podemos ver un fragmento de esta tabla. En la primera columna aparece el nombre de la referencia de carácter, en la segunda columna el código Unicode y en la tercera columna el glifo, la representación visual del carácter.
Las referencias de caracteres son necesarias para representar algunos caracteres especiales, como por ejemplo el ampersand, las comillas dobles y simples, el menor que y el mayor que, que realizan una función especial en HTML.
En las referencias de caracteres numéricas decimales se emplea un número en base 10 para representar el carácter. Este número es el código Unicode del carácter.
La sintaxis es &# y a continuación el número, que puede estar formado por uno o varios dígitos.
Por último, en las referencias de caracteres numéricas hexadecimales se emplea un número hexadecimal, es decir, en base 16 para representar el carácter. Otra vez, este número es el código Unicode del carácter.
La sintaxis es &#x (en minúsculas o mayúsculas) y a continuación el número hexadecimal, es decir, los dígitos del 0 al 9 y las letras de la A a la F, en minúsculas o mayúsculas, que puede estar formado por uno o varios dígitos hexadecimales.
¿Qué problema hay, entonces, con las referencias de caracteres?
En realidad, como he dicho antes, esto no es un error, sino algo que se podría hacer mejor. Por ejemplo, en esta tabla podemos ver que la “A” mayúscula acentuada se puede representar como “Aacute” y la a minúscula como “aacute”. Esto mismo ocurre con el resto de vocales, por lo que también tenemos estas formas de escribir las vocales acentuadas en el español. El problema es que en muchos sitios pone, y mucha gente cree, que esta es la única forma de escribir las vocales acentuadas en una página web, por lo que se acaba con código HTML que es muy difícil de leer a veces. ¿Este código está mal? No, no está mal, pero si se emplea el juego de caracteres adecuado, como ISO-8859-1, también llamado Latin1, o UTF-8, escribir el texto así es totalmente inútil porque no es necesario.
Para terminar este vídeo, te recuerdo que para aprender HTML y otras tecnologías web existen cientos de sitios en la Web. Yo te recomiendo el sitio web W3Schools. En este sitio puedes encontrar un apartado de tutoriales.
Actividad
1. En HTML5, ¿que etiqueta podemos usar si queremos introducir un salto de linea?
2. ¿Cómo podemos introducir espacios extra entre dos palabras?
3. ¿Cómo podemos introducir caracteres especiales mediante referencias?
No hay comentarios:
Publicar un comentario